タイポグラフィ
グローバル設定、見出し、本文テキスト、リストなど、Bootstrap タイポグラフィのドキュメントと例。
全体設定
Bootstrap は、基本的なグローバル表示、タイポグラフィ、およびリンク スタイルを設定します。さらに制御が必要な場合は、テキスト ユーティリティ クラスを確認してください。
- 各 OS とデバイスに最適なネイティブ フォント スタックを使用します。
font-family - より包括的でアクセスしやすいタイプ スケールのために、ブラウザーのデフォルト ルート
font-size(通常は 16px) を想定しているため、訪問者は必要に応じてブラウザーのデフォルトをカスタマイズできます。 $font-family-base、$font-size-base、および$line-height-base属性を、 に適用されるタイポグラフィック ベースとして使用します<body>。- 経由でグローバル リンクの色を設定し、 に
$link-colorのみリンクの下線を適用します:hover。 - (デフォルトでは) に
$body-bga を設定するために使用します。background-color<body>#fff
これらのスタイルは 内_reboot.scssにあり、グローバル変数は で定義されてい_variables.scssます。で必ず設定$font-size-baseしてくださいrem。
見出し
までのすべての HTML 見出し<h1>を<h6>使用できます。
| 見出し | 例 |
|---|---|
|
|
h1. ブートストラップの見出し |
|
|
h2. ブートストラップの見出し |
|
|
h3. ブートストラップの見出し |
|
|
h4. ブートストラップの見出し |
|
|
h5. ブートストラップの見出し |
|
|
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ます。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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">ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>ソースの命名
<footer class="blockquote-footer">ソースを識別するために a を追加します。ソース作品の名前を で囲み<cite>ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>アライメント
ブロック引用の配置を変更するには、必要に応じてテキスト ユーティリティを使用します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>リスト
スタイルなし
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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>列をなして
リストの箇条書きを削除し、margin2 つのクラス.list-inlineと.list-inline-item.
- ロレム・イプサム
- インゲンマメ
- ヌラ・ヴォルパット
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>説明リストの配置
グリッド システムの定義済みクラス (またはセマンティック ミックスイン) を使用して、用語と説明を水平方向に配置します。より長い用語については、オプションで.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。
<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">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>レスポンシブ タイポグラフィ
レスポンシブ タイポグラフィfont-sizeとは、一連のメディア クエリ内でルート要素を調整するだけで、テキストとコンポーネントをスケーリングすることです。Bootstrap はこれを行いませんが、必要に応じて簡単に追加できます。
これが実際の例です。font-size必要なs とメディア クエリを選択します。
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}