見出しをお洒落に装飾するCSSを紹介

前回の記事がそこそこ評判良かったので、見出しのデザイン例もいくつか作ってみました。 前回の記事はこちら。 今回は見出しのデザイン例を11通りほど作ってみました。
リンクテキストと違い、見出し部分は割とガッツリ装飾しても問題ありません。むしろ少し目立ち過ぎなくらいのほうが、読者に「ここが見出しだな」と理解させやすいです。

基本的な形

See the Pen XbNWPo by Setoda Kouki (@LeoTiger) on CodePen.

いろいろなブログでよく見る、左と下にボーダーを指定する形です。うちのブログもこれ。

1文字目を大きく

See the Pen MwberV by Setoda Kouki (@LeoTiger) on CodePen.

これも結構見ますね。

左右にボーダー

See the Pen EjNyaR by Setoda Kouki (@LeoTiger) on CodePen.

CSS3のflexを使い、左右にボーダーを配置。あんまり見ないデザインですが、なんかこれから流行りそうな予感がしませんか？しませんか…

メタリックな雰囲気

See the Pen BNQzvR by Setoda Kouki (@LeoTiger) on CodePen.

グラデーションとテキストシャドウの組み合わせでメタリックに。ちょっと色を変えて上方向のシャドウも追加したら、エンボスっぽい雰囲気にも出来ますね。

よく分からない形

See the Pen XbNKyo by Setoda Kouki (@LeoTiger) on CodePen.

よく分かりません。

リボン

See the Pen YXpWPb by Setoda Kouki (@LeoTiger) on CodePen.

これもよく見ますね。親要素を貫いて、下方向に折りたたんでいます。擬似要素の使い方がポイントです。

吹き出し

See the Pen MwbeQG by Setoda Kouki (@LeoTiger) on CodePen.

見出しにはあまり使われていないですが、吹き出しも結構使えると思います。

テープ

See the Pen KpNMBQ by Setoda Kouki (@LeoTiger) on CodePen.

右下をめくったようなデザイン。シンプルですがお洒落です。

四角い輪

See the Pen ZGBOyx by Setoda Kouki (@LeoTiger) on CodePen.

左上に装飾してみました。

四角い輪 - 回してみた

See the Pen MwbePB by Setoda Kouki (@LeoTiger) on CodePen.

CSS3のanimationで回してみました。オススメはしない。

四角を2つ

See the Pen vOyKeE by Setoda Kouki (@LeoTiger) on CodePen.

これ結構見るんですが、すごくお洒落。

---

紹介したコードはそのままコピペしてもOKですが、色や文字サイズなどは自分のブログに合わせて調整するように！
あと、今回も動作確認はFirefoxでのみ行っているので、しっかりクロスブラウザに対応させるならベンダープレフィックスを付けたほうが無難です。