Foundation-base-typography
Foundation-Base Typography
説明
Foundationのタイポグラフィは、見出し、段落、リスト、および要素の魅力的でシンプルなデフォルトスタイルを作成するその他のインライン要素を定義します。
次の表は、Foundationで使用されるタイポグラフィのさまざまなタイプを示しています-
| Sr.No. | Typography & Description |
|---|---|
| 1 |
段落は、異なるフォントサイズ、強調表示された単語、行の高さなどで定義された文のグループです。 |
| 2 |
h1からh6までのHTML見出しを定義します。 |
| 3 |
テキストまたは画像をクリックすると別のドキュメントを開くハイパーリンクを作成します。 |
| 4 |
<hr>タグを使用して、セクション間に区切りを付けるために使用されます。 |
| 5 |
Foundationは、物事をリストするための順序付きリスト、順序なしリストをサポートしています。 |
| 6 |
定義リストは、名前と値のペアを表示するために使用されます。 |
| 7 |
これは、通常よりもはるかに大きいテキストブロックを表します。 |
| 8 |
略語は単語またはフレーズの短縮された用語を定義し、コードはコードの一部を表します。 |
| 9 |
特定の機能を実行するために使用されます。 |
| 10 |
Foundationは、ページのコンテンツにアクセスするためのガイドラインを提供しています。 |
Sassリファレンス
表にリストされている次のSASS変数を使用して、コンポーネントのスタイルを変更できます。
以下は、次のSASS変数を使用したコンポーネントのスタイルです。
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$header-font-family ヘッダー要素のフォントファミリを指定します。 |
String or List | $body-font-family |
| 2 |
$header-font-weight ヘッダーのフォントの太さを指定します。 |
String | $global-weight-normal |
| 3 |
$header-font-style ヘッダーのフォントスタイルを提供します。 |
String | normal |
| 4 |
$font-family-monospace コードサンプルなど、等幅タイプを使用する要素に使用されるフォントスタック。 |
String or List | Consolas, 'Liberation Mono', Courier, monospace |
| 5 |
$header-sizes 見出しの画面サイズを定義します。各キーはブレークポイントであり、各値は見出しサイズのマップです。 |
Map |
|
| 6 |
$header-color ヘッダーの色を提供します。 |
Color | inherit |
| 7 |
$header-lineheight ヘッダーの行の高さを定義します。 |
Number | 1.4 |
| 8 |
$header-margin-bottom ヘッダーの下マージンを提供します。 |
Number | 0.5rem |
| 9 |
$header-text-rendering テキストレンダリングのメソッドを定義します。 |
String | optimizeLegibility |
| 10 |
$small-font-size <small>要素のフォントサイズを指定します。 |
Number | 80% |
| 11 |
$paragraph-margin-bottom 段落の下マージンを指定します。 |
Number | 1rem |
| 12 |
$paragraph-text-rendering 段落をテキスト表示するためのメソッド。 |
String | optimizeLegibility |
| 13 |
$code-color コードサンプルにテキストの色を提供します。 |
Color | $black |
| 14 |
$code-font-family コードファミリにフォントファミリを提供します。 |
String or List | $font-family-monospace |
| 15 |
$code-border コードの周囲の境界線を指定します。 |
List | 1px solid $medium-gray |
| 16 |
$code-padding テキストの周囲のパディングを指定します。 |
Number or List | rem-calc(2 5 1) |
| 17 |
$anchor-color リンクのデフォルトの色。 |
Color | $primary-color |
| 18 |
$anchor-color-hover ホバー時のリンクのデフォルトの色を指定します。 |
Color | scale-color($anchor-color, $lightness: -14%) |
| 19 |
$anchor-text-decoration リンクのデフォルトのテキスト装飾。 |
String | none |
| 20 |
$anchor-text-decoration-hover ホバー時のリンクのデフォルトのテキスト装飾。 |
String | none |
| 21 |
$hr-width 仕切りの最大幅を定義します。 |
Number | $global-width |
| 22 |
$hr-border 仕切りのデフォルトの境界線を指定します。 |
List | 1px solid $medium-gray |
| 23 |
$hr-margin 仕切りのデフォルトのマージン。 |
Number or List | rem-calc(20) auto |
| 24 |
$list-lineheight リスト内のアイテムの行の高さを定義します。 |
Number | $paragraph-lineheight |
| 25 |
$list-style-type 順不同リストの箇条書きタイプを提供します。 |
String | disc |
| 26 |
$list-style-position 順不同リストの箇条書きの位置を定義します。 |
String | outside |
| 27 |
$list-side-margin 左側（または右側）のマージンを定義します。 |
Number | 1.25rem |
| 28 |
$defnlist-term-weight <dt>要素のフォントの太さを提供します。 |
String | $global-weight-bold |
| 29 |
$defnlist-term-margin-bottom <dt>要素と<dd>要素の間に間隔を空けます。 |
Number | 0.3rem |
| 30 |
$blockquote-color <blockquote>要素のテキスト色を適用します。 |
Color | $dark-gray |
| 31 |
$blockquote-padding <blockquote>要素内にパディングを提供します。 |
Number or List | rem-calc(9 20 0 19) |
| 32 |
$blockquote-border <blockquote>要素の横の境界線を提供します。 |
List | 1px solid $medium-gray |
| 33 |
$cite-font-size <cite>要素のフォントサイズを定義します。 |
Number | rem-calc(13) |
| 34 |
$cite-color `+ <cite> +`要素のテキストの色を提供します。 |
Color | $dark-gray |
| 35 |
$keystroke-font <kbd>要素のフォントファミリを定義します。 |
String or List | $font-family-monospace |
| 36 |
$keystroke-color <kbd>要素のテキストの色を定義します。 |
Color | $black |
| 37 |
$keystroke-background <kbd>要素の背景色を提供します。 |
Color | $light-gray |
| 38 |
$keystroke-padding <kbd>要素のパディングを指定します。 |
Number or List | rem-calc(2 4 0) |
| 39 |
$keystroke-radius <kbd>要素の境界半径を表示します。 |
Number or List | $global-radius |
| 40 |
$abbr-underline <abbr>要素に下罫線スタイルを提供します。 |
List | 1px dotted $black |
