とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > タイポグラフィ

ヘッダには <h1><h6> を使用します。.h1.h6 のクラスも使用できます。<small class="text-muted"> で副題をつけることもできます。

Sample

H1 Bootstrap入門 Secondary text

H2 Bootstrap入門 Secondary text

H3 Bootstrap入門 Secondary text

H4 Bootstrap入門 Secondary text

H5 Bootstrap入門 Secondary text
H6 Bootstrap入門 Secondary text
Code
<h1>H1 Bootstrap入門 <small class="text-muted">Secondary text</small></h1>
<h2>H2 Bootstrap入門 <small class="text-muted">Secondary text</small></h2>
<h3>H3 Bootstrap入門 <small class="text-muted">Secondary text</small></h3>
<h4>H4 Bootstrap入門 <small class="text-muted">Secondary text</small></h4>
<h5>H5 Bootstrap入門 <small class="text-muted">Secondary text</small></h5>
<h6>H6 Bootstrap入門 <small class="text-muted">Secondary text</small></h6>

表示用ヘッダ

通常のヘッダよりもさらに目立たせたいヘッダがあれば、.display-1.display-4 を用いてさらに大きな見出しとします。

Sample

Boorstrap入門 1

Boorstrap入門 2

Boorstrap入門 3

Boorstrap入門 4

Code
<h1 class="display-1">Boorstrap入門 1</h1>
<h1 class="display-2">Boorstrap入門 2</h1>
<h1 class="display-3">Boorstrap入門 3</h1>
<h1 class="display-4">Boorstrap入門 4</h1>

本文・リード

本文には <p> を用います。.lead は記事のリード(要旨)を示します。

Code

Bootstrap 入門へようこそ

Bootstrap は・・・

Sample
<p class="lead">Bootstrap 入門へようこそ</p>
<p>Bootstrap は・・・</p>

インラインテキスト要素

<mark>, <del>, <s>, <ins>, <u>, <small>, <strong>, <em> はそれぞれ下記の様に使用します。.mark, .small のクラスも利用可能です。

Sample

<mark> は 重要なテキスト を示します。

<del> は 削除されたテキスト を示します。

<s> は 取り消されたテキスト を示します。

<ins> は 挿入されたテキスト を示します。

<u> を指定すると 下線付き で表示されます。

<small> を指定すると 小さなテキスト で表示されます。

<strong> は 強調されたテキスト を示します。

<em> は emphasis(強調された) text を示します。

Code
<p><mark> は <mark>重要なテキスト</mark> を示します。</p>
<p><del> は <del>削除されたテキスト</del> を示します。</p>
<p><s> は <s>取り消されたテキスト</s> を示します。</p>
<p><ins> は <ins>挿入されたテキスト</ins> を示します。</p>
<p><u> を指定すると <u>下線付き</u> で表示されます。</p>
<p><small> を指定すると <small>小さなテキスト</small> で表示されます。</p>
<p><strong> は <strong>強調されたテキスト</strong> を示します。</p>
<p><em> は <em>emphasis(強調された) text</em> を示します。</p>

略語

<abbr> は略語を示します。title="..." を指定すると略語が点線の下線付きで表示され、マウスを乗せると説明が表示されます。.initialism を指定すると、略語が少し小さく表示されます。

Sample

HTML is ...

HTML is ...

Code
<p><abbr title="HyperText Markup Language">HTML</abbr> is ...</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is ...</p>

引用

<blockquote class="blockquote"> は引用を示します。<footer class="blockquote-footer"> は引用元、<cite> は引用元のタイトルを示します。

Sample

吾輩は猫である。名前はまだ無い。

夏目漱石 「吾輩は猫である」
Code
<blockquote class="blockquote">
  <p>吾輩は猫である。名前はまだ無い。</p>
  <footer class="blockquote-footer">夏目漱石 <cite>「吾輩は猫である」</cite></footer>
</blockquote>

アライメント

.text-left, .text-center, .text-right はそれぞれ、テキストを左寄せ、中央寄せ、左寄せします。

Sample

左寄せテキスト

中央寄せテキスト

右寄せテキスト

Code
<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>

両端揃え

.text-justify はテキストを両端揃えにします。

Sample

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Code
<p style="width:30rem; border:1px solid gray;">
  Bootstrap is an ...
</p>
<p class="text-justify" style="width:30rem; border:1px solid gray;">
  Bootstrap is an ...
</p>

改行禁止

.text-nowrap は改行を禁止します。

Sample

改行が禁止されたテキスト

Code
<p class="text-nowrap">改行が禁止されたテキスト</p>

リスト

リストに .list-unstyled を指定すると、先頭マークの無いリストを表示します。

Sample
  • HTML
  • CSS
  • JavaScript
Code
<ul class="list-unstyled">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

インラインリスト

.list-inline, .list-inline-item は横方向に並ぶインラインリストを表示します。

Sample
  • HTML
  • CSS
  • JavaScript
Code
<ul class="list-inline">
  <li class="list-inline-item">HTML</li>
  <li class="list-inline-item">CSS</li>
  <li class="list-inline-item">JavaScript</li>
</ul>

断ち切り

.text-trancated は横幅に収まりきらないテキストを ... で断ち切ります。

Sample
Truncated terms is truncated.
Code
<div style="width:100px; border:1px solid #ccc;">
  <pre class="text-truncate">Truncated terms is truncated.</pre>
</div>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/typography.html