コーディング規約の作成

web制作を始めて約1年間。だいぶ自分でもスピード、質とともに向上してきたとは思うのですがソースの構成に時間がかかってしまう、、、

自分の中でもコーディングルールというものは大体決めていたのですが、やはり具体的に形にしたほうがいいということでコーディング規約を作成してみました!

参考サイト

作成にあたって参考にしたサイトは以下のとおりです。

HTML

SimpleBoxes | CSSとHTMLのコーディングガイドライン

コーディング規約の雛形として使用させて頂きました。

細かい基本的なことの定義がしてあり参考になります。

XHTMLコーディング規約 – 株式会社アイシーズ webコンサルティングcompany

株式会社アイシーズさんのコーディングルール。

わかりやすく記述してあり理解し安かったです。

HTML・CSSコーディングガイドライン | d-spica

こちらのサイトが一番参考になった気がします。

詳細まで書いてありわかりやすい。

HTMLソースコードの最適化|WEBマスターのための【SEOまとめ】

まぁ、SEOは避けては通れませんので一応。

まだまだSEOについては僕も勉強しなければいけません。

CSS

HTML/XHTMLマークアップ・CSSコーディングガイドライン | enoq(エノーク)

主にCSSについて参考にさせてもらいました。

ファイル階層などサンプルコードまで記載されていて勉強になりました。

CSSプロパティを記述する際の順番のサンプル|web bibo

プロパティの順番もどういう順番で記述するのか定義しとかないといけません。

CSS プロパティ記述順とフォントサイズ一覧 – p15.jp

かなり参考になりました!PDFでプロパティ記述順が書いてあるので見やすいです。

実際にコーディングの際、身につくまでは毎回このPDFをみて確認してました^^;

命名規則

id名やclass名に命名規則をつける – CSSデザインノート

CSSや画像の命名規則について : Web Design KOJIKA17

Class名とID名の命名規則 | Blog hamashun.com

ウェブサイトを作成するときの命名規則について考えてみた [Cool Web Window]

命名規則も苦労しました。うーん、、、どの方法がいいかは難しいです;

考察

 僕がコーディングする際に気をつけたいことは、「とにかくわかりやすく」です。

SOHOでの案件だとコーディングオンリーの仕事も結構あるので、できるだけ不特定多数の方に理解しやすいコーディングを心がけようと思いまして。

 またwebに掲載してある記事は古いものが多く、自分で考えながら作成する部分も必然的に多くなりました。
初心者の私にはまだまだ敷居が高かったです。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です