とほほのBootstrap 4入門

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

タイポグラフィ

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

Sample

H1 Bootstrap入門 Secondary text

H2 Bootstrap入門 Secondary text

H3 Bootstrap入門 Secondary text

Code
<h1>H1 Bootstrap入門 <small>Secondary text</small></h1>
<h2>H2 Bootstrap入門 <small>Secondary text</small></h2>
<h3>H3 Bootstrap入門 <small>Secondary text</small></h3>

表示用ヘッダ

通常のヘッダよりもさらに目立たせたいヘッダがあれば、.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, .text-justify, .text-nowrap はそれぞれ、下記の様に指定します。

Sample

左寄せテキスト

中央寄せテキスト

右寄せテキスト

両端揃えテキスト

改行禁止テキスト

Sample
<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>
<p class="text-justify">両端揃えテキスト</p>
<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>

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