HTMLの見出しh2を見やすくデザインしたい

見出しのデザインをを工夫したい、ということで調べてみました。

Google検索「HTML h2 ライン
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

こちらのサイトを参考にさせていただきました。「見出し集」がたくさんあり、シンプルに使えることがとてもいいです。特に参考にさせていただいたものが次のの2点です。


1.全体を線で囲む

「まわりを線で囲み、少し角を丸くしたものです。色は暗めのものが良いでしょう。」


h1 { color: #364e96;/*文字色*/ border: solid 3px #364e96;/*線色*/ padding: 0.5em;/*文字周りの余白*/ border-radius: 0.5em;/*角丸*/ }

2.左に線+塗り

「さらに塗りを加えたものです。珍しさはありませんが、見やすいデザインでしょう。」


h1 { padding: 0.5em;/*文字周りの余白*/ color: #494949;/*文字色*/ background: #fffaf4;/*背景色*/ border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/ }

この2つがあるだけでページの見やすさ、雰囲気がガラッと変わります。すごいですね。