5.3 記事

戻る

記事のタイトルと本文を表示するパーツです。最近は大きめの文字サイズで、余白が多めのデザインが好まれているようです。

<article>
<h1>新型タブレット端末ついに発売</h1>

<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！ 早速レビューしていきたいと思います。</p>

<p>CPUはZMD社のZ99 8840を搭載。GEN4 CPUとしては最多のコア数である16コアを搭載。内蔵グラフィックチップとの接続インターフェイスはPCIe 3.0 x16からPCIe 4.0 x16になり、帯域幅が従来の最大128Gbpsから最大256Gbpsに向上しています。なお、M.2コネクタ位置がPCIe x16スロットに隣接する仕様になったため、本体の筐体サイズは202×96×13mmから270×122×15mmと大型化している点には注意が必要のようです。</p>
</article>

/* 記事 */
article h1 { margin-top: 0;
             margin-bottom: 20px;
             font-size:34px; }

article p { margin-top: 0;
            margin-bottom: 20px; }

完成例

上記のようにタイトルと記事の文章が表示されたら完成です。

HTML部分の解説

記事のタイトルは<h1>で表示し、本文は段落ごとに<p>でまとめて表示します。全体は<article>タグで１つのグループにまとめ、スタイルシートでデザインを指定しやすいようにしています。

CSS部分の解説

文字サイズの調整

<h1> と <p> で表示した文字は、ブラウザの標準設定では32ピクセルと16ピクセルの文字サイズになります。

ここではタイトルを一回り大きくするために <h1> の font-size を「34px」に設定しました。本文については16ピクセルの文字サイズのままで良いと感じたので、font-size は設定していません。

/* 記事 */
article h1 { font-size:34px; }

余白の調整

タイトルと本文の段落との間の余白は、<h1> と <p> の上下にブラウザが挿入する余白によって作られています。 しかし、<h1> や <p> の上に余白が入っていると、他のパーツと横並びにした時に、上端の位置を揃えるのが難しくなります。

そこで、上の余白を削除するために margin-top を「0」に設定しています。また、タイトルと本文の段落の間には余白がほしいので、margin-bottom を「20px」に設定して、空間を確保しました。

本文の段落 <p> についても同様に余白を設定しています。

/* 記事 */
article h1 { margin-top: 0;
             margin-bottom: 20px;
             font-size:34px; }

article p { margin-top: 0;
            margin-bottom: 20px; }

余白を調整しました。