HTMLとCSSのコーディングルールとは？

「コーディングルール」という言葉を聞いたことはあるでしょうか。
Webページの制作には必ずコーディングがされています。そして、コーディングにはコーディングルールというものがあります。
今回はコーディングの意味と、Webページ作成時のルールを紹介していきます。

コーダーとコーディングとは

まずは「コーディング」の意味について紹介します。
コーディングには「コーダー」という人が必要になります。コーダーとはWebデザイナー、クライアントなどがデザインしたものをWeb上に表示し、閲覧・動作するように構築する方のことです。
コーディングというのは、コーダーがHTMLやCSSを使用してコードを書き、Webサイトを作成する作業のことを言います。

コーディングルールとは

コーディングルールというのはコーディング規約とも呼ばれ、コーディングする際にプログラマーが従うべき規則のことです。

コーディング規約を守ることで、品質の安定、意思疎通のためにかかるコスト(コミュニケーションコスト)の削減、可読性の向上といったメリットがあります。
可読性の向上が必要な理由は、自分がコーディングしたデータをのちに他の人がメンテナンスすることがあるためです。その際に内容が読みづらいと、余計に時間がかかってしまいます。

HTMLのコーディングルールとは

サイト制作に必要となる言語、HTMLのコーディングルールについて紹介します。
HTMLとは、テキストボックスや文字、表、リンクなどといったページの要素や構造を指定するための言語です。

バージョンはHTML5を使用する

HTML5とはHTMLのバージョン5のことです。HTML5に設定することで、以前のバージョンと違ってシンプルなタグを使用することができ、さらに検索エンジンなどに対し、より正確に文字構造を伝えることができるようになります。

DOCTYPE宣言(文書型宣言)をする

「!DOCTYPE」文書型定義(DTD)を宣言するものです。ブラウザを基準準拠モードで動作させ、表示違いをなくすために必要です。

「p」タグに「h1」などの見出しタグを入れない。

HTMLにおける段落とは文章のひとかたまりです。「p」でかこまれているものは文章になり、一つの段落ということになります。
一方「h1」「h2」とは見出しタグであり、文章の中に見出しを入れるなどといった、用法が違う行為は様々な問題となるため注意が必要となります。

できるだけタグを省略する

一部のタグは開始したと同時に自動的にタグが閉じられます。
省略することでメニュー作成時に予期しないマージンが入ってしまうことを防ぎます。

【対象タグ】

「li」「dt」「dd」「p」「tr」「td」「th」「rt」「rp」「optgroup」「option」「thread」「tfoot」

閉じる必要がないタグは閉じてはいけない

閉じてしまうとエラーになってしまうタグもあります。予期できない問題が発生する場合がありますので、閉じないようにしましょう。

【対象タグ】

「!– –」「br」「hr」「img」「link」「meta」「input」「embed」「area」「base」「col」「ink」…

classを使う場合はタグのすぐ後ろに書き込む

classはグループを作成するときに使います。

classはタグのすぐ後ろ（「div class=”example”」「/div」）に記述しなければ反映されません。

また、class名には、半角の英数字・ハイフン（ – ）・アンダーバー（ _ ）が使用できます。頭文字は必ずアルファベットにしましょう。

HTML上でスタイリングを行わない

HTML上でスタイリングを行うというのは、HTMLに色の命令などを書くということです。
そうすることによって、自分以外が修正する際に、CSSとHTMLを行き来が複雑だと感じてしまいます。CSSの邪魔にもなってしまうので、極力避けるようにしましょう。

CSSのコーディングルールとは

サイト制作に必要で、HTMLと合わせて広く利用されている代表的な言葉、CSSのコーディングルールについても紹介します。

CSSとは、HTMLで作った要素を装飾する言語です。ページのデザインを変更するために用いられます。

「{」の位置は統一させる

タグ名またはクラス名の後に空白を入れ「 { 」を入れると、表記が統一され、読みやすくなります。

例）
.example {
⋮
}

プロパティ名の後に空白を入れる

「font-size」と「color」を記載する場合、詰まっていると見づらくなってしまいます。空白を入れることで、全体的に統一され読みやすくなります。

例）
.example {
font-size:10px;
color:red;
position: relative;
top: 7rem;
}

複数のセクタを使う場合セレクタ毎に行を落とす

複数のセレクタを使う場合には、セレクタのたびに改行するようにしましょう。
これも見やすくするためです。

例）
.example1,
.example2,
.example3 {
⋮
}

!importantは使わない

!importantとは、使用すると合わせて使用したプロパティを最優先に合わせてくれる命令になります。これを使用するとCSSでの命令が効かなくなりメンテナンス性が低下するため、できる限り使わないようにしましょう。

idやclass名を数字から始めない

id、classの名前を数字から始めると反映されません。使用するには数字をエスケープする方法があります。
ミスにつながるため、どうしても必要な場合を覗き数字を使わない方がいいでしょう

わかりやすい名前をつける

classの名前に「aaa」「web」などを使うと、HTMLやCSSの管理が難しくなります。メンテナンスの際紛らわしくなることを防ぐため、それぞれの名前にはどこを指しているのかわかる名前をつけましょう。

コーディングルールを守ろう！

Webページは組んで終了ではありません。実際に表示される見た目も重要ですが、メンテナンス性を考えた中身も重要です。

コーディングルールを守り、誰が触ってもわかりやすいと思われるコーダーになれるよう心がけましょう！