8.3 記事の見出しをデザインする

戻る

記事内に見出しを追加して文章を読みやすくします。見出しの左側には線が引かれるデザインにします。

見出しを追加する

記事の本文に見出しを追加します。ここでは<h2>を使って「製品仕様」と「余裕あるストレージ 動画編集もらくらく」の２つの見出しと、それに合わせた文章を追加しています。

<article>～</article> の範囲内に追加してください。

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

<div class="info">
<time><i class="fa fa-pencil"></i></time>
</div>

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

<h2>製品仕様</h2>

<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>

<h2>余裕あるストレージ 動画編集もらくらく</h2>

<p>本製品の特徴として、大容量ストレージの搭載が挙げられます。搭載容量はなんと1TB。デスクトップパソコンなどとほぼ互角の搭載容量となっています。「それほどの容量が必要なのか？」という疑問は当然あると思います。確かに管理人が普段使用している旧型のiBoard Pro(第3世代)でも、ウェブを閲覧したり簡単な作業をするぐらいであれば十分な容量です。しかし動画編集を行う際は10分程度の映像で30GBほどの容量を消費するものも多く、今まで常に容量不足を感じていました。新しくなった第4世代iBoard Proではこの問題が解消されており、個人的にはとても嬉しい変更点です。</p>

</article>

見出しと記事が追加されました。

見出しの上の余白サイズを大きくする

<h2>で作成した見出しの上下には、ブラウザによって自動的に約20ピクセル程度の余白が設けられます。見出しの上の余白を大きく取りたいので、<article> 内の <h2> の margin-top を「40px」に設定します。

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

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

article img { width: 100%;
              height: auto; }

article h2 { margin-top: 40px; }

/* 投稿日 */

見出し上部の余白が大きくなりました。

見出しの左に線を引く

見出しの左端には罫線を引いてバーを付けたようなデザインにします。

<h2>の border-left で左側に太さ10ピクセルで青緑色の罫線を表示するようにします。また、罫線と文字の間には padding-left で10ピクセル分の余白を入れます。

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

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

article img { width: 100%;
              height: auto; }

article h2 {
   margin-top: 40px;
   border-left: solid 10px #77bbcc;
   padding-left:10px; }

/* 投稿日 */

見出しの左側に線が引けました。

見出しを細字にする

<h2>で作成した見出しは標準で太字になります。細字のデザインにしたいので、<h2>の font-weight を「normal」に設定します。

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

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

article img { width: 100%;
              height: auto; }

article h2 {
  margin-top: 40px;
  border-left: solid 10px #77bbcc;
  padding-left:10px;
  font-weight: normal; }

/* 投稿日 */

見出しが細字になりました。