低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

ソースを見やすくするためのスタイルシート・コードフォーマット

スタイルシートを作成するときに、ただスタイルを羅列していくだけでは、後から見てどこに何が書いてあるのかわからず、メンテナンス性が非常に悪くなってしまいます。そこで、今回はスタイルシートを書くときに気を付けたいことをご紹介します。

半角スペースを使う

スタイル名とスタイルプロパティの後ろに一つ入れます。

×

1.text{
2    text-align:center;
3}

1.text {
2    text-align: center;
3}

改行をする

セレクタ、スタイルプロパティごとに改行を入れます。

×

01.text01 {text-align: left;}
02.text02 {text-align: right; color: #000000;}
03.text03 {text-align: left;}
04.text04 {text-align: right; color: #000000; margin: 0 10px 0 20px;}
05.text05 {text-align: left; margin: 0 10px 0 20px;}
06.text06 {text-align: right; color: #000000; margin: 0 10px 0 20px; font-weight: bold;}
07.text07 {text-align: left; margin: 0 10px 0 20px;}
08.text08 {text-align: right; color: #000000; margin: 0 10px 0 20px;}
09.text09 {text-align: left;}
10.text10 {text-align: right; color: #000000; margin: 0 10px 0 20px;}

01.text01 {
02    text-align: left;
03}
04 
05.text02 {
06    text-align: right;
07    color: #000000;
08}
09 
10.text03 {
11    text-align: left;
12}
13 
14.text04 {
15    text-align: right;
16    color: #000000;
17    margin: 0 10px 0 20px;
18}
19 
20.text05 {
21    text-align: left;
22    margin: 0 10px 0 20px;
23}
24 
25.text06 {
26    text-align: right;
27    color: #000000;
28    margin: 0 10px 0 20px;
29    font-weight: bold;
30}
31 
32.text07 {
33    text-align: left;
34    margin: 0 10px 0 20px;
35}
36 
37.text08 {
38    text-align: right;
39    color: #000000;
40    margin: 0 10px 0 20px;
41}
42 
43.text09 {
44    text-align: left;
45}
46 
47.text10 {
48    text-align: right;
49    color: #000000;
50    margin: 0 10px 0 20px;
51}

インデントを挿入する

スタイルプロパティの前に一つ入れます。CSSハックの前にさらにもう一つ入れると、全体として見やすくなります。

×

1.text {
2text-align: center;
3color: #000000;
4margin: 0 10px 0 20px;
5}
6* html .text{
7text-align: left;
8}

1.text {
2    text-align: center;
3    color: #000000;
4    margin: 0 10px 0 20px;
5}
6    * html .text{
7        text-align: left;
8    }

CSSハックの前にもう一つインデントを入れる理由は、それがCSSハックであると一目で判別できるようになるためです。ハックも含め、すべて同じインデントレベルでスタイルを記述すると、ハックであると気付かずに、通常のスタイルだと思って記入ミスをしてしまう可能性があります。

コメントを入れる

編集するときのためのガイドとなります。
大コメントと小コメントにわけ、大コメントは基本設定やヘッダー・コンテンツなどの大枠の説明に用い、小コメントはそれ以外に用います。

01/*-----------------------------
02  基本設定
03------------------------------*/
04body {
05    
06}
07/* 文字を赤くするとき */
08.text {
09    color: red;
10}

以上のように、ほんの少し気を付けるだけで、ソースの見やすさは格段に向上します。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ