IT初心者の分かったメモ

3.1. HTML

HTMLでは、次のように記述します。

<!-- ここにコメントを書く -->

• コメント部分はブラウザには表示されません。
• HTML構造の確認メモなどに使うと便利です。
• ただし、開発者ツールなどでコメントは見えてしまうため、パスワードや個人情報などは絶対に書かないようにしましょう。

コメントアウトしていない場合

<p>この文章はブラウザに表示されます。</p>
<p>この文章も表示されます。</p>

コメントアウトした場合

<p>この文章はブラウザに表示されます。</p>
<!-- <p>この文章はコメントアウトされています。</p> -->

コメントアウトされた文章はF12キーの開発者ツールから確認することができます。

3.2. CSS

CSSでは、次のように記述します。

/* ここにコメントを書く */

• /*と*/の間に書いた内容は無視されます。
• 1行でも複数行でも使用できます。
• //はCSSでは使えません（構文エラーになります）。

コメントアウトしていない場合

.bg{
 background-color: #7fbfff;
 background-color: #ff7f7f;
}

コメントアウトした場合

.bg2{
 background-color: #7fbfff;
 /*background-color: #ff7f7f;*/
}

テーマのデザインを調整するときに、仮の設定を残しておくと後から思い出しやすくなります。

3.3. JavaScript

JavaScriptでは、次のように記述します。

// 1行コメント

/*
  複数行コメント
*/

• //は1行だけ有効です。
• /* ～ */は複数行に対応しています。
• 動作テスト中に一部の処理を止めたいときにも便利です。

コメントアウトしていない場合

const btntest = document.getElementById("btntest");
const msg = document.getElementById("msg");

btntest.addEventListener("click", function() {
 msg.textContent = "文章が変更されました！";
 alert("アラートがコメントアウトされていません");
 alert("アラートをコメントアウトしてください");
});

コメントアウトした場合

const btntest2 = document.getElementById("btntest2");
const msg2 = document.getElementById("msg2");

btntest2.addEventListener("click", function() {
 msg2.textContent = "文章が変更されました！";
 /*alert("アラートがコメントアウトされていません");
 alert("アラートをコメントアウトしてください");*/
});

3.4 PHP

WordPressのテーマファイル（特に functions.php や single.php）で最も登場するのがPHPです。PHPでは以下の3種類のコメントアウトが使えます。

// 1行コメント
# 1行コメント（もう一つの書き方）

/*
  複数行コメント
*/

• //と#は1行だけコメントアウトされます。
• /* ～ */ は複数行コメントアウトしたいときに使えます。

画像での紹介になりますが、PHPに限らずコメントアウトはコード内容の補足説明として使われる場面が多いです。