Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。

CATEGORY : column

Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。

main_catch

webサイトを作るにあたり、HTMLをどう記述するのがBESTなのか?CSSはどう記述するのがBESTなのか?悩むことが多々あるのではないかと思います。今回はGoogleが推奨しているHTML/CSSコーディングルールを抜粋してご紹介していこうと思います。既に数多のwebサイトで紹介されてしまっていますので個人的に「そうだったの!?」と思った項目に焦点を合わせようと思います。

ちなみに、Googleガイドラインこちらが本家です。

プロトコル

http/httpsのそれぞれのファイルを両方のプロトコル上で利用できない場合を除き、画像やその他のメディアファイル、スタイルシート、およびスクリプトを指しているURLからプロトコルを省略する事が推奨されています。

これは知りませんでした・・・。

インデント

半角スペース2つでインデントを下げなければいけない。タブを使用したり、インデントにタブとスペースを混在させてはいけない。

「ファイルサイズが若干変わる位でさほど問題ないか!」という感じでスペースとタブ混在させてしまったりしそうですよね・・・。でもインデントを下げる時は必ず「半角スペース2回」!!めんどくさい時はDWの「ソースフォーマットの適用」を使うのが楽ですね!

HTML5を使用する。

XHTMLは使用しない。またHTML5を使用する際は「空要素の閉じ」を記述してはいけない。

これは知っていたので、HTML5でコーディングする際は必ず空要素の閉じを記述しないようにしていました。ただ、2~3年前に何処かの記事でHTML5はXHTMLの書き方(※ここで言う空要素の閉じ)をしても構わない。というのを見かけた記憶があるのですが恐らく、W3C的にはOKだけどGoogle的にはダメという事なんだと思います。

構造の分離

HTML(構造)とCSS(見た目)とScript(振る舞い)は独立させて、3つの相互関係はなるべく最小限にする。要素ごとにスタイルは記述しないでスタイルシートで記述すること。 スタイルシートやスクリプトは可能な限り一つにまとめる事。

この「構造の分離」は長いことWEB屋やっている人の方が対処に困りそうですね・・・。

タグを省略する

ファイルサイズや、可読性の為に、省略できるタグ(html,body,/p,/tdなど)を省略する。省略出来るタグはコチラを参考にされて下さい

この項目は「出来たらしてね」レベルみたいですが、省略しない書き方が当たり前な昨今、これの対応は厳しいですね・・・。僕がWEBの勉強し始めた時がHTML4.01が主流の時だったのですが、この省略は昔はOKだけど、今は絶対やっちゃダメ!!って習ったんですが、<b>タグなんかのようにHTML5になって非推奨から使用可能タグに戻ったのと同じような感覚なのでしょうか・・・?

Type属性

stylesheetとscriptのtype属性は省略する。HTML5ではデフォルトで解釈されるため必要ない。

有っても無くても、むしろHTML5じゃなくてもこの記述は無くてもキチンとブラウザがそれぞれ解釈を正しくしてくれていたので「要・不要」の判別がようやく出来た感じですね!

IDとClassのネーミング

理解しやすく、一般的なネーミングにする。

一番上はまだ分かりますが、2つ目の「button-green」とかはじゃあどうしろと?という感じですね・・・。「submit-btn-green」とかにすれば良いのでしょうか・・・?

IDとクラス名のスタイル

IDやクラスは、できるだけ簡潔でありながら何を意味してるか分かる名前にしてください。

いやいやいや(笑)さっきの項目の「submit-btn-green」ダメじゃないですか!!(笑)。なら「submit-button-green」ならいいのでしょうか?でも長いですよね・・・?

タイプセレクタ

タイプセレクタでIDとクラス名を修飾することは避ける。不要なタイプセレクタを省くことでCSSのパフォーマンスの向上にもつながるみたいです

これは結構やってしまってますね・・・

プロパティは一括して指定する

可能な限りプロパティは一括して指定します。プロパティを一括指定することはコードの効率性とわかりやすさのために有用です。

一括記述があんまり好きじゃなくて、よくやってました・・・。

小数点数値0の省略

小数点の数値0は省略して記述します。

そんな書き方ができる事自体知りませんでした(笑)。

IDとクラス名の区切り文字

ハイフン以外でセレクタ内の単語や略語を連結しないでください。

「ダブルクリックでソース上で選択できる」という理由でよく「_」で記述してしまっていました・・・。

CSSの宣言順番

宣言をアルファベット順に。ただし、特定のCSSプロパティの複数のベンダー固有の接頭辞(例えばの-moz接頭辞は、-webkitの前にくる)にソートに保つ必要があります。

そこまで見ているなんて知りませんでした・・。

プロパティ名の終端

プロパティ名のコロンの後にスペースを使用します。

これも知りませんでした・・・。

セレクタと宣言の分離

別々のセレクタと宣言は改行して記述していきます。

知らないことばかりです・・・(笑)

以上です、抜粋なので全文ではありませんが、他の項目も確認されたい場合は Googleガイドラインを確認されて下さい。これを全部守ってHTML/CSSをコーディングしていくのはかなり至難の業ですし、会社勤めで他の人もソースを触る事があるような場合はさらにハードルが上がると思います。ですので僕の場合は、やれる所から規約に則ってコーディングしていこうと思います(笑)

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

contact_bana