クラス名をつけることの重要性

CSSの基本はマッチング

CSSというのは、どこにどんな装飾を当てるのか マッチング という作業を行います。
例えば

img {
  border: 1px solid black;
}

と有った場合、ページ内の全てのimg要素を見つけ出し、その全てに装飾を行う という作業が行われます。
ページ内にはたくさんの画像がありますよね。 記事内に掲載した写真、関連記事と一緒に表示されるサムネイル、ランキングバナーや広告バナーなど。
imgは「画像」そのものですから、ページ内のどこに位置しようとも全てに1pxの黒い枠がつくことになります。

全画像に枠がついてはマズいならばこうしましょうよ。

.border {
  border: 1px solid black;
}

上記はCSSの指定です。htmlは以下の通り。

<img class="border" src="アドレス" alt="">

装飾したいimgだけ特別にクラス名を書く と。
そうすればborderというクラス名がついていないimgに黒枠はつきません。

クラス名に「border」と付けた場合のマッチング作業は、全ページ内から .border を探します。
中にはこういう書き方をしてしまう方が ↓

img.border {
  border: 1px solid black;
}

要素名imgとクラス名borderが書かれています。
これ 無駄 ってことわかりますか (´・ω・｀)
マッチング作業は
ページ内全体からまずクラス名borderを探す → クラス名borderを持つimgを探す
こういう流れになります。imgを探す作業が無駄。 要素関係なくクラス名だけで探すほうが効率が良いですよね。

img以外の要素にも同じクラス名が与えられており、その要素群の中でimgにだけ、という場合には .border の前に img が必要ですけどね。
そういうパターンも中にはあります。総合的に見て効率が良ければそれでヨシ。

マッチングというのは即ち 対象の特定 です。

記事内のhtml内容を「特定できる」ようにしておくべき

CSSはマッチングですよ、というのを踏まえ。
よくある失敗パターンの例を挙げてみようと思います。

別記事でも使用したミステイク例ですが、以下のようなhtmlを記事内で利用したとします。

html内容はこうです。

<div style="width: 横幅px; border: dotted 2px rgb(51,51,51); padding: 10px;">
<p>内容</p>
</div>

一見良さげに見えますが、よくよく調べてみるとスマートフォンでミスってた。
見事にはみ出します。
この原因は max-widthの指定を怠った ことにあります。

さあ、そこでみなさんどうしますか。
これまで同じ装飾を合計100記事で利用してきました。その100記事をひとつひとつ開いてmax-widthを追加しますか。
100記事だよ。100記事(笑)

もしこのhtml内容に予め以下のようにクラス名がついていれば…

<div class="box" style="width: 横幅px; border: dotted 2px rgb(51,51,51); padding: 10px;">
<p>内容</p>
</div>

100記事分のhtmlを修正せずともスタイルシートで一発解決できます。

.box {
  max-width: 100%;
}

クラス名が付いていないと対象の特定ができないんですね。
特にdivタグというのはページ内でも多用されますので順序特定(一定範囲内のいくつ目のdivとか)も現実的ではありません。
今すぐになにかしらの装飾をしないとしても、いずれするかもしれない。
それに備えて書いておくことをおすすめします。
そうすれば記事内に掲載している縦並びランキングバナーを横並びに変更したり、全体を枠で囲ったり、というのも容易にできるようになります。

アイディーではなくクラスを利用

特に「初心者」の自覚がある方へはアイディー(id)よりもクラス(class)の方がおすすめです。
idはページ内で一つしか利用してはいけません。単一利用のみです。
classは複数利用が可能。複数要素のために利用するのがclassです。
だからといってクラス名が単数であってはいけない、というわけではありませんので融通の効くクラス指定をおすすめします。

除外よりも特定の方が効率が良い

一番最初の章に内容が戻りますが、広い範囲を指定してその中に除外項目を設けるよりも、最初からピンポイントで要素を特定した方が処理が早いです。
「この範囲のimgに装飾、その中のxxxを除外、yyyも除外、さらにzzzも除外」
ということをするよりも
「この範囲のaaaに装飾」
とした方がマッチングが早いということですね。

クラス名さえあれば特定も除外もできる

で、ダブルスタンダードに感じるかもしれませんが、クラス名をつけておくことで「除外」作業にも役立つわけです。
「全てのimgからクラス名borderを持つものは除外」
といった作業です。
ほとんどのimgは対象にするけれど、幾つか存在するborderクラスを持つ画像だけは対象にしない」
といった使い方ですね。
結局はどう指定するのが効率が良いのか、ということになります。
特定も除外もクラス名(またはアイディー名)が無ければやりようがないんですね。

<div>ボックス1<div>
<div>ボックス2<div>
<div>ボックス3<div>
<div>ボックス4<div>
<div>ボックス5<div>

全てdiv要素です。この中の2と4だけ赤背景にしたいとします。
つまり 特定 の行為です。
どうやって特定しますか？
(こんな風に綺麗に並んでいればnth-of-typeで指定ができますが、今回の主旨と外れるのでその方法はスルー)
これがもしこうなら簡単です ↓

<div>ボックス1<div>
<div class="redbox">ボックス2<div>
<div>ボックス3<div>
<div class="redbox">ボックス4<div>
<div>ボックス5<div>

仮にこうして予めクラス名がついていれば

.redbox {
  background-color: red;
}

上記内容をスタイルシートに記して解決。

除外 についても同じことです。
ボックスを黒背景に。でも2と4だけは赤に。

div {
  background-color: black;
}

.redbox {
  background-color: red;
}

この場合は一旦全てが黒背景になり、その後 .redbox が赤に書き換わります。
CSS内容は 後述が前述を上書き します。

.redbox以外を黒背景(.redboxは何もしない)という場合には

div:not(.redbox) {
  background-color: black;
}

こういう方法を取ります。

まとめ

CSSでもJSでも同じなのですが、「要素特定」という作業がとても重要です。
「何を」「どこに」の概念がなければCSS装飾もJS実行も不可能です。
記事内で何かしらのhtmlを利用する時には、何層かに入れ子された状態になることもあると思います。
divタグの中にspanタグやaタグなどが入っている場合もあるでしょう。
入れ子が複雑な場合には 一番外側の要素(つまり一番書き始めのタグ) にクラス名を当てておけば中身に関しては割りとなんとかなります。

カスタマイズのご相談などでもクラス名が無いばっかりに
「全部のページで手作業修正するしかありません (´・ω・｀)」
と答えざるを得ない場合も。
いやこれホント結構ありますよ。ランキングバナー関係なんか特に多いです。
クラス名さえあればCSSかJSで即座に直せるのにねぇ (´・ω・｀)

対象特定を容易にするためにクラス名をつけておきましょう、というススメでした。

FC2プラグインにclass名やid名を付けた方が良い理由

プラグインにはclass名かid名をつけておきましょう のススメ ( ﾟДﾟ)ﾉ くらす？あいでぃー？なにそれ (▪⌔▪) という方へ向けてもご説明。...

vanillaice000.blog.fc2.com

パソコン優位主義は今すぐ捨てるべき【コンテンツが画面横幅を超過する場合の対処】

なかなかみなさんね、パソコン画面サイズとスマートフォン画面サイズが 全く違うんだ という意識が薄いように思います。 古参ブロガーさんほどそういう方が多い。 ここらで一旦「古い常識」を破棄してですね、スマートフォンを最重要とする考え方 を改めて身につけた方が良いと思います。 これから MFI のローンチも控えていますので、パソコン第一主義はもう捨てなければいけません。...

vanillaice000.blog.fc2.com