今回は、そのへんでよく見るHタグデザインの中から、汎用性が高い＋おしゃれでシンプルなものをいくつかまとめて、極力コピペで使えるようにしています。
色や文字サイズ、位置はお好きに変更してお使いください。
どんなサイトにも合う見出し
まずはオーソドックスな背景単色見出し
See the Pen h2-K-シンプル背景色＋下線 by 海辺のカラス (@seaside-crow) on CodePen.
左線と背景色
See the Pen h2-K-シンプル左縦線 by 海辺のカラス (@seaside-crow) on CodePen.
色を横グラデーションに
See the Pen h2-K-背景色横グラデーション by 海辺のカラス (@seaside-crow) on CodePen.
縦グラデーションだとこうなる
See the Pen h2-K-背景色縦グラデーション by 海辺のカラス (@seaside-crow) on CodePen.
背景と枠線をずらすと
See the Pen h2-K-背景ずれ by 海辺のカラス (@seaside-crow) on CodePen.
文字だけでずらすと
See the Pen h2-K-文字ずれ by 海辺のカラス (@seaside-crow) on CodePen.
白抜き文字と下線でシンプルに
See the Pen h2-K-シンプル白抜き文字＋下線 by 海辺のカラス (@seaside-crow) on CodePen.
よくある上下に線があるパターン
See the Pen h2-K-シンプル上下線 by 海辺のカラス (@seaside-crow) on CodePen.
上下を二重線にすると
See the Pen h2-K-シンプル上下線二重 by 海辺のカラス (@seaside-crow) on CodePen.
左と下のみ点線に
See the Pen h2-K-シンプル点線 by 海辺のカラス (@seaside-crow) on CodePen.
途中で色が変わる下線
See the Pen h2-K-2色下線 by 海辺のカラス (@seaside-crow) on CodePen.
点線と実線でファンシーに
See the Pen h2-K-2色ブレンド by 海辺のカラス (@seaside-crow) on CodePen.
さらに最初の文字だけ大きく
See the Pen h2-K-2色ブレンド+最初の文字のみサイズ変更 by 海辺のカラス (@seaside-crow) on CodePen.
他サイトと差をつけるなら配色
見出しを目立たせすぎると記事に対して少し不信感が芽生えますので、これくらいのおとなしめのデザインがいいんじゃないかなって個人的には思います。
ですが、デザイン自体はありきたりなものになるので、配色で差をつけないといけないかも。
シンプルすぎると見出しとして機能しないし、目立ちすぎると目につくので、ちょうどいいバランスを考えないといけない”見出しデザイン”は難易度が高いです。
次はもう少し動きのあるものを作ろうかな。
