プログラミング世界へよこそ

CSS コメント (例付き)

CSS コメント (例付き)
 
 
コードにコメントを合理的に追加することは非常に良い習慣です. コメントを介してコードを説明できます (特定のコードの機能と使用法を説明するなど), ブラウザはその内容を自動的に無視します.コメント。コメントは開発者にとって非常に重要であり、開発者がコードの目的をより早く理解するのに役立ちます。

 

CSS では、コメントは/* (開始文字) で始まり、 */ (終了文字) で終わり、 /*と*/がペアで表示され、 /*と*/の間のすべてのコンテンツがコメント コンテンツと見なされます。 CSS でコメントを記述する方法は、コメントの内容が/*と*/の間にある限り、1 行で使用する場合でも、複数行で使用する場合でも、1 つだけです。例えば：

/*一行コメント*/

/*
複数行コメント
*/

[例] CSS スタイルをコメントで説明する。

 <!DOCTYPE html>
<html>
    <head>
        <title>プログラミングのヘルプ</title>
        <style>
            /* すべての h1 タグにCSSスタイルを設定 */
            h1 {
                color: blue;        /*文字色を青色に設定*/
                text-align: center; /*中央揃えに設定*/
            }
            /* すべての p タグにCSSスタイルを設定 */
            p {
                color: red;         /*文字色を赤色に設定*/
                font-size: 18px;    /*フォントサイズを 18 ピクセルに設定*/
            }
        </style>
    </head>  
    <body>
        <h1>プログラミングのヘルプ</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

実行結果は次の図のとおりです。

図: CSS でのコメントの追加
図: CSS でのコメントの追加
 
 

ブラウザーはコメント内のコンテンツを無視するため、CSS コードを開発またはデバッグするときに、特定の CSS コードを実行したくない場合は、 /* */を使用してこのコードにコメントを付けることもできます。以下に示すように、この CSS コードを実行しなくなりました。

 <!DOCTYPE html>
<html>
    <head>
        <title>プログラミングのヘルプ</title>
        <style>
            /* すべての h1 タグに CSS スタイルを設定する */
            h1 {
                color: blue;        /* 文字色を青色に設定する */
                /*text-align: center;*/
            }
            /* すべての p タグに CSS スタイルを設定する */
            p {
                /*color: red;*/
                font-size: 18px;    /* 文字サイズを 18 ピクセルに設定する */
            }
        </style>
    </head>  
    <body>
        <h1>プログラミングのヘルプ</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

実行結果は次の図のとおりです。

図: 注釈付きプログラムのコード
図: 注釈付きプログラムのコード
 

上記の例では、9 行目と 13 行目で CSS スタイルをコメントアウトしています。実行すると、コメント内の CSS スタイルが有効になっていないことがわかります。

CSS に追加できるコメントの数に制限はありません。必要と思われる場所にコメントを追加できます。ただし、CSS ではコメントをネストできないことに注意してください. コメント開始文字/*は、最初のコメント終了文字*/に遭遇した後にコメントを終了し、後続の*/ブラウザによって CSS スタイルと見なされます ,その結果、後続の CSS スタイルを正常に解析できなくなります。

[例] 上記のコードを使用して、CSS スタイルでコメントをネストします。

 <!DOCTYPE html>
<html>
    <head>
        <title>プログラミングのヘルプ</title>
        <style>
            /* すべての h1 タグに CSS スタイルを設定する */
            h1 {
                color: blue;        /*文字色を青色に設定*/
                text-align: center; /*中央揃えに設定*/
            }
            /*
                すべての p タグに CSS スタイルを設定する */
            p {
                color: red;         /*文字色を赤色に設定*/
                font-size: 18px;    /*フォントサイズを 18px に設定*/
            }
        </style>
    </head>  
    <body>
        <h1>プログラミングのヘルプ</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

実行結果は次の図のとおりです。

図: CSS コメントはネストできません
図: CSS コメントはネストできません

「 CSS コメント (例付き)」についてわかりやすく解説！絶対に観るべきベスト2動画

【OBS】CSS解説つき！チャット風コメント欄のつくりかた【ミレリア】

admin