コピペOK!CSSだけで作る見出しのタイトルデザイン集まとめ

ちょっとした見出しの装飾くらいなら、CSSだけで作ることが多いと思います。でも、CSSだけで出来ることには制限もあるし、なかなかシックリくるデザインを考えるのも大変ですよね。 というわけで、今回はCSSの見出し特集です。気に入ったものがあればコピペして使ってOK!ぜひ参考にしてみてくださいね。

まずはサンプル集をどうぞ

見出しデザインのサンプル集はこちら。まずはざっくりチェックしてみてください。 CSSだけで作る見出しデザイン集 それでは、それぞれのCSSコードを紹介していきます。

HTML

見出しのHTMLは以下のように「title」というclassを付けています。自分で使うときはh2やh3などにすることもあると思うので適宜変更して使いましょう。 では、装飾用のCSSを紹介していきます。

01:シンプルなボーダー見出し

まずはシンプルにボーダーを使った装飾。ブログやニュースサイトでよく使われますね。

02:二種類のボーダー見出し

こちらは二種類のボーダーの組み合わせ。これもよく見かけるデザインです。

03:左右ボーダー見出し

見出しの左右にボーダーを引いて装飾してもの。flex-boxとbefore,afterを使っています。

04:左右ボーダー見出し(二重線)

左右のボーダーを二重線にしたもの。装飾性がアップしますね。

05:カギカッコ付き見出し

cssだけでカギカッコをつけることも出来ます。キャッチコピーを入れたり、インタビュー記事の中の一言を際立たせたりするとき便利。

06:カギカッコ付き見出し(二重線)

borderのスタイルを変えれば二重線に。他にも破線や点線にも簡単にカスタマイズできますね。

07:カギカッコ付き見出し(2色)

borderを太くして2色にしました。アイコンっぽくて可愛いですね。なかなか使い勝手が良さそう。

08:シンプルな背景

背景をつけて見出しを目立たせました。

09:ストライプ柄の背景見出し

背景をストライプ柄にしています。cssだけで出来て色も自由にカスタマイズできます。

10:網掛け風背景の見出し

ストライプ柄の角度を変えて2つ重ねると網掛け風に。CSSだけで作れる背景って意外にいろいろあります。

11:ボーダーと影をつかった見出し

ボーダーや影を組み合わせて装飾しています。細かいテクニックの組み合わせでこんな見出しも作れちゃいます。

12:角丸ボーダーな見出し

シンプルに角丸をつけるだけでもデザイン性がアップします。片側だけを角丸にしてるのがポイント。

まとめ

CSSで出来ることって、昔に比べたらかなり増えてますよね。他にももっといろいろ出来そう。気が向いたら追加していくかもです!