見出しと本文

見出しモジュールと本文の段落モジュールの作成

記事タイトル同様、基本的なモジュール

見出しと段落を表示するためのモジュール

記事の見出しと本文（段落）のテキストを表示するモジュール

見出しは h1 ～ h6 を、本文は P を用いる

記事タイトルなどページ全体に付けるタイトル（見出し）に h1 を使っている場合は、h2 以下を使う

見出しやテキスト段落に適用する CSS では、上下マージン、フォントサイズ、行間などを設定する

デザインによっては、テキスト色、背景色、ボーダーラインを設定する

サンプルでは見出しの上下にボーダーラインを轢いている

テキスト主体のページでは、一般的に見出しの h1 ～ h6 や p などが連続する

見出しと段落の間、段落と段落の間には一定のスペース（マージン）を空けたいが、最初に出てくる要素の上にはスペースを空けたくないという場合がある

次のような CSS を追加する

ポストコンテンツ内の 1つ目の要素の上マージンを 0 にする

.post-contents > *:first-chtild {
margin-top: 0;
}

このスタイルによって、<div class="post-contents"> ～ </div>に含まれる直接の雇用そのうち、最初に出てくる要素のマージンが 0 になる

出てくる子要素がどのようなものであっても、上マージンを 0 に出来るので、どのような記事でもレイアウトが保たれる

:first-child 疑似クラスは、これより前に書かれたセレクタ、.pst-contents > * で選択される要素のうち、最初の要素だけを選択してスタイルを適用する

text-align はテキストの行揃えを設定するプロパティ

text-align: 行揃えのキーワード

値に設定出来るキーワード