タイポグラフィ
グローバル設定、見出し、本文テキスト、リストなど、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></h1> |
h1. ブートストラップの見出し |
<h2></h2> |
h2. ブートストラップの見出し |
<h3></h3> |
h3. ブートストラップの見出し |
<h4></h4> |
h4. ブートストラップの見出し |
<h5></h5> |
h5. ブートストラップの見出し |
<h6></h6> |
h6. ブートストラップの見出し |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
見出しのフォント スタイルを一致させたいが、関連付けられた HTML 要素を使用できない場合のために、スルー.h6
クラスも利用できます。
h1. ブートストラップの見出し
h2. ブートストラップの見出し
h3. ブートストラップの見出し
h4. ブートストラップの見出し
h5. ブートストラップの見出し
h6. ブートストラップの見出し
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
見出しのカスタマイズ
付属のユーティリティ クラスを使用して、Bootstrap 3 の小さな二次見出しテキストを再作成します。
色あせたセカンダリ テキストを含む派手な表示見出し
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
見出しを表示する
従来の見出し要素は、ページ コンテンツの中で最も効果的に機能するように設計されています。目立たせる見出しが必要な場合は、表示見出しを使用することを検討してください。これらの見出しはデフォルトではレスポンシブではありませんが、レスポンシブ フォント サイズを有効にすることは可能です。
ディスプレイ 1 |
ディスプレイ 2 |
ディスプレイ 3 |
ディスプレイ 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
鉛
を追加して、段落を目立たせ.lead
ます。
これはリードパラグラフです。通常の段落とは一線を画しています。
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
インライン テキスト要素
一般的なインライン HTML5 要素のスタイリング。
マークタグを使用して、ハイライト文章。
このテキスト行は、削除されたテキストとして扱われることを意図しています。
このテキスト行は、もはや正確ではないものとして扱われることを意図しています。
このテキスト行は、ドキュメントへの追加として扱われることを意図しています。
このテキスト行は下線付きで表示されます
このテキスト行は細字として扱われることを意図しています。
この行は太字で表示されます。
この行は斜体のテキストとして表示されます。
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
タグがもたらす望ましくないセマンティックな影響を回避しながら、 andと.small
同じスタイルを適用するクラスも利用できます。<mark>
<small>
上記には示されていませんが、HTML5 では自由に<b>
andを使用してください。主に音声、技術用語などのためのものですが、追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i>
<b>
<i>
テキストユーティリティ
テキスト ユーティリティとカラー ユーティリティを使用して、テキストの配置、変換、スタイル、太さ、色を変更します。
略語
<abbr>
ホバー時に展開されたバージョンを表示するための、略語と頭字語の HTML 要素の様式化された実装。略語にはデフォルトの下線があり、カーソルを合わせたときや支援技術のユーザーに追加のコンテキストを提供するヘルプ カーソルが表示されます。
.initialism
若干小さいフォント サイズの省略形に追加します。
属性
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
ブロッククオート
ドキュメント内の別のソースからコンテンツのブロックを引用する場合。引用符としてHTMLをラップ<blockquote class="blockquote">
します。
blockquote 要素に含まれるよく知られた引用。
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
ソースの命名
<footer class="blockquote-footer">
ソースを識別するために a を追加します。ソース作品の名前を で囲み<cite>
ます。
blockquote 要素に含まれるよく知られた引用。
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
アライメント
ブロック引用の配置を変更するには、必要に応じてテキスト ユーティリティを使用します。
blockquote 要素に含まれるよく知られた引用。
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
blockquote 要素に含まれるよく知られた引用。
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
リスト
スタイルなし
list-style
リスト項目のデフォルトおよび左余白を削除します(直接の子のみ)。これは直接の子リスト項目にのみ適用されます。つまり、ネストされたリストにもクラスを追加する必要があります。
- これはリストです。
- 完全にスタイリングされていないように見えます。
- 構造的には、まだリストです。
- ただし、このスタイルは直接の子要素にのみ適用されます。
- ネストされたリスト:
- このスタイルの影響を受けません
- まだ弾丸が表示されます
- 適切な左マージンを持つ
- これは、状況によってはまだ便利な場合があります。
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
列をなして
リストの箇条書きを削除し、margin
2 つのクラス.list-inline
と.list-inline-item
.
- これはリスト項目です。
- そしてもう一つ。
- しかし、それらはインラインで表示されます。
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
説明リストの配置
グリッド システムの定義済みクラス (またはセマンティック ミックスイン) を使用して、用語と説明を水平方向に配置します。より長い用語については、オプションで.text-truncate
クラスを追加して、省略記号でテキストを切り捨てることができます。
- 説明リスト
- 説明リストは、用語を定義するのに最適です。
- 学期
-
用語の定義。
そして、いくつかのプレースホルダー定義テキスト。
- 別の用語
- この定義は短いので、余分な段落などはありません。
- 切り捨てられた用語は切り捨てられます
- これは、スペースが狭い場合に役立ちます。最後に省略記号を追加します。
- ネスティング
-
- ネストされた定義リスト
- あなたは定義リストが好きだと聞きました。あなたの定義リストの中に定義リストを入れさせてください。
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
レスポンシブ フォント サイズ
v4.3.0 の時点で、Bootstrap にはレスポンシブ フォント サイズを有効にするオプションが付属しており、デバイスやビューポートのサイズ全体でテキストをより自然にスケーリングできます。RFS$enable-responsive-font-sizes
は、 Sass 変数をtrue
Bootstrapに変更して再コンパイルすることで有効にできます。
RFSをサポートするために、Sass mixin を使用して通常のfont-size
プロパティを置き換えます。レスポンシブ フォント サイズは、レスポンシブ スケーリング動作を有効にするために と ビューポート ユニットをcalc()
組み合わせた関数にコンパイルされます。RFSとその構成のrem
詳細については、そのGitHub リポジトリを参照してください。