美しい文章を演出する HTMLタグ（パラグラフ）

　

今回はテキスト（文章）を美しく装飾するHTMLタグ（＜p＞＜/p＞）をご紹介します。

”パラグラフ”という言葉を聞いたことがありますか？

あえて日本語に訳すと段落になりますが、本来の意味は、海外のタイプライター文化で発展した文章の見やすさを考えた”文章のまとまり”のことらしいです。

例えば次の文章を見てください。（参考の文章なので色をつけます）

　

　

ごちゃごちゃしていて見にくいですよね。

では、次の例はどうですか？

　

　

役割や意味などでゆるくまとめて改行をしています。どうですか、かなり見やすくなったと思いませんか？

このまとまりのことを”パラグラフ(Paragraph)”と言います。

HTMLにはこのパラグラフを指示するタグ（<p></p>）が用意されています。

先ほどの文章をHTMLで見ると以下の様に記述されています。

　

<p>ホームページなどの汎用性は仕様やプロトコルというルールで保証されるべきものです。</p>
<p>HTML5とかCSS3などがそうです。『こういう風にしようね～』といってWHATWGの様な標準化団体（民間です）などが制定します。他にJavaScriptなどもそうです。</p>
<p>しかし、実際のブラウザはこれらの決まりを正確に守る法的縛りはありません。準拠すれば良いだけです。各会社の戦略や思惑もありますから意図的に解釈を変えたりします。（もしかしたら本当にバグかもしれませんが）</p>
<p>つまりメーカーの設計都合が標準化よりも優先される場合があるということです。</p>

　

パラグラフにしたい文章のかたまりを<p></p>で挟むだけです。

通常、<p></p>はCSSの初期設定で装飾が設定されています。

p {
　margin-top: 0.5em;
　margin-right: 0;
　margin-bottom: 1.2em;
　margin-left: 0;
　line-height: 1.3em;
}

上記CSSは、<p></p>で囲まれた部分の上部余白は0.5em、下部余白は1.2em、文字行空間の高さは1.3emという意味です。（emは文字サイズを基準（=1）とする単位です）

地味なパラグラフですが、これを使用しているかどうかでそのサイトの見栄えが決定的に異なるぐらい重要な装飾です。

　

お試しください。

　

TAテーマ001はこのパラグラフ装飾をブラウザから設定できます。

もちろんCSSを記述する必要もありません。

更に、メインコンテンツ、サイドバーなど、部分によってパラグラフの装飾を変えることができます。

そして、それぞれがレスポンシブWebデザイン時の別設定が可能です。

詳しくはこちらをご覧ください。