【CSS】コメントアウトを使うのは割と重要な話【初心者向け】

こんにちは朱夏です。

今回は、CSSのコメントアウトを使いましょうという話を書いていきたいと思います。

朱夏

コメントアウトって何に使うんだろう？

まとめて複数行をコメントアウトする事もできるのかな？

コメントアウトは、実行結果に一切影響を与えないでコメントを残す事が出来ます。
基本的な書き方や、私の経験から、具体的なコメントアウトの使い道などを紹介します。

それではいってみましょう。

[もくじ]
基本的なコメントアウトの書き方
具体的なコメントアウトの使い道
VSCodeでコメントアウトする時のショートカット
あとがき

基本的なコメントアウトの書き方はこんな感じです。

/* ここに書いたテキストがコメントアウトです */

コメントアウトしたいテキストの初めに「/*」を、終わりに「*/」を書くことで、テキストがコメントアウトされます。

終わりの「*/」を書くまでは全てコメントアウトされていくので、複数行を一度にコメントアウトする事が出来ます。

/* ここに書かれた文字は
全て
コメントアウト
されます(´・ω・｀) */

これで好きなだけコメントアウトを書く事が出来ますね。

私の経験上、コメントアウトの使い道は主に以下の3つです。

それぞれの使い方について説明します。

これが基本的な使い方になるかと思います。

例えば、「ここはナビゲーションバーに適用するスタイルが書かれています」だとか、「ページ全体のフォントサイズを調整する時はここを修正する」とかの情報を残しておくことで、次に見た時にどこに何が書かれているか一目で解ります。

コメントアウトは日本語で書いてもOKなので、英数字ばかりのコードが苦手な人は、コメントアウトをしっかり残しておくといいと思います。

コードの説明文の延長線の話になりますが、コードを書く場所をコメントで指示しておくことで、後々コードを書くときに迷わなくなります。

例えば、PC用のコードを書く場所、スマホ用のコードを書く場所に目印としてコメントを残しておけば、スマホ対応用のコードの書き分けの時に迷わなくても済みます。

CSSでコードを書いていると、たまにこんな事を思う時があります。

朱夏

一度スタイルの充たっていない状態を確認したいな。
別のスタイルを充てた場合と比較してみたい。

こんな時に使えるのが、「コードの一時退避」です。
一時退避したいコードを「/*」と「*/」で括ると、コメントとして扱われるので、実質コードを無効化する事が出来ます。

この状態で、スタイル無しの状態を確認したり、別のスタイルを試してみたりする事が出来ます。

スタイルを色々試す段階では、毎回書き換えていると結構な時間がかかってしまいます。
この「コードの一時退避」を使えば、コードを元に戻すのもコメントアウトの解除だけですぐ戻せるので簡単です。

私がwebコーディングでメインに使っているエディタVSCodeでは、コメントアウトを書くときのショートカットが用意されています。

ショートカット：Ctrl + /

何も書かれていない行でショートカットを使うと、コメントアウトの開始と終了の部分だけ表示されます。
コメントアウトしたい行を選択してショートカットを使用すると、一発でコメントアウトされます。

このショートカットは行単位でコメントアウトするものなので、行の途中からコメントアウトしたい場合などは、手動でコメントアウトする必要があります。

というわけで、CSSのコメントアウトについて書いてみました。

今回のまとめはこちら。

過去の私はサイトの内容を更新する時に、毎回「このコードどういう意味だっけ？」となり、ググって時間を消費していました。
コメントを残しておけば一瞬で内容を理解できるので、他の人が見ても解りやすいようにコメントを残しておくことをお勧めします。

今回は以上です。
次回もよろしくお願いします。