2021/12 エンジニア初心者でも知っておきたいCSSの大事なポイント
CSSを解説しているサイトはたくさんありますが、入門サイトでもあまり説明されることが少ない、CSSの大事なポイントについて紹介したいと思います。
インラインスタイルは原則使わない
インラインスタイルとは、HTMLタグにstyle属性を指定してスタイルを当てる書き方です。
<p style="background-color: light-gray;">
HTMLは〇〇.html、CSSは〇〇.cssというように、HTMLとCSSは分けて書くのが基本です。そうすることで、「文書構造」と「見た目」を別々に管理することができます。
しかし、インラインスタイルを用いると、文書構造と見た目に関する情報が混ざってしまい、管理がしにくくなります。
加えて、CSSには優先順位(詳細度)というものがあり、インラインスタイルはかなり優先順位の高い書き方になります。CSSファイルとインラインスタイルで同じプロパティを指定した場合、インラインスタイルの方が優先されてしまいます。
.title {
color: pink;
}
<h1 class="title" style="color: blue;">あのイーハトーヴォの...</h1>
→ 青色が優先される
インラインスタイルを多用すると見た目の修正が難しくなるので、止むを得ない場合（JavaScriptの処理の都合上など）以外は使わないようにしましょう。
!importantは使わない
!importantを使うと、CSSの優先順位を無視して優先されるようになります。
p {
color: pink !important;
}
.text {
color: blue;
}
<p class="text">あのイーハトーヴォ...</p>
→ 本来は青色になるが、!importantがついているのでピンク色が優先される
インラインスタイルと同じ理由で、多用するとCSSの優先順位の判別が困難となり、見た目の修正に翻弄されることになります。最悪の場合、全然CSSが効かないということもありえます。
CSSは優先順位を意識して書くのが普通です。!importantは本来の優先順位を無視して優先させる書き方なので、インラインスタイルよりも改修が難しくなります。
どうしても思ったようにCSSが反映されないというときは!importantを使わず、セレクタやDOM(HTMLタグ)の構造を見直してみましょう。
セレクタは原則classを使う
セレクタの種類は15種類以上もありますが、初心者向けの解説でよく紹介されるのは以下の５つです。
- 要素セレクタ
- idセレクタ
- classセレクタ
- 属性セレクタ
- DOM構造に依存するセレクタ(子孫セレクタ、子セレクタなど)
CSSに慣れていないうちはどのセレクタを使えばよいか悩む場面もあるかと思いますが、止むを得ない理由がない限りはclassセレクタを使いましょう。 以下に各セレクタの特徴を説明します。
要素セレクタ
タグ名を指定する方法になるので、影響範囲がとても大きくなります。そのため、基本的には対象要素のデフォルトCSS(marginなど)をリセットするために使うことが多いです。細かなスタイルの指定には向いていません。
idセレクタ
idセレクタはとても優先順位が高くなる指定方法です。インラインスタイルや!importantを使用する方法と同じ理由でidセレクタもほとんど使わないです。
classセレクタ
最も基本のセレクタです。優先順位もそんなに高くなく、CSSの修正も容易になるので、原則こちらを使いましょう。
属性セレクタ
input[name="hoge"]というようなセレクタです。影響範囲がわかりにくい上、classセレクタと比べると書き方がまわりくどいのでほとんど使わないです。
DOM構造に依存するセレクタ
p .classやp > spanというようなセレクタです。DOMの構造を変えたいときに大きく影響を受ける書き方になるので、避けた方がいいでしょう。代わりにclassセレクタを使った方が影響は少ないです。
レイアウトはFlexbox、Grid Layoutを使う
Flexboxが登場するまで、レイアウトを作るときはHTMLのtableタグや、CSSのfloatプロパティを使っていました。
tableレイアウトはとても古い手法なので最近はあまり見かけませんが、floatプロパティはレイアウト作りの解説で今でも見かけることがあります。floatはもともと要素の回り込みを指定するプロパティなので、これからはFlexbox、もしくはGrid Layoutを使うようにしましょう。
Flexboxについては以前の記事で説明していますので、よかったら読んでみてください。
Grid LayoutはFlexboxよりも新しいレイアウト構築の手法で、格子状のレイアウトや全体のレイアウトに向いていると言われています。 僕はGrid Layoutが苦手なので、Flexboxだとかなり厳しいときはGrid Layoutを使う、というようにして使い分けています。
Flexbox、Grid Layoutは最新のブラウザでは問題なく動作するようですが、IEや古いバージョンのブラウザも含める場合は、ブラウザ対応状況を確認しましょう。
最後に
大事だけど、よく見かける初心者向けの解説ではあまり触れられないポイントについてまとめてみました。他にも大事なポイントはたくさんありますが、まずは本稿の内容を意識してみてください。