HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。

そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。

飾り付きの見出し

擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。

同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。

beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。

ボーダーがある見出し

キャプション付きの見出しです。シンプルなので使いやすいですが、レスポンシブに対応させるのはやや面倒そうです。

角丸にしただけのシンプルな見出しです。

よくあるリボンのような見出しパターンです。transformで斜めにしたbefore、afterを組み合わせることでリボンのような形状にしています。

文字がある部分だけ色がついているシンプルで汎用性が高いボーダーです。beforeとafterをうまく使っています。

これもシンプルなボーダーの見出しです。見出しには上下のボーダーだけ指定し、beforeに左右の見出しを指定します。

少し変わった見出し

ボーダーが複数ある印象的な見出しです。やや使いどころは限られていると思います。

キャプションとタイトルがセットになった見出しです。例ではキャプションとタイトルにしていますが、使い方によっては応用がききそうなデザインです。

シンプルな白抜き文字の見出しに、斜めの線を追加しています。beforeをafterを変更すれば、ほかのデザインに応用することができます。

svg要素とtext要素を使った見出しです。svg要素を使うと見出しの表現がかなり広がるので、モダンブラウザのみを対象すると場合は導入を検討しても良いかもしれません。

一見普通の見出しですが、CSSのcounter()を使い自動で番号を振っています。JavaScriptを使う必要がなく、簡単に書けるのが良いです。

CSSだけでつくるボーダー背景の見出しです。linear-gradient()でも可能ですが、repeating-linear-gradient()を使うとより簡単に記述できます。

まとめ

今回は、実用性が高いものやCSSの新しい要素を使った見出しを紹介しました。CSSには新しい要素が次々に追加されているので、CSSだけで実装できるデザインの幅もさらに増えていきそうです。

今回紹介した見出し一覧