財団-基本タイポグラフィ

説明

Foundationのタイポグラフィは、要素の魅力的でシンプルなデフォルトスタイルを作成する見出し、段落、リスト、およびその他のインライン要素を定義します。

次の表に、Foundationで使用されるさまざまなタイプのタイポグラフィを示します。

シニア番号 タイポグラフィと説明
1 段落

段落は、さまざまなフォントサイズ、強調表示された単語、行の高さなどで定義された文のグループです。

2 ヘッダ

h1からh6までのHTML見出しを定義します。

3 リンク

テキストまたは画像をクリックすると別のドキュメントを開くハイパーリンクが作成されます。

4 仕切り

<hr>タグを使用して、セクション間に区切りを付けるために使用されます。

5 順序付きリストと順序なしリスト

Foundationは、順序付きリスト、順序なしリストをサポートして、物事をリストします。

6 定義リスト

定義リストは、名前と値のペアを表示するために使用されます。

7 ブロッククォート

これはテキストのブロックを表し、通常よりもはるかに大きく定義されます。

8 略語とコード

略語は単語または句の短縮された用語を定義し、コードはコードの一部を表します。

9 キーストローク

特定の機能を実行するために使用されます。

10 アクセシビリティ

Foundationは、ページのコンテンツにアクセスするためのガイドラインをいくつか提供しています。

Sassリファレンス

表にリストされている次のSASS変数を使用して、コンポーネントのスタイルを変更できます。

シニア番号 名前と説明 タイプ デフォルト値
1

$header-font-family

ヘッダー要素のフォントファミリーを指定します。

文字列またはリスト $ body-font-family
2

$header-font-weight

ヘッダーのフォントの太さを指定します。

ストリング $ global-weight-normal
3

$header-font-style

ヘッダーのフォントスタイルを提供します。

ストリング 正常
4

$font-family-monospace

コードサンプルなど、等幅タイプを使用する要素に使用されるフォントスタック。

文字列またはリスト Consolas、「Liberation Mono」、Courier、monospace
5

$header-sizes

見出しの画面サイズを定義し、各キーはブレークポイントであり、各値は見出しサイズのマップです。

地図
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

ヘッダーの色を提供します。

継承
7

$header-lineheight

ヘッダーの行の高さを定義します。

1.4
8

$header-margin-bottom

ヘッダーの下マージンを提供します。

0.5レム
9

$header-text-rendering

テキストレンダリングの方法を定義します。

ストリング optimizeLegibility
10

$small-font-size

<small>要素のフォントサイズを指定します。

80%
11

$paragraph-margin-bottom

段落の下マージンを指定します。

1レム
12

$paragraph-text-rendering

テキストレンダリング段落のメソッド。

ストリング optimizeLegibility
13

$code-color

コードサンプルにテキストの色を提供します。

$ black
14

$code-font-family

コードサンプルにフォントファミリーを提供します。

文字列またはリスト $ font-family-monospace
15

$code-border

コードの周囲の境界線を指定します。

リスト 1pxソリッド$ medium-gray
16

$code-padding

テキストの周囲のパディングを指定します。

番号またはリスト rem-calc(2 5 1)
17

$anchor-color

リンクのデフォルトの色。

$ primary-color
18

$anchor-color-hover

ホバー時のリンクのデフォルトの色を指定します。

スケールカラー($アンカーカラー、$明度:-14%)
19

$anchor-text-decoration

リンクのデフォルトのテキスト装飾。

ストリング なし
20

$anchor-text-decoration-hover

ホバー上のリンクのデフォルトのテキスト装飾。

ストリング なし
21

$hr-width

仕切りの最大幅を定義します。

$ global-width
22

$hr-border

仕切りのデフォルトの境界線を指定します。

リスト 1pxソリッド$ medium-gray
23

$hr-margin

仕切りのデフォルトマージン。

番号またはリスト rem-calc(20)自動
24

$list-lineheight

リスト内のアイテムの行の高さを定義します。

$ paragraph-lineheight
25

$list-style-type

順序付けされていないリストの箇条書きタイプを提供します。

ストリング ディスク
26

$list-style-position

順序付けされていないリストでの箇条書きの配置を定義します。

ストリング 外側
27

$list-side-margin

左側(または右側)のマージンを定義します。

1.25rem
28

$defnlist-term-weight

<dt>要素のフォントの重みを提供します。

ストリング $ global-weight-bold
29

$defnlist-term-margin-bottom

<dt>要素と<dd>要素の間に間隔を空けます。

0.3rem
30

$blockquote-color

<blockquote>要素のテキストの色を適用します。

$ dark-gray
31

$blockquote-padding

<blockquote>要素内にパディングを提供します。

番号またはリスト rem-calc(9 20 0 19)
32

$blockquote-border

<blockquote>要素のサイドボーダーを提供します。

リスト 1pxソリッド$ medium-gray
33

$cite-font-size

<cite>要素のフォントサイズを定義します。

rem-calc(13)
34

$cite-color

<cite>要素のテキストの色を提供します。

$ dark-gray
35

$keystroke-font

<kbd>要素のフォントファミリーを定義します。

文字列またはリスト $ font-family-monospace
36

$keystroke-color

<kbd>要素のテキストの色を定義します。

$ black
37

$keystroke-background

<kbd>要素の背景色を提供します。

$ light-gray
38

$keystroke-padding

<kbd>要素のパディングを指定します。

番号またはリスト rem-calc(2 4 0)
39

$keystroke-radius

<kbd>要素の境界半径を表示します。

番号またはリスト $ global-radius
40

$abbr-underline

<abbr>要素の下枠スタイルを提供します。

リスト 1pxドット$ black