【Web制作初心者向け】HTML/CSSのコーディング規約や慣習まとめ

2018.07.11

Web制作をちょっと本格的に勉強してみようかなと思ったので、まずHTMLやCSSのコーディング規約みたいなものを軽く勉強しました。

個人的に「これは覚えとかなきゃ！」というものを備忘録も兼ねてまとめてみたので、よければ参考にしてみてください。

対象読者

  • 基本的なWeb開発の知識を知りたい方
  • HTML/CSSについてある程度の知識はあるが、慣習みたいなものを知らない方
  • 知識はあるが実際にしっかりとしたWebページを制作したことがない方
  • 独学で学んだ方、自己流でやっている方

「HTML/CSSの文法を知りたい」「そもそもHTML/CSSってなに？？」っていう方向けの説明はしていないので、ある程度（覚えていなくてもググればだいたいわかる程度）知っている方向けの記事です。

個人的に覚えておきたいものをピックアップしたので、僕が「これぐらいなら知ってる」と思ったものは大切なことであっても載せていない場合があります。ご了承ください。

また、この記事で紹介しているものは一例であり、個人によって考えが違う場合もあります。
あくまで「おすすめ」といった程度で捉えていただけるとありがたいです。

規約や慣習

カラーコードの書き方

<!-- よくない例 -->
color: #FFAA00;

<!-- よい例 -->
color: #fa0;

まず、カラーコードでのアルファベットは大文字ではなく小文字を使う場合が多いようです。
大文字か小文字のどちらかに統一されていれば基本問題はないかとは思いますが、どうせならShiftキー押す必要がない分楽な小文字で統一すればいいと思います。

また、カラーコードはコンパクトさの面を考えて、もし3桁で記述できるのであれば3桁にしましょう。
もし強いこだわりがなければ、最初から3桁に省略できる色を使用するのが良いと思います。

タイプセレクタの書き方

<!-- よくない例 -->
h1 {
  margin: 10px;
}

<!-- よくない例 -->
div.menu {
  margin: 10px;
}

<!-- よくない例 -->
.container .inner .content .m10 {
  margin: 10px;
}

まず、タイプセレクタにh1、imgなどHTMLの要素を指定するのは避けましょう。
div、span等も同様。

他の場所で再利用したいときに不便です。

また、3つ目のようにあまりにネストしてしまうと再利用しにくくなりますし、読み込み速度の面でもデメリットとなります。
多くても3つ以内に収めるべき。

値が0のとき

<!-- よくない例 -->
margin: 0px;
padding: 2em 0em;

<!-- よい例 -->
margin: 0;
padding: 2em 0;

値が0のときはpxやemなどの単位はつけず、「0」とだけ記述しておきます。

値が1以下のとき

<!-- よくない例 -->
font-size: 0.8em;

<!-- よい例 -->
font-size: .8em;

値が1以下のときは0を省略して小数点から記述することができます。

CSSの記述順

<!-- よくない例 -->
.content {
  font-size: 18px;
  color: #333;
  text-align: center;
  background-image: url("./image/sample.jpg");
  background-color: white;
}

<!-- よい例 -->
.content {
  background-color: white;
  background-image: url("./image/sample.jpg");
  color: #333;
  font-size: 18px;
  text-align: center;
}

これは賛否分かれる部分なのかなとも思うのですが、CSSの記述はアルファベット順にしましょう。
人それぞれ自己流の順番があったりしますが、アルファベット順にすることで確実に順番を統一することができ、探しやすさも向上します。

複数セレクタの書き方

<!-- よくない例 -->
h1, h2, h3 {
  margin: 10px;
}

<!-- よい例 -->
h1,
h2,
h3 {
  margin: 10px;
}

複数セレクタの場合は、セレクタ毎に改行することで読みやすくできます。

CSSのクラス命名規則

CSSのクラス命名規則に「BEM」というものがあります。

bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja
JapaneseTranslationsofBEM-Methodology(BEMの日本語訳)-juno/bem-methodology-ja
github.com

詳しくは上記サイトを読んでいただきたいのですが、簡単に説明すると
クラスは「Block」「Element」「Modifier」という3つに分類され、それに応じたクラスの命名をしましょう、ということです。

区切り方（セパレータ）に規則があり、

  • 単語の区切りにはハイフン1つ（inner-content）
  • BlockとElementの区切りにはアンダースコア2つ（menu__item）
  • BlockまたはElementと、Modifierの区切りにはハイフン2つ（button–active、tab–red）

を使います。

コメントアウトの書き方


/*
/*
よくない例
*/
.content {
  margin: 10px;
}
*/

/*
// よい例
.content {
  margin: 10px;
}
*/

コメントアウトには1行コメントアウト（// 〜〜）と複数行コメントアウト（/* 〜〜 */）があります。

複数行コメントアウトをデフォルトで使っていると、まとめてコメントアウトしたいときに機能しないという問題点があるため、1行コメントアウトを普段は使っていた方が助かります。

Javascriptで利用するクラスの書き方

Javascriptで利用するためのクラスにはクラス名の接頭辞として「js-」をつけます。

また、「js-」をつけたクラスはCSSでは使用せず、CSSとJavascriptを分離するようにします。

汎用クラスはあまり使わないようにする

<!-- よくない例 -->
.mt-10 {
  margin-top: 10px;
}

.p-20 {
  padding: 20px;
}

せっかくHTMLとCSSを使っているのに、この書き方を多用してしまうとインラインスタイル（HTMLのタグ内に「style=”〜〜”」でデザインを記述する方法）で記述しているのとほぼ変わりません。

使用する汎用クラスはBootstrapなどのフレームワークのものだけにしましょう。

参考サイト

こんなHTMLとCSSのコーディング規約で書きたい
https://qiita.com/pugiemonn/items/964203782e1fcb3d02c3

あなたのコーディング、大丈夫？ コーディング規約 HTML＋CSS編
http://www.hp-stylelink.com/news/2013/10/20131001.php

コメント