見出しの重要性

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

見出しは、必ずといって良いほど、ホームページ内で用いられます。

SEO(検索エンジン最適化)の観点でも、見出しにキーワードを入れておくことで検索にヒットしやすくなる効果があるため、ほぼ確実に用いると言っても過言ではないでしょう。

今回は比較的シンプルな見出しをピックアップしてみました。

早速見ていきましょう！

見出しのデザイン

1. 線をつけた見出し
2. 背景色をつけた見出し

1. 線をつけた見出し

一番シンプルな見出しはこのようなタイプではないでしょうか。

下線以外にも、例えば、左側に線をつけてみたり、

二重線や点線にしてみたり、というパターンもあります。

左側と下側に線をつけて、それぞれの太さや色、線の種類を変えると

さらにバリエーションが出ますね！

線のつけかたによっては、どこからどこまでが見出しか分かりづらいので、そこは注意が必要です。

2. 背景色をつけた見出し

これも、一番シンプルな見出しのデザインの例の一つでしょう。

このブログでは、これに線をつけた下のようなデザインにしています。

見やすさとデザイン性を両立しており、ブログや新着情報など情報を発信するようなページには特におすすめです。

影をつけてみても良いかもしれません。

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

今回は、「2. 背景色をつけた見出し」から、線をつけた見出しをご紹介します。

/* HTML */
<div class="bg-sideline-box">
　<h5>TITLE</h5>
  <p>タイトル</p>
</div>

/* CSS */
.bg-sideline-box{
  display: inline-block;
  padding: 30px;
  border-left: 2px solid #DC000C;
  margin: 30px 0;
  background-color: #F9FAFB;
  color: #2E2B2B;
  font-size: 18px;
  overflow: hidden;
}

.bg-sideline-box > h5{
  float: left;
}

.bg-sideline-box > p{
  float: left;
  padding-left: 15px;
  color: #b5ac91;
  font-size: 14px;
}

border-leftで左側の線、background-colorで背景色を設定できます。

コードもシンプルなので、導入も簡単ということもおすすめポイントです。

まとめ

1. 線をつけた見出し
2. 背景色をつけた見出し

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

次回は、もう少し凝ったデザインの見出しをご紹介します！