見出しの重要性
今回は、見出しのデザインの例をいくつかご紹介します!
見出しは、必ずといって良いほど、ホームページ内で用いられます。
SEO(検索エンジン最適化)の観点でも、見出しにキーワードを入れておくことで検索にヒットしやすくなる効果があるため、ほぼ確実に用いると言っても過言ではないでしょう。
今回は比較的シンプルな見出しをピックアップしてみました。
早速見ていきましょう!
見出しのデザイン
- 線をつけた見出し
- 背景色をつけた見出し
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で背景色を設定できます。
コードもシンプルなので、導入も簡単ということもおすすめポイントです。
まとめ
- 線をつけた見出し
- 背景色をつけた見出し
の2つをご紹介しました。
次回は、もう少し凝ったデザインの見出しをご紹介します!