More than 3 years have passed since last update.

【初心者向け】hタグには直接見出しデザインのCSSを当てない方が良い。デザインごとに専用クラスを付けると管理しやすい。

Posted at 2020-12-27

どうも7noteです。見出しデザインに関するTips。

hタグにCSSを付ける時、どう書いていますか？
もしこのような書き方をしていれば、注意が必要かも！

index.html

<!-- 推奨しないCSSの付け方 -->

h2 {
  color: #f00;
  font-size: 200%;
  border-bottom: 1px solid #f00;
  margin: 0 0 50px;
}

例えば、何ページかあるサイトの開発をするとします。
このとき、全ページで使える共通のCSSファイルを用意するのが一般的かなと思いますが、
この共通のCSSファイルに上のようなCSSを書いてしまうと躓く可能性があります。

「サービスのページや会社概要のページは同じ見出しの見た目なので、html側ではh2タグを使って書きました。しかし、お問い合わせのページでは見出し(h2)の見え方を後で変更しようという話になってしまいました。」

「急遽変更が必要だったため、お問い合わせのページ専用のCSSファイルに共通のh2のCSSを上書きするような書き方をしました。」

こうしてしまうと今後の修正の際に、共通のCSSファイルとお問い合わせのCSSファイルの2つに気を付けながら修正しなければなりません

また、お問い合わせの見出しデザインをほかの申込ページなどでも使うことになった場合、同じCSSが複数のファイルに分散してまたまた管理が大変になってしまいます。

このような場合でもclassで体裁を管理しておけば、クラスを付けたり外したりするだけで簡単に調整が可能になります。

共通パーツの作りすぎにも注意

ある程度どこまで浸透するのかをしっかり把握していなければ、共通のパーツやCSSを安易に修正できなくなってしまいます。
そうならないためにも、分かりやすいクラス名とコメントを付けて管理を行ない、自分以外でも読めば分かるような作りで設計して作成をしましょう。

sample.css

/* よく使う赤色の下線付きの見出し */
.h-type01 {
  /* CSSデザイン */
}

/* フォームのあるページの見出し */
.h-type02 {
  /* CSSデザイン */
}