今回も、見出しのデザインの例をいくつかご紹介します！

前回は、見出しの中でも特にシンプルなものを紹介したので、今回はもう少し凝ったデザインのものをピックアップしてみました。

早速見ていきましょう！

見出しのデザイン

1. グラデーションをつけた見出し
2. 吹き出しのような見出し
3. サブキャッチコピー付き見出し

1. グラデーションをつけた見出し

背景色をつけるパターンは前回ご紹介しました。

グラデーションをつけてみると、デザイン性がアップします。

背景色として使う以外にも、下線にグラデーションを使うのもアリです。

グラデーションを使う場合、鮮やかな色合いを選択するのがポイントです。

色合いによってはこんな表現も可能です。

メタリックな印象を受けませんか？

このように、グラデーションはデザインの幅を広くします。

2. 吹き出しのような見出し

こちらは吹き出し風の見出しです。

人物やキャラクターの画像やアイコンと合わせて使うと、まるでそのキャラクターが話しているかのように見せることができます。

他にも、下のような吹き出し風の見出しもできます。

こちらはキャラクターのモノローグにピッタリですね！

3. サブキャッチコピー付き見出し

こちらはサブキャッチコピーをつけた見出しです。

見出し内で横並びにするだけでなく、このような見せ方もできます。

キャッチコピー部分に日本語、サブキャッチコピー部分に英語のように使うことが多いように思います。

サブキャッチコピーを入れている左上の箇所には、チェックマークやグットアイコンなどのアイコンを入れる場合もあります。

どうやって実装しているの？

今回は、「2. 吹き出しのような見出し」をご紹介します。

/* HTML */
<div class="square-comment-box">
 TITLE
</div>

/* CSS */
.square-comment-box{
  display: inline-block;
  position: relative;
  padding: 20px;
  border: 2px solid #d8d8d8;
  border-radius: 5px;
  margin: 30px 0;
  background-color: #F9FAFB;
  color: #2E2B2B;
  font-size: 18px;
}

.square-comment-box::before{
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}

.square-comment-box::after{
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

before、afterの疑似要素を用いて、吹き出し部分の三角形を表現しています。

positionで位置調整をしています。

まとめ

1. グラデーションをつけた見出し
2. 吹き出しのような見出し
3. サブキャッチコピー付き見出し

の3つをご紹介しました。

次回は、FontAwesomeをご紹介します！