コピペでOKなCSSデザインレシピ集 Vol.1｜見出し編

コピペで使えるCSS見出しデザイン10選

CSSデザインレシピ集では、CodePenからHTMLとCSSをコピーして使えるデザインを集めました。

見出しのデザインは、サンプルのHTMLを参考に、好みに合わせてh2やh3に変更し、CSSを加えるだけで変更できます。通常のHTMLサイトとWordPressのどちらでも使えるので、サイトの作り方に合わせて別のコードに置き換えてみてください。

見出しデザインの使い方

使いたいデザインが見つかったら、見本のHTMLから見出しタグを、CSSから見出しに使われている部分をコピーします。見出しへ付いているクラス名と、CSSのクラス名が同じになるように使います。

見本でh1が使われている場合は、ページ内の階層に合わせてh2やh3へ変更できます。CSSにもタグ名が書かれている場合は、そちらも同じタグ名へ変更します。

各デザインはCodePenで表示しています。最初に完成した見た目が表示され、HTMLやCSSへ切り替えると実際のコードを確認できます。

サイトにもともと見出しの背景色や余白が設定されている場合は、見本と少し違う表示になることがあります。CSSを追加したあとは、実際のページで前後の文章との間隔も確認しておくと安心です。

CSS見出しデザイン10選

1. マーカーのような下線を付けた見出し

文字の下へ太めの色を重ねた、マーカーのような見出しです。背景全体を塗らないため、文章になじませながら見出しへ色を加えられます。

CSSのlightgreyを好みの色に変えると、マーカーの色が変わります。

2. 左下に短い線を置いた見出し

見出しの左下だけへ短い線を置いたデザインです。横幅いっぱいに線を引かないため、軽い装飾で本文との区切りを付けられます。

CSSのh2:afterの中にある#898989を変えると線の色が、borderの2pxの数字を変えると、線の太さが変わります。

3. グラデーションの下線を付けた見出し

見出しの下へ、複数の色がつながるグラデーションの線を引いています。通常の下線へ少し色を加えたい場合に使いやすい形です。

CSSのh1のrgb(0,143,104), rgb(250,224,66)を変えるとグラデーションの色が、border-widthの2pxの数字を変えると、線の太さが変わります。

4. ストライプの下線を付けた見出し

見出しの下へ斜めのストライプを表示しています。画像は使わず、CSSのグラデーションだけで模様を作っています。

CSSの#C6E6FB（4箇所）を変えると、ストライプの色が変わります。

5. 左右に線を伸ばした見出し

見出しを中央へ置き、その左右へ線を伸ばしたデザインです。ページ内の大きな区切りや、まとめ部分の見出しにも合います。

CSSのh1:before, h1:afterの#000を変えると、線の色が変わります。

6. 斜めのラベルを重ねた見出し

見出しの左上へ小さなラベルを重ねています。HTMLへ別の要素を追加せず、ラベル部分もCSSから表示されています。

7. 左側にひし形を並べた見出し

見出しの左側へ、色の違うひし形を2つ重ねています。見出しタグは1つだけで、飾りはCSSの疑似要素から追加されています。

8. 下線の中央にひし形を置いた見出し

見出しの下へ細い線を引き、その中央に小さなひし形を置いています。通常の下線よりも少し上品な印象を加えられます。

9. 角に飾りを付けた見出し

背景色を付けた見出しの角へ、扇形のような飾りを重ねています。線だけの見出しより存在感があり、章の切り替わりをはっきり見せたい場合に合います。

10. リボンのような見出し

見出しの左右を折り返し、リボンのように見せたデザインです。今回の中ではCSSが少し長めですが、JavaScriptや画像を使わずに表示できます。

まとめ

見出しは、下線や背景、疑似要素を加えるだけでも印象を変えられます。最初はマーカー風や短い下線のようなCSSが短いデザインから試すと、色や太さも調整しやすいです。

通常のHTMLサイトでもWordPressでも使い方は同じなので、サイトに合うデザインが見つかったら、必要なHTMLとCSSだけをコピーして使えます。