最近更新がかなり滞っていますが、アクセスは順調に伸びている僕です。今回はWEBを始めたばかりの方に向けてCSSのコメントアウトの重要性とデザインについて書いていきます。
最初の頃はコメントアウトなんてせずにずらずらと記述していましたが、メンテナンスする際に非常に読みにくい（特に他人から）CSSを書いていることに気づきました。 CSSに限らずコメントを書くことは非常に重要なので遠慮せずコメントアウトしていきましょう。
CSS コメントアウトの書き方
プログラミング言語によってコメントアウトの記述方法は異なるのですが、CSSは一行の場合は「// 内容」、複数行の場合は「/* 内容 */」という方法で記述します。
・一行の場合
div{
width : 200px; // コメント内容
height : 200px; // コメント内容
margin : 20px; // コメント内容
}
・複数行の場合
/*
コメント内容
コメント内容
コメント内容
*/
div{
width : 200px;
height : 200px;
margin : 20px;
}
上記の方法が基本的な書き方になります。ルールを守っていればあとは何を書いてもいいので自分なりにみやすいコメントアウトをデザインしてみましょう。下記にコメントアウトのデザインサンプルをいくつかご紹介しますので参考にしてみてください。
コメントアウト デザインサンプル
パターン1
/******************************** 大見出し ********************************/ /********** 小見出し **********/
パターン2
/* * * 大見出し * */ /* 小見出し */
パターン3
/*------------------------------- 大見出し -------------------------------*/ /*---------- 小見出し ----------*/
パターン4
/*=============================== 大見出し ================================*/ /* 小見出し ================================*/
パターン5
/* ################################# 大見出し ################################# */ /*############ 小見出し ############*/
僕はパターン4の方法を使用してCSSを記述しています。シンプルだけどうるさくない感じが好きです。自分が見やすいと思うものをピックアップして使用していただければと思います。人によってコメントアウトのデザインは異なりますが見やすければなんでもいいと思います。
メンテナンスを意識したコメントアウト
上記の方法でコメントアウトすれば、コメントがないよりかはメンテナンス性は上がります。ただ、闇雲にコメントを書くよりかはしっかりと構成組んで書いた方がより読みやすくメンテナンス性も上がります。使用している色やフォント、CSSの構造を最初に書くことで他の人が理解しやすいCSSにすることができます。
僕の例を紹介すると、
/*==================================== ---------------------------------- Color ---------------------------------- Main : #e71a0f Accent : #790000 ---------------------------------- font ---------------------------------- Noto Sans JP ---------------------------------- Structure ---------------------------------- 0. General 1. Header 1.1 General Header 1.2 Mobile Header 2. Main 3. Footer 4. Page 4.1 Service 4.2 FAQ 4.3 About Us 4.4 Customer Voices 4.5 News 4.6 Hiring 4.7 Contact Us 5. Contact Form 6. 404 7. Media Query 7.1 1080px 7.2 768px 7.3 480px ---------------------------------- Change Log ---------------------------------- -2016/9/9 Fixed header problem ====================================*/ /*==================================== 0. General ====================================*/ /*==================================== 1. Header ====================================*/ /* 1.1 General Header ====================================*/
みたいな感じで書いてます。※スタイルは長くなるので省いてます。
これに正解はないですが書くときに意識してるのは誰が見てもわかることです。コメントアウトするのが面倒だと思う人もいるかもしれませんが、しない方がメンテナンスがしにくく、自分しかわからないのでよっぽど面倒なことになります。
しっかりとしたコメントを書くことがのちの自分を救うと思って（辞める時の引き継ぎとか説明がすくなくてすみます）、習慣にしましょう。一度ひな形をつくってしまえばあとはほぼコピペで大丈夫なのでさほど時間はとられないと思います。
では。
