HTML/CSSの落とし穴！？初心者向け覚えておきたい基本ルール5つ
すっかり春らしくなってきた今日この頃。何らかのきっかけでHTML/CSSを使うことになった人もいるのではなかろうか。今日は初心者の方向けに覚えておきたい基本ルールを5つ紹介する。これを知らないとその内ハマることになると思う。
またGoogle社内で推奨されているHTML/CSSのコーディングルールが記された記事があったため、そちらも紹介する。ここら辺は変なクセが付く前に知っておきたいところ。
覚えておきたい基本ルール5つ
1. 後に書いたほうが優先される
以下のHTMLがある。
<h3>Hello</h3>
このHTMLへ以下のスタイルを適用する。
h3 { color: red; } h3 { color: blue; }
この場合優先されるのは後に書いたほうであり、h3要素は青文字になる。
Hello
ある程度の規模のサイトを作ろうとすると複数のスタイルシートを組み込むことがある。その時にこのスタイルの上書きを理解して使えば便利なのだが、理解せずに使ってしまうと思ったとおりのスタイルが適用されないという罠に陥ることになる。
2. classよりidが優先される
以下のHTMLがある。
<h3 class=".warning" id="criticalMessage">Hello</h3>
このHTMLへ以下のスタイルを適用する。
#criticalMessage { color: blue; } .warning { color: red; }
この場合優先されるのはid指定のほうであり、h3要素は青文字になる。
Hello
idとclassを一つのタグ内に書くときは要注意。CSSセレクタを駆使し、そもそもidやclassに頼らないという選択肢もある。
CSSセレクタ多すぎ覚えられない！CSS3対応セレクタリストを作ってみた
3. 詳細に指定したほうが優先される
以下のHTMLがある。
<div> <h3>Hello</h3> </div>
このHTMLへ以下のスタイルを適用する。
div > h3 { color: blue; } h3 { color: red; }
この場合優先されるのはセレクタを詳細に記述したほうであり、h3要素は青文字になる。
Hello
4. HTMLタグに書くstyle属性はCSSのstyleより優先される。
以下のHTMLがある。
<h3 style="color: blue;">Hello</h3>
このHTMLへ以下のスタイルを適用する。
h3 { color: red; }
この場合優先されるのはHTMLタグで指定したスタイル属性であり、h3要素は青文字になる。
Hello
5. !import"は何よりも優先される
以下のHTMLがある。
<h3 style="color: blue;">Hello</h3>
このHTMLへ以下のスタイルを適用する。
h3 { color: red !important; }
この場合優先されるのは"!important"が指定されたスタイルであり、h3要素は赤文字になる。
Hello
以上が基本ルール5つ。どれも簡単な内容なのだが、スタイルシートが膨大かつ、複数人で管理していると意外にミスしてしまったりもするので注意。
ここからはGoogle社内で推奨されているHTML/CSSのコーディングルール。以下の記事を読ませていただいた。いくつかこれは！というルールがあったので抜粋する。
「Google HTML/CSS Style Guide」を適当に和訳してみた
埋め込みリソースからプロトコル(http:,https:)を省略する
確かにGoogle Developersに記載されてるjQueryとかのscriptタグってプロトコル付いてない。で、試してみたら、ん？これ僕の環境ではできないのだが。まぁプロトコルはつけようと思う。
インデントは半角スペース2つ
複数人でコーディングしていく時は、こういうルールも作らなくてはいけないのだろう。僕も半角スペース2つ派。
type属性は省略
このtype属性、前から何の意味があるのだろうと思っていた。HTML5以前ではcss、javascriptはデフォルトの言語でなかったから書く必要があった？まぁよくわからないが、今までどおり省略する。
idとclass名には意味のある名前を使うこと
命名センスが問われるところであり、いつも悩まされる。idやclass名だけでなく、javascriptやPHPの変数名とかも含めて。何か良い命名方法があったりするのだろうか。
idとclass名にタイプセレクタを記述しない
へぇー。不要な子孫セレクタはパフォーマンスを落とすようだ。やはりCSSセレクタはしっかり学んだほうがよい。（過去記事：CSSセレクタ多すぎ覚えられない！CSS3対応セレクタリストを作ってみた）
別々のセレクタとプロパティは改行して書くこと
プロパティはわかるが、セレクタまでも。。。徹底している。
最後に「一貫性を持ちましょう」
これは本当にその通りだね。複数人で開発する時に一貫性が崩れたコーディングをされるとストレスになる。1人で開発を行っているときから一貫性を意識しておくとよいと思う。
コーディングルールは別に決まってるわけではなく各々持ってしかるべきだと思うが、組織の中でコーディングしていくのならやっぱりルールは定めたほうがいいと思う。
というわけでHTML/CSSのルールについて以上。
