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

ページ内には広告が含まれます広告ポリシー

CSSデザインレシピ集 Vol.1では、HTMLとCSSをコピーして使える見出しデザインを紹介しています。通常のHTMLサイトとWordPressのどちらでも使える、シンプルで取り入れやすい、おしゃれなデザインを集めました。

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

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

見出しのデザインは、サンプルのHTMLを参考に、ページ内の階層に合わせてh1をh2やh3へ変更し、CSS側のタグ名も同じように変更して使います。通常のHTMLサイトとWordPressのどちらでも使えるので、サイトの作り方に合わせて取り入れてください。

見出しデザインの使い方

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

各デザインはCodePenで表示しています。HTMLとCSSをクリックすると、コードが表示されます。

CodePenでSCSSやLessを通常のCSSへ変換して表示する手順 — SCSS・Lessを通常のCSSへ変換する手順

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

CSS見出しデザイン

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

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

See the Pen Fit-content by @shadeed on CodePen.

h1のbox-shadow: inset 0 -6px 0 0 lightgreyで、lightgreyを好みの色に変えるとマーカーの色が、-6pxを変えるとマーカーの太さが変わります。

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

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

See the Pen Shorten the length of Border-Bottom with CSS by @GhHaider on CodePen.

h2:afterのborder: #898989の色を変えると線の色が、2pxの値を変えると、線の太さが変わります。

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

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

See the Pen heading-colored-underline by @isamrish on CodePen.

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

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

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

See the Pen h1 striped by @ken81 on CodePen.

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

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

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

See the Pen Border Left Right Text 1 | CSS by @intotheprogram on CodePen.

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

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

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

See the Pen 【CSS】見出しデザイン0005 by @rekid on CodePen.

h2:beforeのcontent: "TOPICS"の値を変えると文字の内容が、font-size: 10pxを変えると文字サイズが、background-color: #dfdを変えるとTOPICSの背景色が、colorとbox-shadowにある#585を変えると、文字の色と下線（影）の色が変わります。

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

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

See the Pen 【CSS】見出しデザイン0008 by @rekid on CodePen.

h2:before, h2:afterのcolor: #555を変えると濃い方のひし形の色が、h2:afterのcolor: #aaaを変えると、薄い方の菱形の色が変わります。

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

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

See the Pen Diamond Header Underline by @vivibug on CodePen.

h1.special:beforeのbackground-color: #DFCEB9を変えると中心のひし形の色が、h1.special:afterのbackground内にある#DFCEB9（4箇所）を変えると線の色が変わります。0%と45%は左側、55%と100%は右側の線に対応し、それぞれの2色を変えるとグラデーションがかかります。

角に飾りを付けた見出し

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

See the Pen 角に扇型の飾りがある見出し by @hrshishym on CodePen.

.titleのbox-shadow: red（2箇所）を変えると線の色が、.title::before, .title:afterのbackground-color redを変えると角の飾りの色が、outline: redを変えると、飾りと隣り合う縁の色が変わります。

リボンのような見出し

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

See the Pen ribbon heading by @k1nu3 on CodePen.

.ribbon-headingのbackground: #eee5d0を変えると背景色の色が、.ribbon-heading:before, .ribbon-heading:afterのborder: #e0d8c3を変えると奥のリボンの色が、.ribbon-text:before,.ribbon-text:after, .ribbon-text:before, .ribbon-text:afterのborder: #948e81を変えるとリボン裏側の色が変わります。