CSS見出しデザイン

2020-10-22

部屋の模様替えをするように、 ときには、ブログ内のデザインや色などを変えたくなるかもしれません。

今回は、見出しデザインを変えてみることに。 以下参考にさせていただきました。ありがとうございます!

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説!

h1タグのデザイン


h1 {
  padding: 0em 0.5em;
  border-bottom: 17px solid #94d1ca;
  font-size:33px;
  letter-spacing:2px;
}

h2タグのデザイン


h2 {
  font-size:27px;
  padding: 1.1em 1em 0.8em;
  background-color: #e2f1f1;
  -webkit-box-shadow: 5px 5px #88bfbf;
  box-shadow: 5px 5px #88bfbf;
  border-radius: 20px;
}

西洋占星術ブログの、h2タグの2色は、
#fdede4 #e29399
にしました。

感想

たとえば、はてなブログでは、大見出し〜小見出しが「h3〜h5タグ」に設定されていて、 h1タグやh2タグには、今まで馴染みがなかったな〜って思いました。

記事のタイトルなどは「h1タグ」、 記事内の見出しは「h2タグ」に統一して、 すでに「h3タグ」を使って書いた、いくつかの記事を修正しました。

次: pタグとbrタグ
ホームページ作りの記録
kanata.blog