こんにちは！やましたです。
今回はブログでよく見かける10の見出しデザインを紹介します。
簡単に実装できるので、ぜひ使ってみてください。
HTMLは次のようなものを使っています。
1 | <h1><span>シンス株式会社<span></h1> |
spanは必要ない場合もあるので適宜書き換えてください。
目次
下線付き
1 2 3 | h1{ border-bottom: solid 3px #000; } |
単純にborder-bottomで下線を引いているだけですが、シンプルで使い勝手の良い見出しデザインです。
角丸+背景付き
1 2 3 4 5 | h1 { padding: 10px 15px; background-color: #faf0e6; border-radius: 15px; } |
border-radiusで角丸を実現しています。border-radiusの値を大きくすることでもっと角が丸くなります。
下線（点線）+文字色
1 2 3 4 | h1{ color: #6594e0; border-bottom: dashed 2px #000; } |
見出しに加えた下線を破線にして文字色と異なる配色にしています。 ボーダーの種類もdotted（点線）、double（二重線）など色々ありますので試してみてください。
左側にボーダー + 下線
1 2 3 4 5 | h1 { padding: 4px 0 8px 12px; border-left: 7px solid #87cefa; border-bottom: 2px solid #87cefa; } |
ブログなどでよく見るパターンですね。下線を削除して左ボーダーのみの見出しもよく見ます。
吹き出し風
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | h1 { position: relative; padding: 0.6em; background: #e0edff; color:#444; } /* 三角形の部分 */ h1:after { position: absolute; content: ''; top: 100%; left: 40px; border: 20px solid transparent; border-top: 20px solid #e0edff; } |
下の三角形の部分をafterを使って再現しました。borderの太さを変えることで三角形の形を微調整することができます。
下線 + 最初の1文字だけ大きく
1 2 3 4 5 6 7 8 | h1{ border-bottom: 2px solid #d3d3d3; } /* 先頭の文字だけスタイリング */ h1:first-letter { margin-right: .1em; font-size: 1.5em; } |
見出しの先頭文字だけ大きくする手法をドロップキャップといいます。 最初の1文字目だけ大きくしたいときは疑似要素であるfirst-letterを使います。 上記のCSSでは、先頭の文字が1.5emのサイズになります。
2色組み合わせた下線
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | h1 { position: relative; padding-bottom: 5px; border-bottom: 3px solid #ccc; } h1::after { position: absolute; bottom: -3px; left: 0; z-index: 2; content: ''; width: 20%; height: 3px; background-color: #A4C6FF; } |
最近よく見る、下線を２色で配色するパターンです。 カラーの組み合わせや、線の幅を変えることバリエーションが楽しめそうです！
枠の上にサブタイトルを表示する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | h1{ position:relative; padding:20px 10px; font-size:20px; border:1px solid #FFA07A; } /* 枠の上に表示させるサブタイトルのスタイリング */ h1::after{ content: "チェックポイント"; position: absolute; top: -8px; left: 10px; background: #fff; font-size: 12px; color: #FFA07A; padding: 0 10px; } |
こちらもよく見るパターンですね！ サブタイトルの位置を調整するのが、枠で囲った感じを出すコツです。
ラインマーカー風
1 2 3 4 | h1 span { font-size:25px; background: linear-gradient(transparent 70%, #E6E6FA 50%); } |
グラデーションを利用してラインマーカーのような見た目を表現しています。 始点を透明（transparent）に70%の位置で、終わりは#E6E6FAを50%でグラデーションを表しました。
タグ風
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | h1 { border-bottom: 4px solid #b0c4de; } h1 span { color: #444; font-size: 15px; line-height: 20px; position: relative; background: #b0c4de; display: inline-block; padding: 10px; } h1 span:after { content: " "; position: absolute; top: 0; left: 100%; border-width: 0 15px 40px 0; border-style: solid; border-color: transparent; border-bottom-color: #b0c4de; } |
span要素をうまく使ってタグのように見せる見出しデザインです。複数行のときは見た目が崩れるので要注意です。
まとめ
今回は実用性が高く、CSSだけで実装できるものを10パターン紹介しました。
デザインを変えたいと思った時はコードに少し手を加えるだけなので、扱いやすいものばかりです。
制作の参考になれば嬉しいです。
以上、CSSにコピペするだけで使える見出しデザイン10選でした。
ネットショップ、採用向けサイト、ランディングページなど、様々なホームページ制作に対応いたします。
