タイポグラフィ
グローバル設定、見出し、本文テキスト、リストなど、Bootstrap タイポグラフィのドキュメントと例。
全体設定
Bootstrap は、基本的なグローバル表示、タイポグラフィ、およびリンク スタイルを設定します。さらに制御が必要な場合は、テキスト ユーティリティ クラスを確認してください。
- 各 OS とデバイスに最適なネイティブ フォント スタックを使用します。
font-family
- より包括的でアクセスしやすいタイプ スケールのために、ブラウザーのデフォルト ルート
font-size
(通常は 16px) を想定しているため、訪問者は必要に応じてブラウザーのデフォルトをカスタマイズできます。 $font-family-base
、$font-size-base
、および$line-height-base
属性を、 に適用されるタイポグラフィック ベースとして使用します<body>
。- 経由でグローバル リンクの色を設定し、 に
$link-color
のみリンクの下線を適用します:hover
。 - (デフォルトでは) に
$body-bg
a を設定するために使用します。background-color
<body>
#fff
これらのスタイルは 内_reboot.scss
にあり、グローバル変数は で定義されてい_variables.scss
ます。で必ず設定$font-size-base
してくださいrem
。
見出し
までのすべての HTML 見出し<h1>
を<h6>
使用できます。
見出し | 例 |
---|---|
|
h1. ブートストラップの見出し |
|
h2. ブートストラップの見出し |
|
h3. ブートストラップの見出し |
|
h4. ブートストラップの見出し |
|
h5. ブートストラップの見出し |
|
h6. ブートストラップの見出し |
.h1
見出しのフォント スタイルを一致させたいが、関連付けられた HTML 要素を使用できない場合のために、スルー.h6
クラスも利用できます。
h1. ブートストラップの見出し
h2. ブートストラップの見出し
h3. ブートストラップの見出し
h4. ブートストラップの見出し
h5. ブートストラップの見出し
h6. ブートストラップの見出し
見出しのカスタマイズ
付属のユーティリティ クラスを使用して、Bootstrap 3 の小さな二次見出しテキストを再作成します。
色あせたセカンダリ テキストを含む派手な表示見出し
見出しを表示する
従来の見出し要素は、ページ コンテンツの中で最適に機能するように設計されています。目立たせる見出しが必要な場合は、表示見出しを使用することを検討してください。これらの見出しはデフォルトではレスポンシブではありませんが、レスポンシブ フォント サイズを有効にすることは可能です。
ディスプレイ 1 |
ディスプレイ 2 |
ディスプレイ 3 |
ディスプレイ 4 |
鉛
を追加して、段落を目立たせ.lead
ます。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
インライン テキスト要素
一般的なインライン HTML5 要素のスタイリング。
マークタグを使用して、ハイライト文章。
このテキスト行は、削除されたテキストとして扱われることを意図しています。
このテキスト行は、もはや正確ではないものとして扱われることを意図しています。
このテキスト行は、ドキュメントへの追加として扱われることを意図しています。
このテキスト行は下線付きで表示されます
このテキスト行は細字として扱われることを意図しています。
この行は太字で表示されます。
この行は斜体のテキストとして表示されます。
.mark
タグがもたらす望ましくないセマンティックな影響を回避しながら、 andと.small
同じスタイルを適用するクラスも利用できます。<mark>
<small>
上記には示されていませんが、HTML5 では自由に<b>
andを使用してください。主に音声、技術用語などのためのものですが、追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i>
<b>
<i>
テキストユーティリティ
テキスト ユーティリティとカラー ユーティリティを使用して、テキストの配置、変換、スタイル、太さ、色を変更します。
略語
<abbr>
ホバー時に展開されたバージョンを表示するための、略語と頭字語の HTML 要素の様式化された実装。略語にはデフォルトの下線があり、カーソルを合わせたときに追加のコンテキストを提供し、支援技術のユーザーに提供するヘルプ カーソルを取得します。
.initialism
若干小さいフォント サイズの省略形に追加します。
属性
HTML
ブロッククオート
ドキュメント内の別のソースからコンテンツのブロックを引用する場合。引用符としてHTMLを囲み<blockquote class="blockquote">
ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
ソースの命名
<footer class="blockquote-footer">
ソースを識別するために a を追加します。ソース作品の名前を で囲み<cite>
ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
アライメント
ブロック引用の配置を変更するには、必要に応じてテキスト ユーティリティを使用します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
リスト
スタイルなし
list-style
リスト項目のデフォルトおよび左余白を削除します(直接の子のみ)。これは直接の子リスト項目にのみ適用されます。つまり、ネストされたリストにもクラスを追加する必要があります。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- マッサで整数痴漢ロレム
- プレチウム ニスル アリケのファシリシス
- Nulla volutpat aliquam velit
- インゲンマメ iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
列をなして
リストの箇条書きを削除し、margin
2 つのクラス.list-inline
と.list-inline-item
.
- ロレム・イプサム
- インゲンマメ
- ヌラ・ヴォルパット
説明リストの配置
グリッド システムの定義済みクラス (またはセマンティック ミックスイン) を使用して、用語と説明を水平方向に配置します。より長い用語については、オプションで.text-truncate
クラスを追加して、省略記号でテキストを切り捨てることができます。
- 説明リスト
- 説明リストは、用語を定義するのに最適です。
- ユースモッド
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- マレスアダ ポルタ
- Etiam porta sem malesuada magna mollis euismod.
- 切り捨てられた用語は切り捨てられます
- Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut fermentum massa justo sit amet risus.
- ネスティング
-
- ネストされた定義リスト
- Aenean posuere、tortor sed cursus feugiat、nunc augue blandit nunc。
レスポンシブ フォント サイズ
v4.3.0 の時点で、Bootstrap にはレスポンシブ フォント サイズを有効にするオプションが付属しており、デバイスやビューポートのサイズ全体でテキストをより自然にスケーリングできます。RFS$enable-responsive-font-sizes
は、 Sass 変数をtrue
Bootstrapに変更して再コンパイルすることで有効にできます。
RFSをサポートするために、Sass mixin を使用して通常のfont-size
プロパティを置き換えます。calc()
レスポンシブ フォント サイズは、 と ビューポート ユニットを組み合わせた関数にコンパイルされrem
、レスポンシブ スケーリング動作を有効にします。RFSとその構成の詳細については、そのGitHub リポジトリを参照してください。