HTML､CSS､JavaScript､PHP､Python､Rubyコメントアウトやり方タグの書き方

Ruby, Python, PHP, JavaScript, HTML・CSS

Webサイト制作やシステム開発の現場で必ず目にするコメントアウト。
正しく理解して使いこなすことで、コードの読みやすさや開発効率は劇的に向上します。

しかし、コメントアウトは単なる「メモ書き」ではありません。

使い方を誤ると、
・コードが動かなくなる
・レイアウトが崩れる
・バグの原因になる
・最悪の場合、機密情報が全世界に丸見えになる
といった深刻なトラブルを引き起こすこともあります。

特にフロントエンド（HTML / CSS / JavaScript）のコメントアウトは、ソース表示で誰でも閲覧できるため、「パスワード」「APIキー」「内部メモ」などを不用意に書くと、情報漏えいの原因になります。

ここでは、HTML / CSS / JavaScript / PHP / Python / Ruby の複数行・一行コメントアウトやり方、コメントアウトタグの書き方、コメントアウト時の注意点まで徹底解説します。

Contents

1 コメントアウトとは？
- 1.1 ■「コメントアウト」と「非表示」の決定的な違い
2 コメントアウトの目的
3 コメントのやり方・コメントタグの書き方
- 3.1 主要言語のコメントアウト書き方一覧表
- 3.2 コメントアウトのやり方・書き方（言語別サンプルコード）
4 コメントアウトの注意点

コメントアウトとは？

コメントアウトとは、ソースコード上に書かれた記述を、ブラウザやシステムにプログラムとして「実行させない（無視させる）」ための処理です。

コメントアウトされた部分はプログラムの動作に一切影響を与えないため、
・コードの補足説明（メモ）
・一時的な機能の停止
・後で使うコードの保管
といった目的で広く使われています。

■「コメントアウト」と「非表示」の決定的な違い

Web制作初心者が特に混同しやすいのが、「コメントアウト」とCSSなどによる「非表示」の違いです。
これらは仕組みがまったく異なります。

コメントアウト / 非表示 / DOM削除の比較

手法	ブラウザの処理	ソース表示での見え方	主な目的
コメントアウト	プログラムとして完全に無視（HTML以外は画面に読み込まれない）	HTML/CSS/JavaScriptは丸見え（PHP/Python/Rubyは非表示）	開発時のメモ、コードの一時保存
CSSの非表示（display:none 等）	画面には映らないが、ブラウザはコードを読み込んで処理	完全に丸見え	レイアウト調整、レスポンシブ対応
JavaScriptのDOM削除（remove() 等）	一度読み込んだ後、HTMLから要素を完全に削除	削除された要素は見えない	動的な画面の書き換え

つまり、コメントアウトは「そもそも処理されない」という点で、非表示とは根本的に異なる仕組みです。

コメントアウトの目的

開発において、コメントアウトを行う目的は大きく分けて5つあります。

① 修正前のコードの一時保存（バックアップ・デバッグ）
コードを書き換える際、古いコードを削除してしまうと、不具合が起きたときに元に戻せなくなるリスクがあります。

変更前のコードをコメントアウトして残しておくことで、
・すぐに元の状態へ戻せる
・比較しながらデバッグできる
・変更履歴を簡易的に残せる
といったメリットがあります。

② コードの可読性・保守性の向上
コメントアウトは、単なる「無効化」だけでなく、コードの意図を説明するメモとしても重要です。

例：
・「なぜこの処理を書いたのか」
・「このブロックは何を表しているのか」
・「この値は仕様上変更不可」
こうした情報を残しておくことで、

・数ヶ月後の自分
・一緒に働くチームメンバー
がコードを理解しやすくなり、保守性が大幅に向上します。

③ 特定の要素の非表示（検証用）
デザインや動作確認のために、一時的に特定の要素を非表示にしたい場面があります。
コードを削除してしまうと復元が面倒ですが、コメントアウトならワンタッチで表示・非表示を切り替えできます。

例：
・バナーの表示確認
・一時的にフォームを隠す
・レイアウト調整の検証

④ 仕様の伝達や注意書き（チーム開発）
チーム開発では、コード上で仕様や注意点を共有することがよくあります。

例：
・「ここから下は編集禁止」
・「この数値は変更しないでください」
・「この処理は API の仕様上必要」

コメントアウトを使うことで、コードと仕様を一体化して管理できるため、伝達漏れを防げます。

⑤ 期間限定イベントなどのコード使い回し（効率化）
定期的に行われるイベントやキャンペーンでは、毎回同じコードを再利用することが多いです。

例：
・季節イベントの特設バナー
・期間限定セールの告知
・キャンペーン用の HTML ブロック
こうしたコードをコメントアウトで残しておけば、

・必要なときにすぐ復活
・毎回書き直す手間が不要
・作業効率が大幅にアップ
といったメリットがあります。

コメントのやり方・コメントタグの書き方

主要言語のコメントアウト書き方一覧表

言語	1行コメントアウトの書き方	複数行コメントアウトの書き方
HTML	<!`--` コメント `--`>	<!`--` コメント `--`>
CSS	/* コメント */	/* コメント */
JavaScript	// コメント	/* コメント */
PHP	// コメントまたは # コメント	/* コメント */
Ruby	# コメント	=begin コメント =end
Python	# コメント	“”” コメント “””

コメントアウトのやり方・書き方（言語別サンプルコード）

各言語における具体的な書き方を解説します。
「半角スペースを空けるべきか」「改行が必要か」という、初心者が最もエラーを起こしやすい細かなルールまで網羅しています。

■ HTML のコメントアウト

HTMLでは、コメントアウトしたい文言を「<!--」と「-->」で囲みます。
ブラウザはこの範囲を読み飛ばすため、画面には一切表示されません。
table要素の列だけ・行だけなどのコメントアウトも可能です。

● 基本構文

<!-- コメント -->

● スペースのルール
HTMLのコメントアウトは、記号「--」の前後にスペースがあってもなくても動作します。
・スペースあり → 見やすいので一般的
・スペースなし → 動作は問題なし

推奨：記号の間に半角スペースを1つ入れる

⭕<!-- 標準的な書き方（見やすさのために半角スペースを空ける） -->
⭕<!--スペースを詰めても問題ありません-->

● 改行のルール
HTMLのコメントアウトは、1行でも複数行でも同じ記号を使うため、途中で改行してもエラーになりません。

⭕<!--
複数行にわたる
コメントアウトも可能です
-->

● table 要素の行・列だけをコメントアウトすることなども
HTMLのコメントアウトはタグごと囲めるため、tableの特定の列・行だけを一時的に非表示にするときなどにも便利です。

💡 実務テクニック：table要素の列・行だけをコメントアウトする

<table>

　<tr>

　　<!-- <td>1,000円（一時的に非表示）</td> -->

　</tr>

</table>

■ CSS のコメントアウト

CSSでは、コメントアウトしたい文言を「/*」と「*/」で囲みます。
1行でも複数行でも同じ記号を使い、ブラウザはこの範囲を読み飛ばします。

● 基本構文

/* コメント */

● スペースのルール
CSSのコメントアウトは、コメントアウトしたい文言と記号（「/*」「*/」）の間にスペースがあってもなくても動作します。
・スペースあり → 見やすく、一般的
・スペースなし → 動作は問題なし

推奨：記号の内側に半角スペースを1つ入れる

● 改行のルール
CSSのコメントアウトは、どこで改行してもエラーになりません。
複数行コメントも自由に書けます。

⭕/* 標準的な書き方 */

header {

　background-color: #fff;

}

⭕/*
ヘッダーエリアの
スタイル設定
*/

● HTMLファイル内（styleタグ内）での注意点
HTMLファイル内であっても、<style>〜</style> の中に書くコードは CSS のルールが適用されます。

そのため、
❌ HTMLのコメントアウトは使えません。
⭕ 必ずCSSのコメントアウト/* */を使う必要があります。

<!DOCTYPE html>

　<head>

　　<title>CSSコメントアウトの例</title>

　　<style>

　　　⭕ /* 正しいCSSコメント（styleタグ内では必ずこれ） */

　　　　body {

　　　　　background-color: #f5f5f5;

　　　　}

　　　　　/* 複数行コメントも可能

　　　　　　ここではヘッダーのスタイルを説明

　　　　 header {

　　　　　 background-color: #fff;

　　　　　 padding: 20px;

}

❌ <!– これはNG（HTMLコメントはCSSとして無効） –>

❌ <!–

　　　　　header {

　　　　　　color: red;

　　　　 }

　　　　 –>

　　</style>

　</head>

　<body>

　　<header>ヘッダーです</header>

　　<p>本文テキスト</p>

　</body>

</html>

■ JavaScript のコメントアウト

JavaScriptのコメントアウトでは、1行コメントアウトに「//」、複数行コメントアウトに「/*」と「*/」を使用します。
ブラウザはコメント部分を読み飛ばすため、処理には一切影響しません。

● 基本構文
・1行コメント

// コメント

・複数行コメント

/*
複数行コメント
*/

● スペースのルール
JavaScript コメントは、以下のように書くのが一般的なコーディング規約です。
・// の後ろに半角スペースを1つ入れる
・/* と */ の内側にスペースを入れる

// コメント（推奨）
/* コメント（推奨） */

スペースを詰めても動作はしますが、読みづらくなるため非推奨です。

● 改行のルール
・// は改行した時点でコメント終了

// ここまでがコメント
console.log(“ここはコメントではない”);

・複数行にまたがる場合は /* */ を使用、または毎行に // を付ける

/*
複数行のコメントアウト：
ここから下の処理はデバッグのため一時的に停止します
*/または毎行に // を付ける// 複数行のコメントアウト：
// ここから下の処理はデバッグのため一時的に停止します

【超重要】HTMLファイル内に直接書くときは // や /* */ は効かない！
初心者が最も間違えやすいのが、「どこにJavaScriptを書いているか」による違いです。

●独立したJSファイル（.js）に書く場合：
「//」や「/* */」は正しくコメントアウトとして機能します。

●HTMLファイル内（<script>タグの中）に直接書く場合：
大前提として、HTMLファイルの中では // にはコメントアウトの効果は一切ありません。ただの「スラッシュが2つ並んだ文字」として扱われます。そのため、HTMLファイル内に直接JavaScriptを書く（WordPressのカスタムHTMLなどに貼り付ける）際は、「//」や「/* */ 」でコードを消したつもりになっても、ブラウザには「ただのテキスト」として認識されてしまい、画面にプログラムの文字がそのまま露出する原因になります。

●【対策】：HTML内でJavaScriptを丸ごとコメントアウトしたいとき
HTMLファイルの中で、<script>ブロックごとJavaScriptのコードを一時的に無効化したい（画面に見せないようにしたい）場合は、JavaScriptの記号ではなく、HTMLのコメントタグ（<!-- -->）で外側から丸ごと囲むのが正しい方法です。

<!-- HTMLのコメントタグを使えば、中のJSごと安全に無効化できます -->
<!--
<script>
console.log(“この処理を一時的に止めます”);
</script>
-->

■ PHP のコメントアウト

PHP では、1行コメントに // または #、複数行コメントに /* */ を使用します。
これらは必ず <?php … ?> の内部で記述する必要があります。
（PHP タグの外側ではコメントとして認識されません）

● 基本構文
・1行コメント

<?php
// 1行コメントです
# これも1行コメントです
?>

・「//」：JavaScript と同じ形式
・「#」：シェルスクリプト風のコメント（PHP でも使用可能）
どちらも動作は同じで、好みやプロジェクトのコーディング規約で使い分けます。

・複数行コメント

<?php

複数行のコメントアウトです

echo “Hello World”;

・長い説明を書きたい時
・一時的に大きな処理を無効化したいとき
に便利です。

● 使用例

<?php

// デバッグ用：一時的に処理を停止

// $result = get_user_data();

APIの仕様変更により

この処理は現在使用していません

// process_api();

echo “Hello World”;

■ Python のコメントアウト

Pythonでは、1行コメントアウトに # を使用します。
複数行コメントは正式には存在せず、「未使用の複数行文字列（トリプルクォート）」をコメント代わりに使うのが一般的です。

● 基本構文
・1行コメント

# 1行コメントです
print(“Hello”)

・複数行コメント（厳密には“未使用の文字列”）
Pythonには、JavaScript や PHP のような正式な複数行コメント構文はありません。
そのため、トリプルクォート（””” または ”’）で囲んだ文字列を、どこにも代入しないことでコメントとして扱います。

“””

厳密には複数行の文字列（ドキュメントストリング）ですが、

どこにも代入しないことで

複数行のコメントアウトとして機能します

“””

● スペースのルール
1行コメントの # の直後には、公式の標準ルール（PEP 8）で「半角スペースを1つ空ける」と決まっています。
# の後ろに文字がくっつくと #this のようになってしまい、「記号」と「文字」の区切りが分からなくなるため、公式の標準ルール（PEP 8）で半角スペースを空けることが推奨されています。

● 改行のルール
トリプルクォーテーションを使ったコメントアウトでは、直後の改行は必須ではありません。短いコメントなら同じ行にまとめて書いてもエラーにはなりません。
トリプルクォーテーション（”””）は、それ自体が完全に独立した閉じられた記号のため、スペースを空けずに文字を繋げても、システムが「どこまでが記号で、どこからが文字か」を100%見分けることができるからです。

● Python の複数行コメントにおける「””” と ”’ の使い分け」
Python の複数行コメントは、
トリプルダブルクォート（”””）でも、トリプルシングルクォート（”’）でも動作は完全に同じです。

ただし、実務や公式規約（PEP 8）では次のような使い分けが推奨されています。

① 公式推奨は「トリプルダブルクォート（”””）」
Python の公式スタイルガイド PEP 8 では、
関数・クラス・モジュールの説明（docstring）に “”” を使うことを推奨しています。

そのため、実務では：
・迷ったら “”” を使うのが最も無難で確実

② コメント内に引用符が含まれる場合の使い分け
コメントアウトしたい文章の中に ” ” や ‘ ‘ が含まれる場合、
外側のクォートを変えることでエラーを防げます。

● 文章内にダブルクォート（”）がある場合
➡ 外側をシングル（”’）にする

”’

コメント内に “ダブルクォーテーション” を文字として残したい場合は、

外側をシングル（”’）にしておくとエラーになりません。

”’

● 文章内にシングルクォート（’）がある場合
➡ 外側をダブル（”””）にする

“””

逆に、文章内に ‘シングルクォーテーション’ がある場合は、

外側をダブル（”””）にします。

“””

■ Ruby のコメントアウト

Ruby では、1行コメントアウトに #、複数行コメントアウトに =begin と =end を使用します。

● 1行コメント

# 1行コメント：ここから処理を開始します

puts “Hello”

● 複数行コメント（=begin / =end）
Ruby の複数行コメントは 必ず改行が必要です。
さらに、行頭から =begin と =end を書く必要があり、前後にスペースを入れてはいけません。

=begin
複数行のコメントアウトです。
=begin と =end は行頭から書き、
前後にスペースを入れない必要があります。
=end

● Ruby 複数行コメントの重要ポイント
・「=begin」と「=end」は、必ず行頭から書くこと（インデント不可）
・「=begin」と「=end」の前後にスペースを入れると無効になる
・改行が必須（1行では使えない）
・実務では 1行コメント # を複数行並べる方が一般的

コメントアウトの注意点

● ソースコードに見えてはいけない情報を絶対に残さない（最重要）
フロントエンド（HTML / CSS / JavaScript）のコメントアウトは、ブラウザにそのまま送られるため、ユーザーがソース表示を開けば誰でも内容を見ることができます。
そのため、テスト環境のログイン情報、API のシークレットキー、顧客情報、個人名、社外秘のメモ、あるいは企業モラルを疑われるような内部事情など、外部に漏れてはいけない情報をコメントに残すことは重大なリスクです。
実際に、大手企業のサイトから開発者の裏メモが発覚し、SNS で炎上した例もあります。
見られて困る情報は、コメントアウトであっても絶対に書いてはいけません。

コメントアウトをソース表示（デベロッパーツール）で見せない方法

● 書きかけのコードや古いコードをコメントアウトしたまま放置しない
「いつか使うかもしれない」「一応残しておこう」という理由で大量のコードをコメントアウトしたまま残すと、ソースコード全体の視認性が著しく低下します。
現代の開発では Git などのバージョン管理ツールが標準であり、過去のコードは履歴からいつでも復元できます。
不要になったコードはコメントアウトで残すのではなく、潔く削除するのが実務の鉄則です。

● WordPress では自動整形に注意
WordPress のブロックエディタやテーマ・プラグインは、HTMLコメントアウトを自動整形・削除することがあります。そのため、意図したコメントアウトが正しく機能しないケースがあります。
必要に応じてタグで囲むなど、WordPress特有の自動変換を防ぐ工夫が必要です。

● コメントアウトは入れ子にできない複数行コメントは入れ子に対応していません。システムは最初の開始記号を読み込むと、中身を解析することなく「最初に出現した終了記号」でコメントを強制終了します。そのため、途中でコメントが分断され、後半のコードが露出したり、開始記号のない終了記号が「不正なゴミコード」として構文エラーを引き起こすことがあります。入れ子にしたい場合は、古いコメントを削除してから新しく囲み直すことが唯一の正しい対処法です。

コメントアウト反映されない・効かない時の確認方法.入れ子（ネスト）はNG.HTMLは回避できる？