HTML、CSS、JavaScriptでコメントアウトをする方法

2024年7月10日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

コメントアウトは、コードを一時的に無効にしたり、メモや説明を追加したりするために使用される非常に便利な機能です。

HTML、CSS、およびJavaScriptでは、それぞれ異なるコメントアウトの方法があります。

今回は、それぞれのコメントアウトの方法について詳しく解説します。

HTMLのコメントアウト方法

HTMLでは、コメントアウトは以下の形式で行います。

HTML

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

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>コメントアウトの例</title>
</head>
<body>
    <!-- 以下はヘッダーのセクションです -->
    <header>
        <h1>ウェブデザインパレット</h1>
    </header>

    <!-- 以下はコンテンツのセクションです -->
    <main>
        <p>ここにコンテンツが入ります。</p>
    </main>

    <!-- 以下はフッターのセクションです -->
    <footer>
        <p>© Web Design Pallet</p>
    </footer>
</body>
</html>

CSSのコメントアウト方法

CSSでは、コメントアウトは以下の形式で行います。

CSS

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

使用例

CSS

/* 以下はボディ全体のスタイルです */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 以下はヘッダーのスタイルです */
header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}

/* 以下はメインコンテンツのスタイルです */
main {
    padding: 20px;
}

/* 以下はフッターのスタイルです */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

JavaScriptのコメントアウト方法

JavaScriptでは、コメントアウトには2種類の方法があります。単一行コメントと複数行コメントです。

単一行コメント

単一行コメントは、行の先頭に // を付けることで行います。

JavaScript

// ここに単一行コメントを書く

複数行コメント

複数行コメントは、コメントの開始と終了を /* と */ で囲むことで行います。

JavaScript

/*
ここに複数行コメントを書く
複数行にわたるコメントが可能
*/

使用例

JavaScript

// ページが読み込まれたときに実行される関数
document.addEventListener('DOMContentLoaded', function() {
    // ヘッダー要素を取得
    var header = document.querySelector('header');
    
    // ヘッダーのクリックイベントを設定
    header.addEventListener('click', function() {
        // ヘッダーの背景色を変更
        header.style.backgroundColor = '#FF8000'; // オレンジ色に変更
    });

    /*
    以下はメインコンテンツのパラグラフに
    マウスオーバーイベントを設定するコード
    */
    var mainParagraph = document.querySelector('main p');
    mainParagraph.addEventListener('mouseover', function() {
        // テキストカラーを変更
        mainParagraph.style.color = '#4CAF50'; // 緑色に変更
    });
});