Bootstrap CSS タイポグラフィ・リファレンス

❮ 前章へ 次のリファレンス ❯

Bootstrap のデフォルト設定

Bootstrap のグローバルなデフォルト・フォントサイズは 14 pxで、行の高さは 1.428 です。

これは、<body> と全段落に適用されます。

さらに、全ての <p> 要素には、計算した line-height の半分に等しい下マージンが>設定されています(デフォルトで 10 px)。


タイポグラフィ

下の要素は、ブラウザのデフォルトよりも、ブートストラップによって少々異なってスタイルされている HTML 要素です。 結果/違いを見るために、"Try it" の例を見てください。

下のクラスは、要素のスタイルをさらに設定するため使用します。

要素/クラス 説明
<h1> - <h6>
または
.h1 - .h6
h1 - h6 見出し Try it
<small> 全ての見出しにおいて、薄くて補助的なテキストを作成する

Heading (secondary text)

Try it
.small 小さなテキストを表示 (親のサイズの 85% に設定):Smaller text Try it
.lead テキストを目立たせる:Stand out text Try it
<mark>
or
.mark
テキストのハイライト:Highlighted text Try it
<del> 削除テキストを表す:Deleted text Try it
<s> もう無関係になったテキストを表す:No longer relevant text Try it
<ins> 挿入テキストを表す:Inserted text Try it
<u> アンダーライン付きテキストを表す:Underlined text Try it
<strong> 太字のテキストを表す:Bold text Try it
<em> イタリックテ体のキストを表す:Italic text Try it
.text-left 左揃えテキストを表す Try it
.text-center 中央揃えテキストを表す Try it
.text-right 右揃えテキストを表す Try it
.text-justify 両端揃えテキストを表す Try it
.text-nowrap 折返さないテキストを表す Try it
.text-lowercase 小文字のテキストを表す:LOWERCASED TEXT Try it
.text-uppercase 大文字のテキストを表す:uppercased text Try it
.text-capitalize 大文字で始まるテキストを表す:capitalized text Try it
<abbr> The <abbr> 要素は、略語や頭字語を表す。title 属性を持つ abbr は、点線の下ボーダーと上にマウスを乗せると ヘルプカーソルを表示し、追加のコンテキストをバルーン表示する。 Try it
.initialism わずかに小さいフォントサイズで <abbr> 要素内のテキストを表示する Try it
<address> 連絡先情報を表す Try it
<blockquote> 他ソースからのコンテンツ・ブロックであることを表す Try it
.blockquote-reverse 右揃えのコンテンツを持つ blockquote であることを表す Try it
<ul> 順序なしリスト表す Try it
<ol> 順序付きリスト表す Try it
.list-unstyled リスト項目のデフォルトのリスト·スタイルと左マージンを削除する(<ul> と <ol> の双方で動作)。 このクラスは、直接の子であるリスト項目にのみ適用される(全てのネストしたリストから、 デフォルトのリストスタイルを削除するためには、すべてのネストしたリストにもこのクラスを適用する) Try it
.list-inline 1 行に全リスト項目を配置する Try it
<dl> 説明リストを表す Try it
.dl-horizontal <dl> 要素の横に用語と説明を表示する。最初はデフォルトの <dl> のようになっているが、 ブラウザウィンドウを広げると横にラインアップされる Try it

コード

要素/クラス 説明
<var> 変数を表す:x = ab + y Try it
<kbd> 一般にキーボードを経由した入力を表す:CTRL + P Try it
<pre> 複数行のコードを表す Try it
<pre class="pre-scrollable"> スクロールバー付きの複数行のコードを表す Try it
<samp> コンピュータプログラムからのサンプル出力を表す:Sample output Try it
<code> コードのインラインスニペットを表す:span, div Try it

❮ 前章へ 次のリファレンス ❯