GoogleのCSSガイダンスに沿ったコーディング方法について
先日、htmlの書き方について「SEO内部対策の基本！ガイダンスに沿ったhtmlコーディング方法とは」というGoogleのHTMLガイダンスに関する記事を公開しましたが、コーディングされている方ならもちろん、CSSのコーディング知識も必要となります。
そして、このCSSの記述方法もコーダーによって書き方が異なり、ひと昔前はブラウザによって崩れたりなど対応に追われましたが、現在は多少の間違いや無駄の多い書き方をしていても、概ねブラウザで表示できてしまいます。
しかし、大規模なサイトや更新性の高いサイトを管理していく上で、CSSを無駄なくわかりやすく保つことはサイトの運営上、非常に重要です。
書き方によってはページの読み込み速度にも関係することから、直帰率などにも影響してきます。
このことから、ぜひ内部対策とともに知っておきたい知識のひとつです。
そこで、今回はCSSの書き方に関してGoogleではガイダンスを公開していますので、これに沿ったCSSの記述方法についてお話したいと思います。
参考：Google HTML/CSS Style Guide
目次
CSSスタイルルール / CSS Style Rules
CSSバリデート
できる限り正確なCSSで記述しましょう。
そして、htmlと同じようにチェックツールが用意されていますので、適宜検証します。
→W3C CSS Validator
IDとクラスの命名
/* 非推奨 意味のないID名 */
#yee-1901 {}
/* 非推奨 見た目だけのクラス名 */
.button-green {}
.clear {}
/* 推奨 内容を表すクラス名 */
#gallery {}
#login {}
.video {}
/* 推奨 意味のあるクラス名 */
.aux {}
.alt {}
見た目だけなどの意味の持たない名前にするのではなく、クローラーが見ても内容がわかるようなIDとクラス名を付けます。
IDとクラス名のスタイル
/* 非推奨 */
#navigation {}
.atr {}
/* 推奨 */
#nav {}
.author {}
IDとクラス名は意味のわかる範囲で、できる限り短く設定します。
タイプセレクタ
/* 非推奨 */
ul#example {}
div.error {}
/* 推奨 */
#example {}
.error {}
タイプセレクタにIDとクラス名を記述しないようにします。
子孫セレクタもできれば避ける。
ショートハンドプロパティ
/* 非推奨 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推奨 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
できる限りプロパティを一括で指定しましょう。
行数も省けて管理もしやすくなります。
「0」と単位
/* 非推奨 */ margin: 0px; padding: 0px; /* 推奨 */ margin: 0; padding: 0;
値が0の場合は単位を省略することができます。
小数点数値「0」
/* 非推奨 */ font-size: 0.8em; /* 推奨 */ font-size: .8em;
値が少数点の場合、「0」を省略することができます。
16進法
/* 非推奨 */ color: #eebbcc; /* 推奨 */ color: #ebc;
例のように2つ続きの場合は16進数表記の3文字で記述することができます。
例えば、白なら#fff、黒なら#000となります。
プレフィックス（接頭辞）
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
IDとクラス名が重複する恐れのある大規模なサイトの場合、後ろにハイフンを付けて接頭辞を設定します。
IDやクラス名の区切り文字
/* 非推奨 単語が繋がっている */
.demoimage {}
/* 非推奨 アンダーバーで繋げている */
.error_status {}
/* 推奨 */
#video-id {}
.ads-sample {}
IDやクラス名に2つ以上の単語を指定する際はハイフンで繋げます。
CSSハック
CSSのハックを使う場合は、まず他の方法で表現できないか試してみましょう。
便利ですが、最後の手段として考えます。
CSS書式ルール / CSS Formatting Rules
プロパティの宣言の順序
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
プロパティの宣言順序は、アルファベット順に記述します。
また、ベンダープレフィックスは無視し、接頭辞の順序を守って記述しましょう。
ブロック単位のインデント
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
階層がわかりやすいように、ブロックごとにインデントして記述します。
宣言の終わり
/* 非推奨 */
.test {
display: block;
height: 100px
}
/* 推奨 */
.test {
display: block;
height: 100px;
}
宣言の最後には必ず「セミコロン（;）」を付けましょう。
プロパティ名の終わり
/* 非推奨 */
h3 {
font-weight:bold;
}
/* 推奨 */
h3 {
font-weight: bold;
}
プロパティの後に付くコロンの後ろには半角スペースを入れます。
セレクタと宣言の分離
/* 非推奨 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
別々のセレクタと宣言はそれぞれ改行して記述します。
CSSルールの分離
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
プロパティごとに改行を入れて記述します。
CSS引用符
/* 非推奨 */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推奨 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
属性セレクタや、プロパティ値には単一引用符を使用します。
また、URLには引用符は使用しません。
CSSメタルール / CSS Meta Rules
セクションのコメント
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
もし可能なら、CSSの各セクションの分かれ目に改行して用途などのコメントを入力します。
CSSコーディングのガイダンスについてまとめ
いかがでしたか？cssのコーディングに関しては、あいまいに記憶している部分や、昔からの癖などもコーダーによってはけっこうあるかと思います。
一度、ガイダンスに目を通してサイトを複数で管理しても、一貫性のあるコーディングができるようにしておくことが重要です。
また、htmlのガイダンスについては下記記事を参考にしてください。
