HTML/CSSのコーディング規約の重要性

HTML/CSS
この記事は約9分で読めます。

コードの記述方法って人によって全く違い、独特な癖があって引き継ぐときに困ることってありますよね。

「作業こっちが早いし、自分が読めたらえーやん。」

という考えでコーディングをしてしまうと、次に担当する人がぱっと見はきれいなサイトでも、バックエンドのコーディング部分があまりにも汚すぎると、修正の際に検証が必要になり余計な工数がかかったり、破綻する箇所が多くなって作った本人以外修正ができないといったことも出てきます。

そういった点も含め、一人でWEBサイトを作るときでもチームで作る時でも、記述ルールを定めるべきです。
なぜ定めなければならないかというと…

①クオリティの向上
制作を進める上で最適だと考えられるルールをガイドラインとして制定することで、クオリティの向上を図ることができます。

②クオリティの均一化
これが一番かもしれません。
コーディング規約を制定することで、誰でも同じルールに則って記述ができるため、担当者によって制作物のクオリティのばらつきを防ぐことができます。

③制作の効率化
ルールが有ることでタイムロスを防ぎ、無駄なチェック・修正の工数を削減することができます。

といった点が挙げられます。
具体的にどのようにルール決めをすればいいかは下記に記します。

HTML、CSS共通のルール

入れ子構造(ネスト)・インデント

入れ子構造(ネスト)

入れ子構造(ネスト)とは、開始タグと閉じタグで囲むことをいいます。
HTMLは基本的にテキストをタグで囲います。タグで囲うというのは「<開始タグ>テキスト</終了タグ>」という風に、タグをテキストを囲うことにより、一つの要素とすることができます。

更にHTMLの場合は単にテキストを囲うだけではなく「タグを更に別のタグで囲う」ということが可能です。

<div>
  <h2>インスタントラーメンを作るには</h2>
  <ul>
    <li>お湯を入れる</li>
    <li>3分間待つ</li>
    <li>美味しくいただく</li>
  </ul>
  <p>卵をいれるのもいいよね</p>
</div>

上記の例で言えば、<h2>や<ul>、<p>といった要素が<div>で囲われています。
このように他のタグを囲うことを入れ子にするといいます。英語では「Nest(ネスト)」と言うため、よく「ネストする」と言うこともあります。

CSSの場合は通常入れ子構造(ネスト)を使いませんが、Scssで記述する際は使用します。
こちらは今回割愛します。

インデント

インデントとは先頭の文字を字下げするという意味です。
みなさん学生の頃に作文を書いたと思いますが、段落の最初は一文字余白をあけますよね?あれがインデントです。

<div>
  <h2>カレーを作るには</h2>
  <ul>
    <li>野菜と肉を炒める</li>
    <li>カレールーを入れて煮込む</li>
    <li>美味しくいただく</li>
  </ul>
  <p>卵をいれるのもいいよね</p>
</div>

上記の例で言えば、<h2>や<ul>、<p>の前に余白が空いていますよね?
このようにインデントされたコードは入れ子構造(ネスト)の開始タグ、終了タグの位置が確認しやすくなります。

また、インデントの使い方については2種類あります。
インデントには「tabスペースインデント」「半角スペースインデント」があります。
上記の例では半角スペース2つでインデントを空けていますが、どちらでも問題はありません。
ただし、同じルールで記述をする場合はどちらを使用するかを明確にしましょう。

個人的にはtabスペースインデントが好きですね。

小文字を使う

HTMLの場合

<!-- 非推奨 -->
<IMG SRC="../example/picture.jpg" ALT="Example">

<!-- 推奨 -->
<img src="../example/picture.jpg" alt="Example">

CSSの場合

/* 非推奨 */
border: 1PX SOLID #F0F0F0;

/* 推奨 */
border: 1px solid #f0f0f0;

エンコード

HTML及びCSSの文字コードは原則「UTF-8」を使用します。
ただし、システム要件/言語/サーバーによるリクエストなどから、Shift_JISやEUC-JPにする場合もあります。

命名規約を作る

命名規則(めいめいきそく、: naming conventions)とは、プログラミングを行う際にソースコード上の識別子: identifier)の名称となる文字列を決定するためのルールを定めたもの。ネーミング規則ネーミング規約、あるいは命名規約とも呼ぶ。

通常は、ソースコードの可読性や視認性の向上、プログラミング効率およびメンテナンス性の改善などを目的としている。

wikipedia – 命名規則(プログラミング)

Wikipediaにもあるように、ソースコードの可読性や視認性を高めるためにルール作りを行います。
なんのルールもなくファイル名をつけたり、CSSのクラス名などをフリーダムにつけていっていると、これってどの部分?どういう動きについてる?が把握出来なくなり、ソースコードを追いかけ直したり、影響範囲を調べ直すなどといった無駄な作業が発生してしまいます。
チーム作業ではなくても毎回気分でクラス名などをつけず、一定のルールに則ったネーミングをつけることを心がけましょう。

以下は個人的に決めているルールです。
内容は人それぞれ、プロジェクトごと、会社によって異なりますのが、一番最初はどのルールを使うか確認した方が後々のトラブル回避に繋がります

命名の基本ルール

基本的にHTMLファイル、ディレクトリ、画像ファイル及びCSS(ID及びCLASSセレクタ)の名前の付け方は次のとおりになります。

  1. ファイル名に使用できる文字は以下のとおり。(ファイル名には拡張子必須)
    • 「a」〜「z」までの小文字のアルファベット(1byte)
    • 「0」〜「9」までの英数字(1byte)
    • 「-(ハイフン)」と「_(アンダーバー)」(いずれも1byte)
  2. 機種依存文字は使用禁止。
  3. 必ずアルファベットからはじめ数字、ハイフン、アンダーバーからはじめてはいけない。
  4. 全角スペース、半角スペース(Space)の使用禁止。
  5. 「\」,「/」,「*」,「:」,「?」,「<」,「>」,「|」,「$」これらの文字の使用禁止。

結構あるあるなんですが、機種依存文字を使ったファイルをサーバーにアップしてしまい、削除できなくなって困るなんてこともあったりします。基本的には半角英数小文字を使ってください。

ファイル名(URL)のルール

  1. 基本的にそのページを端的に表した英単語をファイル名に設定する。
  2. 英単語を使用する際、複数の単語に別れてファイル名が長くなりすぎてしまう場合は、単語を1〜2個に絞ってわかりやすく表現する。
    ファイル名は拡張子を含む半角小文字で31文字以内になるようにする。
    例:特定商取引法に基づく表記 inscription_based_on_specific_trade_law.html → law.html
  3. 同じ内容のページが複数ある場合は、連番を利用して命名することも可能。
    例:実績 works01.html、works02.html、works03.html…

WordPressのパーマリンク設定で投稿名をURLに指定している場合、URLがめちゃくちゃ長くなったり日本語が入ったりすることがありますが、それも手動でスラッグを変更することをおすすめします。

CSSのルール

IDセレクタとCLASSセレクタの名前については、文書構造上意味のある名前にします。
全ページ共通のものと、特定のページ固有のものの2つに別れますが、その要素を表す英単語+αのように記述し、その名前だけで内容がある程度わかるようにします。

複数の単語で構成されるセレクタ名を区切る際、「キャメルケース」「スネークケース」「ケバブケース」といった記述の方法があります。

名称表記例説明用途
キャメルケースcamelCase単語の先頭を大文字にする命名規則です。
表記例のような先頭の単語だけ小文字にするのがローワーキャメルケースと呼ばれます。
CSSやPHP、jsなどの変数、関数に使われます。
パスカルケースPascalCaseキャメルケースと同じく単語の先頭を大文字にする命名規則です。
こちらは全ての単語の先頭を大文字にする違いがあります。
アッパーキャメルケースとも言います。
クラス(プログラミングの抽象データ型の方)に使われることが多いです。
コンスタントケースGLOBAL_OBJECT単語を全て大文字記述する命名規約です。
単語をつなげる場合はアンダースコアを使用します。
PHPやjsにおいて、定数、グローバル変数、その他強い意味を持たせたい時に使われます。
スネークケースsnake_case単語の間をアンダーバーでつなぐ命名規約です。apiで返却されるjson objectのkeyなど、プログラム的なもので使われることが多いです。
ケバブケース
(チェインケース)
kebab-case単語の間をハイフンでつなぐ命名規約です。HTMLではclass名であったりファイル名に使うことが多いです。
_privateVar変数の最初にアンダースコア。PHPやjsにおいて、プライベート変数に使われます。

ちなみに、HTML・CSSの場合、Googleのガイドラインでは単語間をハイフンでつなぐケバブケースが推奨されているようです。
PHPやjsなどのプログラミングではハイフンがマイナス記号として認識されるので、変数などには使えません。
これを使うのが必ず正解!といったものはありませんが、チームでどのように扱うか話し合うことは重要です。

ファイル識別名

ファイル識別名は、サイト内にて使用する画像などの命名ルールになります。
HTMLなどのファイル名と同じように長くなりすぎてしまう場合は単語を1〜2個にしぼり、わかりやすく表現します。

識別名用途命名サンプル
bg_背景やボーダー用にリピートさせて使われる画像bg_dot_line01.gif
btn_ボタンとして使用される画像btn_contact01_on.png
ico_アイコンとして使われる画像ico_arrow01.png
bnr_バナーとして使われる画像bnr_ad_head01.jpg
h1〜h6<h1>タグなどの論理タグで囲まれる見出し画像h1_business01.jpg
tit_h1〜h6などに用途が限られない見出しの画像tit_about_sub01.jpg
pic_商品や人物、風景などの写真画像pic_products01.jpg
img_写真以外のイラストや図表などの画像img_glaph01.jpg

識別名はおおよそ3文字で表すことが多いです。
何文字でも構わないのですが、その画像がどういう用途で使用されている画像か?を判別しやすくするために、一定のルールに則って命名してください。

以上です。
どのブロックにおいても「これが必ずしも正解」というものはありません。
認識を合わせることで余計な確認作業を減らすことができ、バグやエラーの低減または、バグやエラーが発生した際に原因を突き止めやすくなるといった利点があります。
先方の企業が大きい場合予めコーディング規約などが定められている場合がありますが、定められていない場合でも先方にこのようなルールで記述しますと明言しておけば、安心して任せてもらえるかと思います。

少しでもクオリティの高い仕事に繋げるため、一度作ってみてはいかがでしょうか?

コメント

タイトルとURLをコピーしました