本文中に使える体裁(タイポグラフィ)BootstrapCSSフレームワークのBootstrapには文章を装飾するためのスタイルが用意されています。今回は、本文中の体裁を装飾するのに使えるスタイルをいくつかご紹介します。BootstrapはTwitter社が開発したCSSフレームワークです。Bootstrapは誰でも簡単にWebサイトに導入することができます。Bootstrapを導入する方法については、以下の記事を参照してください。両端揃え(均等割付)インライン要素のスタイルBootstrapでは、HTML5の一般的なインライン要素でスタイリングがされています。「mark」要素を利用するとテキストを強調表示することができます。「<mark>mark</mark>」タグで<mark>強調表示</mark>されたテキストを表します。#ccc;">「<mark>mark</mark>」タグで<mark>強調表示</mark>されたテキストを表します。</p>ブラウザーでの表示テキストの強調表示は「mark」クラスで指定することもできます。class="mark">強調表示</span>されたテキストを表します。class="mark">強調表示</span>されたテキストを表します。削除されたテキスト「del」要素を利用すると削除されたテキストを表示することができます。<del>「del」タグで削除されたテキストを表します。#ccc;"><del>「del」タグで削除されたテキストを表します。現在は正確でない(取り消された)テキスト「s」要素を利用すると現在は正確でない(取り消された)テキストを表示することができます。<s>「s」タグで現在は正確でない(取り消された)テキストを表します。#ccc;"><s>「s」タグで現在は正確でない(取り消された)テキストを表します。追加(挿入)されたテキスト「ins」要素を利用すると追加(挿入)されたテキストを表示することができます。<ins>「ins」タグで追加(挿入)されたテキスト表します。#ccc;"><ins>「ins」タグで追加(挿入)されたテキスト表します。下線付き(アンダーライン)テキスト「u」要素を利用すると下線(アンダーライン)付きのテキストを表示することができます。<u>「u」タグで下線(アンダーライン)付きのテキスト表します。#ccc;"><u>「u」タグで下線(アンダーライン)付きのテキスト表します。小さい文字(細字)のテキスト「small」要素を利用すると小さい文字(細字)のテキストを表示することができます。「<small>small</small>」タグで<small>小さい文字(細字)</small>のテキスト表します。#ccc;">「<small>small</small>」タグで<small>小さい文字(細字)</small>のテキスト表します。小さい文字(細字)のテキストは「small」クラスで指定することもできます。class="small">小さい文字(細字)</span>のテキスト表します。class="small">小さい文字(細字)</span>のテキスト表します。太字のテキスト「strong」要素を利用すると太字のテキストを表示することができます。<strong>「strong」タグで太字のテキスト表します。#ccc;"><strong>「strong」タグで太字のテキスト表します。「b」要素を利用することで太字のテキストを表示することもできます。<b>「b」タグで太字のテキスト表します。#ccc;"><b>「b」タグで太字のテキスト表します。斜体(Italic体)のテキスト「em」要素を利用すると斜体(Italic体)のテキストを表示することができます。<em>「em」タグで斜体(Italic体)のテキスト表します。#ccc;"><em>「em」タグで斜体(Italic体)のテキスト表します。「i」要素を利用することで斜体(Italic体)のテキストを表示することもできます。<i>「i」タグで斜体(Italic体)のテキスト表します。#ccc;"><i>「i」タグで斜体(Italic体)のテキスト表します。(Lead)「lead」クラスを利用することで、文章を目立たせることができます。...それは既に形骸である。それら軟弱の集団が...。#ccc;"><p>...それは既に形骸である。class="lead">敢えて言おう、カスであると!!</p><p>それら軟弱の集団が...。(Abbreviations)「abbr」要素を利用すると、省略された文字として表示することができます。title属性に省略前の文字列を設定することで、マウスカーソルを合わせた時(ホバー時)に表示されます。「initialism」クラスを指定することでフォントサイズ(font-size)を少し小さくすることができます。フォントのサイズはデフォルトで90%になります。(Blockquotes)「blockquote」要素に「blockquote」クラスを指定すると、外部ソースからの引用・転載・抜粋を表すセクションを表示することができます。「blockquote」要素内に引用元(出典)を記載する場合は、「footer」要素を配置し、「blockquote-footer」クラスを指定します。「footer」要素内には「cite」要素を配置し、title属性に引用元の文書のタイトル等を記載します。「cite」要素内のテキストは半角文字であれば斜体になります。かなや漢字を指定する場合は斜体にならないので、かっこ(「」)などで括ると見やすくなります。<ul><li>~</li>...</ul>)は、デフォルトで以下のようにスタイリングされています。(Unstyled)「ol」要素、または「ul」要素に「list-unstyled」クラスを指定することで、リストの箇条書きの数字や記号、左マージンを削除できます。(Inline)「ul」要素に「list-inline」クラスを指定し、「li」要素に「list-inline-item」クラスを指定することで、リストの項目をインライン(1行)で表示することができます。箇条書きの数字や記号がなくなり、適度なマージン(余白)を確保して、リストの項目が並べられます。定義・用語を記述するリストの項目名と内容・説明を水平方向に配置できます。class="col-sm-9">定義の説明です。説明を複数行にすると、このように表示されます。class="col-sm-9">「dt」要素に「text-truncate」クラスを指定すると、溢れる文字を切り捨てて「...」を表示します。class="col-sm-8">ネストされた(入れ子になった)定義・用語のリストです。class="col-sm-9">定義の説明です。class="col-sm-9"><p>用語の説明です。<br>説明を複数行にすると、このように表示されます。class="col-sm-9">「dt」要素に「text-truncate」クラスを指定すると、溢れる文字を切り捨てて「...」を表示します。class="col-sm-8">ネストされた(入れ子になった)定義・用語のリストです。</dd></dl></dd></dl></div>ブラウザーでの表示Bootstrapのグリッドシステムの詳細については、以下の記事を参照してください。(Alignment)Bootstrapにはテキストを配置する方法を指定するクラスが用意されています。左揃えテキストを左揃えにするには「text-left」クラスを指定します。class="text-left">テキストを左に揃えます。class="text-left">テキストを左に揃えます。中央揃えテキストを中央揃えにするには「text-center」クラスを指定します。class="text-center">テキストを中央に揃えます。class="text-center">テキストを中央に揃えます。右揃えテキストを右揃えにするには「text-right」クラスを指定します。class="text-right">テキストを右に揃えます。class="text-right">テキストを右に揃えます。両端揃え(均等割付)テキストを両端揃え(均等割付)にするには「text-justify」クラスを指定します。スタイルシート関連記事Bootstrapを導入(インストール・CDNから参照)するTwitter社が開発したCSSフレームワークのBootstrapを使うと、通常はCSSを自分で書かなければならないスタイルも簡単に実現でき...記事を読むBootstrapのテーブル(Table)Bootstrapでテーブル(Table)を装飾する方法を紹介します。h1~h6)CSSフレームワークのBootstrapを使った見出し(ヘッダー)のスタイルを紹介します。