コーディング規約

Webデザイン初心者のための、コーディング規約ってなに!?


Webデザインを始めて間もない頃は、デザイン性を高めるあまりコーダーの負担を考えなかったり、あまりに実現が難しいものも組み上げて貰えるんじゃないかと幻想を抱いてしまいます。

会社やプロジェクトによって、Webデザイナーの業務の範囲は異なってきますが、ひと通り知っておくと分業になった時にコミュニケーションが取りやすくプロジェクトがスムーズに進みます。
その中でもコーディングにおけるガイドライン。
別名コーディング規約とも言われておりますが、HTML/CSS、Javascriptなど、Webに関係する言語だけでなくプログラム全般に言えることですが、コーディングにおける記述の方式など統一されている方が、後々のメンテナンスがしやすく、誰が見たとしても、どういったことを行っているのか一目瞭然になります。

あらかじめ取り決められたコーディング規約を理解しよう

HTML/CSSは特に、どのような書き方をしたとしてもブラウザ上で動いてしまったら正解だと感じてしまいます。しかしそれは、自分では当たり前のような書き方だったとしても、他の人から見たら…なんじゃこりゃ?!

と思ってしまうようなソースコードも多いです。

ビックリコード

自由に書かせてしまったら、バラバラになってしまいがちなコーディング業務ですが、会社やプロジェクトによって、あらかじめコーディング規約を決めておくことで統一感が出てきます。

統一感を出すことで、今後のメンテナンスや拡張など容易にできるようになってきます。また、途中からプロジェクトに参加した方(会社の場合、中途採用の方)がスムーズに入っていけることも重要になってきます。

つまり、作業工数の削減や作業の効率化、品質の確保、ノウハウの体系化など長く運営していく過程でかなりのメリットがあります。そのため、そのプロジェクトやチームにおいてコーディング規約。コーディングのために決まり事を決めておくと便利です。

Webデザイン初心者の方でも、ソースコードを触ることが出てきます。その際に、コーディング規約を理解していることが重要になってきます。書き方のガイドラインは様々だったりするのでコーディング規約という、ソースコード記述の法則があるということを知っておくことが大切です。

なお、Googleや他のウェブ制作会社など、独自にコーディング規約を提唱しているところもあるので、探してみてもいいかもしれません。

 

コーディング規約ってソースコードだけのガイドライン?

実際にコーディング規約を策定する場合、どのような規則を用いるのか知っておくと便利なのでまとめてみました。ここに上げるのは、参考までの一例ですので他にも決められていることがあるりますので参考にして下さい。

コーディング規約の一例

ディレクトリ構造

Webデザイン初心者は、どこまでディレクトリ構造を意識しているかわかりませんが、運営をしていく上で、ディレクトが整理されている必要があります。

デスクの引き出しを思い浮かべて下さい。文房具や書類、書籍(資料)、お菓子などバラバラに格納されている場合、特定のものを探そうとしたとしてもすぐに見つからないことがあります。一人の人だったらまだしも、複数人の人がバラバラにものを入れてしまったとしたら、大変ですよね。

プロジェクトをスタートする際、ディレクトリ構造をしっかり決めることで整理されたWebサイトを構築することが出来ます。

命名規則

ディレクトリ構造と同様に、ファイルの命名規則もからかじめ決めておくといいでしょう。

ディレクトリ名、HTMLファイル名、画像ファイル、CSSクラス名など。連番の場合は何桁の数字を採用するか、単語と単語の間をつなぐ記号は、何を使用するか。ファイル名はどのような名称にするかなど。

HTMLコーディングガイドライン

文字コードは、UTF-8(BOMなし)で記述し、改行コードはCR+LFとする。タグ及び属性は、小文字で記述します。属性値は、ダブルコーテーションで囲む。コードに対し、インデントを行わないことや終了タグに応じて、そのブロックにおける内容のコメントを記述します。
パスの記述は相対パスで記述したり、titleやmeta要素の書き方など。

細かく決められているところは多いです。

CSSコーディングガイドライン

文字コードは、HTMLに合わせます。基本的に、CSSの記述はHTMLファイルに直接書かず、外部CSSより読み込みます。

セットフォーマットのルールも細かく決められています。プロパティがひとつの場合は1行で記述しても構わないと思いますが、プロパティ1つにつき1行取り、セレクタ名と綴じカッコで1行ずつ取るなど。細かくルール付けされています。

検証用ブラウザ

ウェブブラウザによって、表示に微妙な差が出てきます。表示が崩れてないかなども含めて、いくつかのブラウザであらかじめ検証しておくといいでしょう。

Windowsの場合、Internet Explorer8以降、Chrome 最新版、Firefox 最新版。
Macintoshの場合、Safari 最新版

これらでの検証は必須です。

 

まとめ

Webデザイナー初心者でも、人での関係でコーディングを任されることは頻繁にあります。全く知らないところから入っていくよりも、事前に情報をキャッチしてからプロジェクトに入るとスムーズに業務が出来ていいです。

自分でコーデイlング規約を作ってみるのが一番勉強になるかもしれませんね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article境界線の代わりに使いたいオシャレなフレーム素材まとめ