BLOG

ブログ

技術者Kのデザイン道場
7.見出しのデザイン例
その1

見出しの重要性

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

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

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

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

早速見ていきましょう!

見出しのデザイン

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

タイトル

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

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

 
TITLE

タイトル

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

 
TITLE

タイトル

 
TITLE

タイトル

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

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

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

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

タイトル

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

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

 
TITLE

タイトル

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

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

 
TITLE

タイトル

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

今回は、「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つをご紹介しました。

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

お問い合わせはこちらから

お問い合わせ