コーディングする際の記述ルール

記事公開日:2017.11.21

最終更新日:2017.11.27

928 PV


他人が書いたソースコードって読み辛いですよね。下手するとエラーが現れることもあります。なので自分で組むときは好き勝手せず、コメントを入れたりして記述しましょう。
そこで今からHTMLとCSSのルールを紹介します。

HTMLに関するルール

最初にHTMLに関する記述ルールを紹介します。

タグは本来の使い方をする

ブロック要素には全部divを使用したり、liやpなどの本来の使い方を無視して作っていたりすることがあります。CSSでしっかり組めば、web上では問題なく見せれるのですが、HTMLはできる限り、しっかり意味をふまえてコーディングをしましょう。

例えば、リストではul、ol、liを使い分ける、pタグは文字だけに使用する、表はtableタグを使うなどです。

idセレクタの使用は最小限に留める

ページ内の大切な要素としてidは指定が先に効きます。しかし、1ページで1種類しか書けないなどの制約があります。最低限の共通要素やページ内リンクで必要な個所以外では極力使わない

無駄にクラスの乱用をしない

無計画にクラス名を使っていると、ソースコードがぐちゃぐちゃになり、メンテナンス性も落ちます。divやspanなどのタグやclassの継承セレクタを使って、なるべく簡潔なソースコードで記述しましょう。

clearfixのためだけのclassを使わない

よく使われるテクニックの中にclearfixがあると思いますが時々、HTML内にたくさんclearfixクラスを使用しているサイトがあります。これもソースコードが煩雑になり、追加や削除、修正などのメンテナンスも億劫になるため、できれば避けた方がいいです。

CSSに関するルール

では次に、cssに関するルールを見てみましょう。

CSSコードの値の指定はなるべく省略する

現在では、テキストの量が表示速度に影響することはなくなりました。
しかし、ファイルは軽いにこしたことはありません。HTMLコーディングをするなら、見やすくし且つ、なるべく軽量でシンプルなソースコードを目指しましょう。CSSでは、省略した記述も可能ですので、このような記述方法で統一し、シンプルで見やすいソースコードにしましょう。
汎用クラスを用いるのも良いですね。

ショートハンドを使用し、短いプロパティで定義する

CSSにはショートハンドという、より短く書く記述方法があります。ソースコードの単純化、軽量化の意味でも、以下のスタイルのようにショートハンドを使用した記述で統一しましょう。

悪い例

  • padding-top: 10px;
  • padding-right: 30px;
  • padding-left: 30px;
  • padding-bottom: 0px;

良い例

  • padding: 10px 30px 0;

プロパティは同じ順番で書く

CSSプロパティでは、プロパティを記述する順番に無関係に処理が実行されます。しかし、思いつきで記述していると、他人が見たときに分かりにくく、また記述した本人もあとから見たときに見づらいです。そのようなことを想定し、プロパティの順番は統一しておきましょう。

インデント、改行など一定のルールで行う

HTMLでもインデント(字下げ)の統一はよくいわれますが、CSSでもインデントや改行のルールは、他人が見やすく且つ、分かりやすいソースコードをにするためにできるだけ統一しましょう。インデントには様々な解釈がありますけど、大切なのは統一することです。

コメントの記述

コメントでは、「/**/」を使い、「//」は使わない。

javascriptに関するルール

次にJavaScriptに関する記述ルールを見てみましょう。

JavaScriptのライブラリはみだらに使わない。

最近はJavaScriptを使用しない静的なサイトは殆どないでしょう。
しかしながら、少しのことですぐライブラリを使うのはやめましょう。

汎用性重視のためライブラリには、そのサイトには必要ない処理がたくさんあります。他のJavaScriptとバッティングしたり、スペックの低い機械で処理が遅くなったりとちゃんとエラー処理がされていないまま配布されていることがあります。

デザインは、なるべくHTMLとCSSだけで対処し、どうしても難しい場合にだけJavaScriptを使うというように考えましょう。

metaに関するルール

最後にmetaに関する記述ルールを見てみましょう。

エンコード設定

ソースコードのエンコードはUTF-8(BOMなし)を使用する。
UTF-8とは、世界的に大変人気な文字コードで、ユニコード用の符号化方式のひとつです。

まとめ

上記以外にも細かいルールがあり作業効率を考え、上記の通りにしないこともあります。
しかし、どんな場合でも意識したいのは、単にブラウザで見えればいいという考えでなく、ソースコードを触る他の人などへの配慮もし、組もうという考えです。みなさんもコーディングルールを守り、楽しくコーディングしていきましょう。

このエントリーをはてなブックマークに追加

筆者

Y.Morishita

Bigmac inc. 制作部所属 所属。2017年4月にBigmac inc.に入社。 主にコーディングを担当しています。 一人前にはまだまだ程遠いひよっこですが、早く一人前になるために勉強の日々です。 これからもっともっと知識を増やし、周りに頼られるような存在になりたいです。 趣味は、音楽鑑賞でライブやフェスが生きがいです。 この前行ったフェスでは、左足を負傷したけどとても充実した二日間でした。漫画も大好きです。

筆者が最近執筆した記事