Bootstrap 本文中に使える体裁(タイポグラフィ)

CSSフレームワークのBootstrapには文章を装飾するためのスタイルが用意されています。
今回は、本文中の体裁を装飾するのに使えるスタイルをいくつかご紹介します。

BootstrapはTwitter社が開発したCSSフレームワークです。

Bootstrapは誰でも簡単にWebサイトに導入することができます。
Bootstrapを導入する方法については、以下の記事を参照してください。

Bootstrapを導入(インストール・CDNから参照)する
Twitter社が開発したCSSフレームワークのBootstrapを使うと、通常はCSSを自分で書かなければならないスタイルも簡単に実現でき...

インライン要素のスタイル

Bootstrapでは、HTML5の一般的なインライン要素でスタイリングがされています。

テキストの強調表示

「mark」要素を利用するとテキストを強調表示することができます。

ブラウザーでの表示

Bootstrap markタグ

テキストの強調表示は「mark」クラスで指定することもできます。

ブラウザーでの表示

Bootstrap markクラス

削除されたテキスト

「del」要素を利用すると削除されたテキストを表示することができます。

ブラウザーでの表示

Bootstrap delタグ

現在は正確でない(取り消された)テキスト

「s」要素を利用すると現在は正確でない(取り消された)テキストを表示することができます。

ブラウザーでの表示

Bootstrap sタグ

追加(挿入)されたテキスト

「ins」要素を利用すると追加(挿入)されたテキストを表示することができます。

ブラウザーでの表示

Bootstrap insタグ

下線付き(アンダーライン)テキスト

「u」要素を利用すると下線(アンダーライン)付きのテキストを表示することができます。

ブラウザーでの表示

Bootstrap uタグ

小さい文字(細字)のテキスト

「small」要素を利用すると小さい文字(細字)のテキストを表示することができます。

ブラウザーでの表示

Bootstrap smallタグ

小さい文字(細字)のテキストは「small」クラスで指定することもできます。

ブラウザーでの表示

Bootstrap smallクラス

太字のテキスト

「strong」要素を利用すると太字のテキストを表示することができます。

ブラウザーでの表示

Bootstrap strongタグ

「b」要素を利用することで太字のテキストを表示することもできます。

ブラウザーでの表示

Bootstrap bタグ

斜体(Italic体)のテキスト

「em」要素を利用すると斜体(Italic体)のテキストを表示することができます。

ブラウザーでの表示

Bootstrap emタグ

「i」要素を利用することで斜体(Italic体)のテキストを表示することもできます。

ブラウザーでの表示

Bootstrap iタグ

文章を目立たせる (Lead)

「lead」クラスを利用することで、文章を目立たせることができます。

ブラウザーでの表示

Bootstrap leadクラス

文字の省略 (Abbreviations)

「abbr」要素を利用すると、省略された文字として表示することができます。title属性に省略前の文字列を設定することで、マウスカーソルを合わせた時(ホバー時)に表示されます。

ブラウザーでの表示

Bootstrap abbrタグ

「initialism」クラスを指定することでフォントサイズ(font-size)を少し小さくすることができます。
フォントのサイズはデフォルトで90%になります。

ブラウザーでの表示

Bootstrap abbrタグ initialismクラス

引用・転載・抜粋 (Blockquotes)

「blockquote」要素に「blockquote」クラスを指定すると、外部ソースからの引用・転載・抜粋を表すセクションを表示することができます。

ブラウザーでの表示

Bootstrap blockquoteクラス

「blockquote」要素内に引用元(出典)を記載する場合は、「footer」要素を配置し、「blockquote-footer」クラスを指定します。「footer」要素内には「cite」要素を配置し、title属性に引用元の文書のタイトル等を記載します。

ブラウザーでの表示

Bootstrap blockquote-footerクラス cite要素

「cite」要素内のテキストは半角文字であれば斜体になります。かなや漢字を指定する場合は斜体にならないので、かっこ(「」)などで括ると見やすくなります。

<footer class=”blockquote-footer”>著者名 <cite>「著書名」</cite></footer>

リスト (Ordered list Unordered list)

Bootstrapでリスト要素(<ol><li>~</li>…</ol>, <ul><li>~</li>…</ul>)は、デフォルトで以下のようにスタイリングされています。

ブラウザーでの表示

Bootstrap ol ul リストのデフォルトスタイル

スタイルなし (Unstyled)

「ol」要素、または「ul」要素に「list-unstyled」クラスを指定することで、リストの箇条書きの数字や記号、左マージンを削除できます。

ブラウザーでの表示

Bootstrap ol ul リストのスタイルなし

インライン (Inline)

「ul」要素に「list-inline」クラスを指定し、「li」要素に「list-inline-item」クラスを指定することで、リストの項目をインライン(1行)で表示することができます。

ブラウザーでの表示

Bootstrap ul リストのインライン化スタイル

箇条書きの数字や記号がなくなり、適度なマージン(余白)を確保して、リストの項目が並べられます。

グリッドスタイルのリスト (Description list)

グリッドシステムを使用して, 定義・用語を記述するリストの項目名と内容・説明を水平方向に配置できます。

ブラウザーでの表示

Bootstrap グリッドシステムで水平配置した dl 説明記述リスト

Bootstrapのグリッドシステムの詳細については、以下の記事を参照してください。

Bootstrapのグリッドシステム(Grid system)
Bootstrapのグリッドシステム(Grid system)を使って、スマートフォンやタブレット、PCなどのデバイスに応じてレイアウトを変...

テキスト配置 (Alignment)

Bootstrapにはテキストを配置する方法を指定するクラスが用意されています。

左揃え

テキストを左揃えにするには「text-left」クラスを指定します。

ブラウザーでの表示

Bootstrap テキストの配置 左揃え

中央揃え

テキストを中央揃えにするには「text-center」クラスを指定します。

ブラウザーでの表示

Bootstrap テキストの配置 中央揃え

右揃え

テキストを右揃えにするには「text-right」クラスを指定します。

ブラウザーでの表示

Bootstrap テキストの配置 右揃え

両端揃え(均等割付)

テキストを両端揃え(均等割付)にするには「text-justify」クラスを指定します。

ブラウザーでの表示

Bootstrap テキストの配置 両端揃え(均等割付)