コーディングは楽しい！私がコーディングで気をつけている事

公開日：2016.07.05

最終更新日：2016.07.05

1 コーディングが好きな私のマイルール

コーディングが好きな私のマイルール

どうも、WEBデザイナーのぺとらです。
実は私、WEBデザイナーと言っておりますが、コーディングの方が大好きなんです。

記述したスタイルが画面に反映される所や、CSS自体が可愛くて堪りません！

CSS擬人化してアニメ化すればいいのに……と、思ってしまうぐらいです。
今日はそんなコーディングのお話、私がコーディングで気をつけている事について紹介していきたいと思います。

誰が見ても分かる設計にしよう

人のソース触るの苦手だな、うわぁこんなにもクラスが乱雑している……なんて事ありませんか？
汚くてごちゃごちゃなをソース見るのは誰だって気分が良くないし、触りたくもありませんよね。

なので出来る限り、HTMLやCSSは他の人が見ても分かるように、コメントをつけたり、きちんとしたインデントをつけて見やすさと理解しやすい様に意識しています。

自分も次に触るときに、あのクラスどうなってたんだっけ？とかなっちゃいますからね。
WEBサイトは自分の子供の様なもの！愛を込めて構築していきましょう。

分かりやすい名前のID名･クラス名をつけよう

ある程度、ID名･クラス名はそのブロックのコンテンツに合わせた名前にしておくと、後々修正や改修が必要になった時に便利ですよね。

例えば私ならヘッダーのh1には「h_h1」、フッターのメニューには「f_menu」等、部分の頭文字を先頭につけたり、このサイトについて等のページのコンテンツボックスに対しては「about_box」と、つけたりしています。

もちろんCSS側でもコメントアウトで、どこのコンテンツに当たるのかを記述して置いたり、HTMLのソース側でもここからここまでが、このコンテンツの範囲だよというのをコメントアウトしています。

一定のCSS記述は統一しよう

私だけじゃないと思うんですが、CSSも綺麗に統一されている方がいいと思いませんか？
実際に見てもらった方が早いと思います。

【統一を意識した方】

.box {
	width: 100px;
	height: 100px;
	margin: 10px auto;
	padding: 10px;
}
.about {
	width: 200px;
	height: 200px;
	margin: 20px auto;
	padding: 10px 5px;
}

【統一を意識しない方】

.box {
	height: 100px;
	width: 100px;
	margin: 10px auto;
	padding: 10px;
}
.about {
	margin: 20px auto;
	width: 200px;
	padding: 10px 5px 10px 5px;
	height: 200px;
}

寛大な私も、すいませんが殴りたくなります。
統一を意識しない方を見ていると整理したくて堪りません。
目でいちいち探してしまうので、それだったら最初から、記述する並びを意識して自分ルールで書いておくほうがましですよね。
（社内で記述ルールがある場合は、そちらを優先してもらえたらいいと思います）

使いまわせる所と使いまわさない部分は慎重に

使いまわせる共通のCSSはまとめて書いておくと、便利です。
例えばこんな風に、見出しやボックス幅などが決まっている場合ですね。

/*見出し*/
.big_ttl {
	width: 500px;
	padding:10px 15px;
	color: #000;
}
/*共通ボックス*/
.all_box {
	width: 500px;
	margin:0 auto 15px auto;
	background: #f7f7f7;
}

いちいち共通の素材を作っては、そこまで移動して書き足す行為が必要かもしれませんが、使える共通箇所はまとめておいたほうが、後々絶対楽ですからね。
逆にわざわざ共通にしなくてもいい部分は、そこまで徹底して細かく作らなくてもいいと思います。
使いまわせる所と使いまわさない部分は慎重に、後々の事を考えたコーディングを心がけたいですね。