今回は、「CSSコードのコメントアウトのやり方」について解説していきます。

コメントアウトは実際の業務でも頻繁に使います。

コーディング初心者で分からない人は是非理解しておきましょう！

コメントアウトとは？

そもそも、コメントアウトとはなんでしょうか？

コメントアウトとは、ソースコード上にコードの処理のメモや注意書きを残しておくことです。

コメントアウトがあることで、他の人が書いたソースコードを理解することが出来たり、チームメンバーにソースコードについて注意書きや共有ができます。

ちなみに、コメントアウトしたコードはブラウザで表示されることはありません。

CSSコードのコメントアウトのやり方について

それでは「CSSコードのコメントアウトのやり方」を見ていきましょう！

色々なパターンがあるので、是非コピペして試してみてください。

1行のコメントアウト

h1 {
    text-align: center;/*文字を中央寄せにする*/
}

コメントアウトをする時は、「/* ここにコメントを書く */」のように記号で囲います。

上記のように、コードの内容をコメントで残しておくことができます。

複数行のコメントアウト

/*
複数行
のコメントを
書くことができます
*/

複数行のコメントアウトをすることもできます。

上記のように、文章を改行してコメントアウトすることもできます。

セクションごとのコメントアウト

/* -----------------------
見出し
----------------------- */

.heading {
    font-size: 20px;
}


/* -----------------------
レイアウト
----------------------- */

.container {
    max-width: 1000px;
}

WEBサイトはいくつかのセクションの集まりで構成されています。

セクションごとにコメントアウトをすることによって、どのセクションのCSSか一目で理解しやすくなります。

CSSのコードを丸ごとコメントアウト

/*
h1 {
    text-align: center;
}
*/

CSSのコードを丸ごとコメントアウトにすることもできます。

念の為に前のCSSを残しつつ、新しいCSSコードを試す際に使えます。

コメントアウトのショートカットキー

VSCodeなどのエディタでは、WindowsとMacにそれぞれコメントアウトするためのショートカットキーが存在します。

ショートカットキーの方が簡単にコメントアウトをすることができるので、おすすめです。

まとめ

以上が、「CSSコードのコメントアウトのやり方」でした。

是非試してみてください。