初心者でもできる！HTMLで見出しにデザインをつける方法を解説

Webサイトにて見出しはSEO対策としても、ユーザーの利便性としても重要な役割を持っています。見出しはHTMLではhタグを用いれば利用することができます。デフォルトの設定ではh1が最も大きく、数字が大きくなるほど、文字サイズが小さくなります。

見出しはサイトのマップとなるので、できるだけ目立たせた方がいいと思います。目立たせるにはデフォルトの設定だけでは不十分です。そのため、見出しをデザインする方法を本記事で紹介します。

HTMLの見出しのデザインを作る方法

HTMLの見出しのデザインを作るためにはCSSを使います。CSSはWebページのスタイルを指定する言語です。CSSを使えば文字の色やサイズを指定することができます。また、ボーダーライン入れたり、余白を指定したり、図形を変形させることができます。

CSSの機能を活用すればさまざまな形の見出しを作れます。コードを工夫することでシンプルなものから複雑な形状ができます。例えば、吹き出しやドッグイヤーのような形状ができます。また、背景もグラデーションをつけることもできます。

サイトの雰囲気や背景色に合わせて、自分なりにデザインをしていくといいと思います。作り方の例を紹介していくので、ぜひ参考にして下さい。

HTMLの見出しデザイン例①線

下線を引く

下線を引くにはborder-bottomというプロパティを使います。ボーダーの形状や色は値で設定します。コードは以下の通りです。

<h2>見出し</h2>

h2 {
  border-bottom: 1px solid red;
}

上記のコードでは1pxの太さの赤色の線が「見出し」の下に引かれます。値の順番に決まりはありません。「線の太さ」「線の形状」「線の色」を指定することで下線が引かれます。

「線の形状」にはsolid以外にも、以下の値があります。

• double : 二重線
• dot : 点線
• dashed:破線
• groove:谷型
• ridge: 山形
• inset：凹型
• outset:凸型

左線を引く

見出しの種類として左側に線を引くデザインもよく見かけます。左線を引く方法はborder-leftというプロパティを使います。基本的にはborder-bottomと書き方は同じです。コードは以下の通りです。

<h2>見出し</h2>

h2 {
  border-left: 2px solid red;
}

左線は下線と同時に使うこともあります。その場合は、border-leftとborder-bottomを組み合わせて使うことで設定することが可能です。左線と下線を使う場合は左線を下線よりも太くすることでより見やすくなります。

全体を囲う

見出しを全部囲うこともあります。そのときはborderというプロパティを使います。基本的なコードはborder-bottomとborder-leftと同じです。しかし、全体を囲う場合はwidthを設定することをおすすめします。

なぜなら、見出しが短いと右側に無駄な余白ができてバランスが悪くなります。見出しの長さに合わせて、width設定をすると見やすくなると思います。

<h2>見出し</h2>

h2 {
  width: 25%;
  border: 3px solid blue;
}

2色の色をつける

線が単色では味気ないデザインと感じる場合は2色の線を作ることもできます。例えば、下線の半分が灰色で、残り半分が青色なんてデザインも可能です。線を使った見出しでは2色使ったデザインはよく見るので覚えておくことをおすすめします。

コードは少し複雑になりますが、CSSのスキルを示すのにももってこいです。

<h2>見出し</h2>

h2 {
  position: relative;
  border-bottom: 4px solid gray;
}
h2::after {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 50%;
  height: 4px;
  background-color: blue;
}

最初に全体に下線を引いて、最初の線をposition:relative;で基準決めをします。半分の長さの線を上から乗せる形になっています。

HTMLの見出しデザイン例②背景

背景の色を作る

背景色を作るにはbackground-colorを使います。背景色を設定する際に気をつけたいのが余白です。paddingで設定できます。余白をいい加減に設定するとバランスが悪くなり、見にくい見出しとなります。

<h2>見出し</h2>

h2 {
  padding: 2px 0 2px 3px;
  background-color: blue;
}

余白を設定する際は必ず、paddingにしてください。marginはbackground-colorの外側に余白を作ることになるので、見出しの背景に対しては効果がありません。

角を丸くする

ただ、background-colorだけでは隅が角ばるので丸くすることで柔らかな印象を持たせることができます。角を丸くする方法はborder-radiusを使います。border-radiusは枠線に丸みを持たせるプロパティです。

そのため、全体を囲う枠線に使うこともできます。枠線でも角がとがったっているよりも少し丸みがあったほうが印象がいいです。コードは以下の通りです。

<h2>見出し</h2>

h2 {
  padding: 2px 0 2px 3px;
  background-color: blue;
  border-radius: 2px;
}

HTMLの見出しデザイン③吹き出し

見出しを吹き出し形式にしたいことがあると思います。そんな時にはpositionを使って工夫します。コードは以下の通りです。

<h2>見出し</h2>

h2 {
  position: relative;
  padding: 2rem 2rem;
  color: white;
  border-radius: 5px;
  background: skyblue;
}

h2:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: skyblue transparent transparent transparent;
}

ポイントは「h2:after」の部分で三角形を作るためにborder-widthを作ることです。今までのようにborderのみで設定すると四角形になります。border-widthを使うことで三角形を作ることができます。

WordPressで作るならおすすめのプラグイン

もし、WebページをWordPressを使って作成するのであれば、プラグインを使えば簡単に見出しのデザインを変えることができます。プラグインはWordPressの機能を追加するためのプログラムです。プラグインを使えば、簡単にコードを書き換えることができます。

初心者でも簡単に見出しをデザインできるプラグインは以下の二つです。

• AddQuicktag
• Simple Custom CSS

上に挙げた二つはコーディングが分からなくても、ある程度のCSSのメソッドとプロパティが分かれば簡単にで在することができます。WordPressでWebページを作る際は活用してみてください。

まとめ

HTMLで見出しをデザインするにはCSSが必要です。CSSはメソッドの指定の仕方次第で複雑な形状や鮮やかな背景色をつけることができます。ユーザーの目を引くためにも工夫して作成することをおすすめします。

見出しは記事内の区切りになるのでわかりやすくすることが大切です。見出しがどこにあるかわからないと記事の内容が急に変わったり、話のつながりが見えなくなります。すると、ユーザーにとってストレスとなり、途中離脱される可能性も高くなると思います。

見出しにデザインをつけて、ユーザーにとって読みやすいデザインにすることがおすすめです。