ホーム > >

Bootstrap 4テキストのレイアウト

Bootstrap 4 デフォルト設定

Bootstrap 4のデフォルトのフォントサイズ(font-size)は16pxで、行の高さ(line-height)は1.5です。

デフォルトのフォントファミリ(font-family)は、“Helvetica Neue”、Helvetica、Arial、sans-serifです。

さらに、すべての<p>要素にはmargin-top:0、margin-bottom: 1rem (16px)があります。

<h1> – <h6>

すべてのHTMLタイトル(h1からh6)のスタイルは、Bootstrapで定義されています。 次の例を参照してください。

実例

<div class="container">
  <h1>h1 Bootstrap タイトル (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap タイトル (2rem = 32px)</h2>
  <h3>h3 Bootstrap タイトル (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap タイトル (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap タイトル (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap タイトル (1rem = 16px)</h6>
</div>

Display クラス(タイトル)

Bootstrapには、タイトルのスタイルを制御するために4つのDisplayクラス(.display-1、.display-2、.display-3、.display-4)が用意されています。

実例

<div class="container">
  <h1>Display タイトル</h1>
  <p>Display タイトルは、より大きく太字のフォントスタイルで出力できます。</p>
  <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>
</div>

<small>

Bootstrap 4では、HTMLの<small>要素を使用して、フォントサイズを小さくし、色を薄くしたテキストを作成します。

実例

<div class="container">
  <h1>テキストのより小さいタイトル</h1>
  <p>small 要素はフォントサイズがより小さく、色が薄いテキストに使用されます:</p>       
  <h1>h1 タイトル <small>サブ(副)タイトル</small></h1>
  <h2>h2 タイトル <small>サブ(副)タイトル</small></h2>
  <h3>h3 タイトル <small>サブ(副)タイトル</small></h3>
  <h4>h4 タイトル <small>サブ(副)タイトル</small></h4>
  <h5>h5 タイトル <small>サブ(副)タイトル</small></h5>
  <h6>h6 タイトル <small>サブ(副)タイトル</small></h6>
</div>

<mark>

Bootstrap 4は、<mark>を黄色の背景と特定の内側の余白として定義しています。

実例

<div class="container">
  <h1>テキストを強調表示</h1>    
  <p>mark要素を使用してテキストを<mark>強調表示</ mark></p>
</div>

<abbr>

Bootstrap 4は、HTML<abbr>要素のスタイルを、テキストの下部に表示される点線の下線として定義します。

実例

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

引用された内容に対して、.blockquoteクラスを<blockquote>に追加できます。

実例

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<dl>

Bootstrap 4は、HTMLの要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

<code>

Bootstrap 4は、HTMLの<code>要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>一部のコード</h1>
  <p>code要素内にいくつかのコード要素を配置できます:</p>
  <p>以下の HTML 要素: <code>span</code>, <code>section</code>, 及び <code>div</code> はドキュメントコンテンツの一部を定義するために使用されます。</p>
</div>

<kbd>

Bootstrap 4は、HTMLの<kbd>要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

Bootstrap 4は、HTMLの<pre>要素のスタイルを次のように定義します。

実例

<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

他のクラス

次の表に、Bootstrap4のその他のクラスの例を提供します。

クラス名説明実例
.font-weight-bold太字コードの実行結果を確認する
.font-weight-normal通常のテキストコードの実行結果を確認する
.font-weight-lightより細かいテキストコードの実行結果を確認する
.font-italic斜体コードの実行結果を確認する
.lead段落をより強調するコードの実行結果を確認する
.small小さいテキストを指定する(親要素の85%)コードの実行結果を確認する
.text-left左揃えコードの実行結果を確認する
.text-center中央揃えコードの実行結果を確認する
.text-right右揃えコードの実行結果を確認する
.text-justifyテキストの上下中央揃えを設定し、画面を超える段落の部分が自動的に折り返されるコードの実行結果を確認する
.text-nowrap画面を超える段落の部分は折り返されないコードの実行結果を確認する
.text-lowercaseテキストを小文字に設定するコードの実行結果を確認する
.text-uppercaseテキストを大文字に設定するコードの実行結果を確認する
.text-capitalize単語の最初の文字を大文字にするコードの実行結果を確認する
.initialism<abbr>要素に表示されるテキストは小さいフォントで表示され、小文字は大文字に変換できるコードの実行結果を確認する
.list-unstyledデフォルトのリストスタイルを削除し、リスト項目を左揃えにする(<ul>と<ol>)。このクラスは、直接の子リストアイテムにのみ適用される(ネストされたリストアイテムを削除する必要がある場合は、ネストされたリストでこのスタイルを使用する必要がある) やってみるコードの実行結果を確認する
.list-inlineすべてのリストアイテムを同じ行に配置するコードの実行結果を確認する
.pre-scrollable<pre>要素をスクロール可能にする。コードブロック領域の最大高さは340pxである。この高さを超えると、Y軸にスクロールバーが表示される。コードの実行結果を確認する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です