コピペ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で出来ることって、昔に比べたらかなり増えてますよね。他にももっといろいろ出来そう。気が向いたら追加していくかもです!