CSSについて考える

まずは自己紹介

私は、およそ６年間のプログラマ経験のほとんどをフロントエンド開発をしてきました。
そのなかで得た知識をアウトプットしようと思います。

CSSとは

はじめに

スタイルシート用の言語で、HTMLとセットで記述する。
レイアウトや色付け、サイズの変更はもちろん、
アニメーションだってできちゃうすごいやつです。
JavaScriptにしかできなかったこともCSS3になってからはかなりできることが増えました。
今回は基本的な書き方や、お作法などを記載していきます。

基本的な書き方

CSSは３種類の記載方法が存在しています。

HTMLタグに直接書く
HTML上のstyleタグに書く
.css拡張子ファイルに書く

HTMLタグに直接書く

<p style="background: red;">

上記のような記載の仕方が可能です。
基本的に後述する２種類の記載方法より優先的に適用されます。
それゆえに、適用範囲（スコープ）は限定されてしまい、
何度も同じ記載をしなければいけないことや、
2や3の記載方法で書いたスタイルが適用されないなど、
あまりオススメできる記載方法ではありません。

HTML上のstyleタグに書く

<style>
  body {
    background-color: #00ff00;
  }
</style>

上記のような記載でheadタグ内に書くのが一般的かと思います。
3の記述方法よりも優先的に適用されます。
対象の画面を適応対象とし、画面単位に設定可能です。
ただし、昨今のSPAにおけるスタイルとしては弱点が多くあります。
上記のようにbodyタグに書きたい場合、画面が入れ子になっている構造（レンダリング）
だと意図しないタグに影響範囲が出てしまったりするので、十分に考慮が必要です。
またhead内に記載すると可読性の低下に繋がりやすく、
必要なHTML情報へ到達するのに、随分とスクロールしてあげねばなりません。
こちらも場合にもよりますが、基本的にオススメしていません。

.css拡張子ファイルに書く

style.css

body {
  background-color: #00ff00;
}

最後に3の記載方法ですが、他の記法よりも優先度が低く、適用範囲が外部ファイルとして読み込んだHTMLに適用されます。
これは2の特性と同じで、周囲のHTMLに影響が出るので十分に考慮が必要です。
また、外部ファイル取り込み時に
<style src="./style.css">など記載が必要で、より下にあるCSSファイルが有効となります。
今回、この記法をオススメしたいと思いますが、利点として

可読性が良い
HTMLとの明示的な役割分担ができる
何度も同じ記載をしなくて良い

などが挙げられます。
外部ファイルにすることで、再利用なども可能になるので是非とも対応いただきたいと思います。

セレクタについて

CSSは基本的にセレクタと呼ばれる適用箇所を限定する記載方法を用いて書いていきます。
例外的に*がありますが、これは全てのノード（要素）へ作用します。
非常に有効的ではありますが同時に予期せぬ影響範囲となるので使用は控えた方が無難でしょう。
ここでは一般的なセレクタの記載方法を書いていきます。

ノードセレクタ

body {
  height: 100%;
}
p {
  margin: 0;
  padding: 0;
}

HTMLタグに直接作用するセレクタです。
当てたい要素の基本設定を作るのに主に用いられます。
影響範囲は大きく、細やかな設定をするのに向きません。
逆に大まかに設定したい時や、サイト全体的に統一したい時など、メインのHTMLに持っていくことで、スタイルを合わせることが可能です。

IDセレクタ

#content-main {
  height: 100%;
}
div#content-main {
  width: 100%;
}

#と記載することでノード属性のid=""を取得可能です。

これらはHTMLタグ内の<main id="content-main">などのID属性を見て適用されます。

また上記タグだと最初に記載したスタイルは適用されますが、後に書いた物は適用されません。
これはIDセレクタの前にノードセレクタがついており、ノードとIDが一致していないためです。
これを解消するには、HTML側のノードを<div id="content-main">とする必要があります。

クラスセレクタ

.btn {
  height: 100%;
}
.btn.primary {
  background: blue;
}

.と記載することでノード属性のclass=""を取得可能です。

これらはHTMLタグ内の<button class="btn">などのclass属性を見て適用されます。
後に記述したように連結して書くことも可能であり、<button class="btn primary">としたノードに適用されます。

属性値セレクタ

[name="text"] {
  border: 1px solid black;
}

属性値セレクタとしては[ ]の中に書くようになります。
こちらについては属性値であれば使用可能です。

正規表現を利用する

属性値セレクタでは正規表現として*や^、$が利用可能です。

[name*="txt"] {
  border: 1px solid black;
}
[name^="txt"] {
  border: 1px solid red;
}
[name$="Box"] {
  border: 1px solid blue;
}

<input type="text" name="txtName" />
<input type="checkbox" name="checkBox" />

*は中間一致
^は前方一致
$は後方一致
として利用可能です。

階層セレクタ

table thead tr th {
  text-align: left;
}

半角スペースでノードを分けることで階層構造のノードに適用可能です。
これはセレクタ全般に適用可能です。

ちょっとした小技

隣接ノードの取得

+セレクタを使うと隣のノードに対応できます。

span + span {
  font-size: 18pt;
}

>セレクタを使うと直下のノードに対応できます。

div > div {
  display: none;
}

擬似クラス

よく使うのを書いておきます。
:hover　マウスが乗った時のスタイル
:active　クリックやドラッグしている時のスタイル
:focus　ノードにファーカスが当たっている時のスタイル
:visited　遷移後のリンクとかのスタイル
:first-child　出現する最初のノードのスタイル
:last-child　出現する最後のノードのスタイル
:nth-child()　指定したn番目のノードのスタイル
:nth-child(odd) 奇数
:nth-child(even) 偶数
など

詳しくはこちら

おわりに

JSを覚えたりするとついJSでやってしまいますが、
CSSでできることはCSSでやってあげることで、
処理が早くなったりとUI/UXに大きく影響が出ます。
ぜひ有効に活用してください。