制作のご相談はこちら
コピペでできるCSS見出しおしゃれデザイン集

2017年11月16日

コピペでできるCSS見出しおしゃれデザイン集

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