CSSコメントアウトの重要性とデザインサンプル

最近更新がかなり滞っていますが、アクセスは順調に伸びている僕です。今回はWEBを始めたばかりの方に向けてCSSのコメントアウトの重要性とデザインについて書いていきます。

最初の頃はコメントアウトなんてせずにずらずらと記述していましたが、メンテナンスする際に非常に読みにくい(特に他人から)CSSを書いていることに気づきました。 CSSに限らずコメントを書くことは非常に重要なので遠慮せずコメントアウトしていきましょう。

CSS コメントアウトの書き方

プログラミング言語によってコメントアウトの記述方法は異なるのですが、CSSは一行の場合は「// 内容」、複数行の場合は「/* 内容 */」という方法で記述します。

・一行の場合

・複数行の場合

上記の方法が基本的な書き方になります。ルールを守っていればあとは何を書いてもいいので自分なりにみやすいコメントアウトをデザインしてみましょう。下記にコメントアウトのデザインサンプルをいくつかご紹介しますので参考にしてみてください。

コメントアウト デザインサンプル

パターン1

パターン2

パターン3

パターン4

パターン5

僕はパターン4の方法を使用してCSSを記述しています。シンプルだけどうるさくない感じが好きです。自分が見やすいと思うものをピックアップして使用していただければと思います。人によってコメントアウトのデザインは異なりますが見やすければなんでもいいと思います。

メンテナンスを意識したコメントアウト

上記の方法でコメントアウトすれば、コメントがないよりかはメンテナンス性は上がります。ただ、闇雲にコメントを書くよりかはしっかりと構成組んで書いた方がより読みやすくメンテナンス性も上がります。使用している色やフォント、CSSの構造を最初に書くことで他の人が理解しやすいCSSにすることができます。

僕の例を紹介すると、

みたいな感じで書いてます。※スタイルは長くなるので省いてます。

これに正解はないですが書くときに意識してるのは誰が見てもわかることです。コメントアウトするのが面倒だと思う人もいるかもしれませんが、しない方がメンテナンスがしにくく、自分しかわからないのでよっぽど面倒なことになります。

しっかりとしたコメントを書くことがのちの自分を救うと思って(辞める時の引き継ぎとか説明がすくなくてすみます)、習慣にしましょう。一度ひな形をつくってしまえばあとはほぼコピペで大丈夫なのでさほど時間はとられないと思います。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。