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

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

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

1.全体を線で囲む

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


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

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


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

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