【CSS入門】コメントの役割とコードの視認性

CSSの「コメントの役割」と「コードの視認性」について書きます。まず、コメントの役割を再確認します。その上で、コメントをデザイン化してコードを読みやすくしていくことを考えます。

コメントの役割

• スタイルを無効にする
• ファイル内にメモを残す

コメントは、一時的にスタイルを無効にして、デザインを見比べるときに用います。また、メモをコメントとして残すときに使います。

CSSコードの視認性

CSSの記述量が多くなると、どこに何を書いているのか分かりにくくなります。そこで、メモをコメントとして残してコードを見やすくします。

コメントのデザイン化

コメントの視認性を上げるため、コメントをデザイン化します。CSSを追加していくと以下のように、コードが縦長になります。

#wrapper{
...
}
#header{
...
}
.title{
...
}
.logo{
...
}
#main{
...
}
#sidebar{
...
}
#footer{
...
}

このくらいの記述量ですとスクロールしなくてもコード全体が見えるので問題ないですが、細かいスタイルを更に追記していくともっと長くなり画面に収まらなくなります。コードが長くなると分かりにくくなるで、コメントで区切ってブロック分けします。

/*-----------------------------------------------*/
/* 全体                                          */
/*-----------------------------------------------*/
#wrapper{
...
}
/*-----------------------------------------------*/
/* ヘッダー                                      */
/*-----------------------------------------------*/
#header{
...
}
.title{
...
}
/* ロゴ */
.logo{
...
}
/*-----------------------------------------------*/
/* メインコンテンツ                              */
/*-----------------------------------------------*/
#main{
...
}
/*-----------------------------------------------*/
/* サイドバー                                    */
/*-----------------------------------------------*/
#sidebar{
...
}
/*-----------------------------------------------*/
/* フッター                                      */
/*-----------------------------------------------*/
#footer{
...
}

区切りができたことで、コードの読みやすさが改善されたと思います。

ただし、この書き方ですとスタイルを必ず該当するブロックの中に追記しないと破綻します。記述のルールを守らないと効果が出ません。記述量の少ないうちはこの書き方で良いと思いますが、多くなったら他の書き方を模索した方が良いです。

CSSが煩雑になってきたら考えること

• コードを整理する
• 不要なコードを削除する
• コードを別ファイルに分ける

自分や他の人にとって読みやすいコードにするために、上記のようなことをします。コードが読みやすいと内容を早く理解できるので、どこに何を書いたら良いのかが分かります。

まとめ

• コメントの役割を再確認した
• コードの視認性を上げるため、コメントをデザイン化した
• CSSが煩雑になってきたらコードを整理する