この記事は2017年11月16日に書かれたもので、内容が古い可能性がありますのでご注意ください。
CSSで表現できる見出しのデザインパターンをまとめました。
見出しはh2やh3タグで構成されることが多いのでSEO上でも重要なパーツです。
読んでほしいワードでもありますので、読みやすさも考慮したいところ。
そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。
CSSで表現できる読みやすい見出しリスト
サンプルではpタグにしています。
フォントの大きさや種類は適宜変更してください。
!importantは当サイトに合わせた記述ですので、基本的に外してください。
基本形
1. 下線
2. 下線+グラデーション
3. 中央寄せライン
4. 下線+2トーン
5. 左線
6. 左線+背景色
7. 左三角+背景色
8. 背景色
9. 背景色+最初の文字だけ大きく
10. 背景色+影
11. キーボードのようなボタン風
12. 上下点線
13. 上線+背景グラデーション
14. アイコン
15. 付箋
16. ボックス
17. 角丸枠
一部こちらの記事を参考にさせていただきました。いつも勉強になっている素敵なサイトです。
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld