ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

コメントアウトの使い方【HTML・CSS・PHP・JavaScript】

コメントアウトの使い方【HTML・CSS・PHP・JavaScript】

「Web制作で使うコメントアウトの書き方を知りたい」

悩み

こんな悩みにお答えします。

各言語ごとのコメントアウトの書き方は以下のとおりです。

HTML

<!-- 簡単な説明や不要なコード -->

CSS

/* 簡単な説明や不要なコード */

JavaScript

// 簡単な説明や不要なコード
/* 簡単な説明や不要なコード */

PHP

// 簡単な説明や不要なコード
/* 簡単な説明や不要なコード */

.htaccess

# 簡単な説明や不要なコード

この記事では以下のことがわかります。

  • コメントアウトの書き方の解説
  • 特別なコメントアウトの使い方 (WordPress)

適切にコメントアウトを使うことで、複雑なプラグラムを管理しやすくなったり、複数人でつくるプログラムを共有しやすくなります。

目次
  1. コメントアウトの使い方
    1. HTML
    2. CSS
    3. JavaScript
    4. PHP
    5. .htaccess
  2. 特別なコメントアウトの使い方 (WordPress)
    1. style.css
    2. 固定ページ 追加テンプレートファイル
  3. コメントアウト とは
  4. まとめ

コメントアウトの使い方

HTML

HTMLは、先頭に「<!--」、末尾に「-->」を記述することでコメントアウトになります。
1行の場合でも、複数行の場合でも同じ書き方をします。

<!-- 簡単な説明や不要なコード -->

<!--
 簡単な説明や不要なコード
 簡単な説明や不要なコード
-->

CSS

CSSは、先頭に「/*」、末尾に「*/」を記述することでコメントアウトになります。
1行の場合でも、複数行の場合でも同じ書き方をします。

複数行のときのコメントアウトが、JavaScriptやPHPと同じなので1行のとき「//」を使ってしまうことがありますが、CSSでは「//」は使えません。

/* 簡単な説明や不要なコード */

/*
 簡単な説明や不要なコード
 簡単な説明や不要なコード
*/
POINT
CSSでは「//」は使えない!

JavaScript

JavaScriptのコメントアウトは、1行の書き方と複数行の書き方の2種類があります。
1行の場合は先頭に「//」をつけます。
複数行の場合は先頭に「/*」、末尾に「*/」をつけます。
複数行の書き方を1行の先頭と末尾につけても問題ありません。

// 簡単な説明や不要なコード

/* 簡単な説明や不要なコード */

/*
 簡単な説明や不要なコード
 簡単な説明や不要なコード
*/

PHP

PHPのコメントアウトは、JavaScriptと同じで1行の書き方と複数行の書き方の2種類があります。

// 簡単な説明や不要なコード

/* 簡単な説明や不要なコード */

/*
 簡単な説明や不要なコード
 簡単な説明や不要なコード
*/

.htaccess

.htaccessまで編集することは少ないと思いますが、.htaccessでは先頭に「#」をつけて半角スペースを入れた後からコメントになります。

# 簡単な説明や不要なコード

# 簡単な説明や不要なコード
# 簡単な説明や不要なコード

特別なコメントアウトの使い方 (WordPress)

WordPressでは、テーマ内のテンプレートファイルのコメントアウトに重要な情報を記述します。
単なる説明や不要なコードではないので、削除しないようにしてください。

style.css

テーマ内のstyle.cssに、テーマの情報を記述します。
ここに記述する内容が管理画面のテーマ一覧などに表示されます。

/*
Theme Name: テーマの名前(必須)
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: テーマの作者
Version: テーマのバージョン
Tags: テーマの特徴タグ(カンマ区切り/オプション)
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

固定ページ 追加テンプレートファイル

固定ページのテンプレートには通常page.phpが適用されますが、page.php以外に複数のテンプレートを使用する場合は、テンプレートの先頭に以下の記述をします。
「Template Name:」の後にわかりやすい名前をつけられています。

<?php
/*
Template Name: 固定ページの追加テンプレート
*/
?>

コメントアウト とは

コメントアウトは、プログラミング言語やマークアップ言語で、記述した内容を削除することなく無効化することです。

WordPressでは、コメントアウト内に書いた記述が重要な機能となっていることもあります。

おもな使用用途
  • コードの説明のため
  • 一時的に不要になった機能やデザインの無効化のため
  • コードの区切りなどをわかりやすくする境界線のため
  • 隠しコンテンツのため (特別なメッセージや、遊び心でのアスキーアート)

一時的にコメントアウトにした機能やデザインは、最後まで削除せず、公開されてもそのまま残り続けることが多いです。
本当に必要なコメントアウト以外はできるだけ削除するようにしてください。

gulpなどを使うことで制作用のファイルにだけコメントアウトを書き、公開用のファイルのコメントアウトはすべて削除するということもできます。

アスキーアートについては、以下、記事で紹介しています。

HTMLソースコードに隠しメッセージ、アスキーアートがあるWebサイト 10選

HTMLソースコードの隠しメッセージやアスキーアートについて知りたいですか?この記事では、HTMLソースコードを見る方法、アスキーアートの作り方、隠しメッセージ、アスキーアートがある有名企業サイトや有名ブログなどを紹介しています。ぜひご覧ください。

まとめ

コメントアウトの書き方を紹介しました。

重要なコメントを残すことは重要ですが、一時的なコメントアウトは忘れずに削除するようにしましよう。