Zenn
🌟

レスポンシブのCSSを書く際の見やすいコメントアウトについて

2025/02/23に公開
CSS
コーディング
tech

PCのコーディング部分が分かりやすいように、適切なコメントを追加する方法をいくつか紹介します。

1. シンプルで分かりやすいコメント 

/* ============================= */
/* ========== PC用CSS ========== */
/* ============================= */
@media screen and (min-width: 769px) {

    /* ====== Header（ヘッダー） ====== */
    .header {
        width: 1280px;
        padding: 48px 60px 24px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ====== Navigation（ナビゲーション） ====== */
    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translate(0);
    }

    .nav__list {
        display: flex;
        margin-top: 0;
    }
    
    /* ====== Footer（フッター） ====== */
    .footer {
        text-align: center;
        padding: 40px 0;
    }

} /* ========== PC用CSS ここまで ========== */

ポイント

  • /* ========== PC用CSS ========== */ のように目立つコメントをつけるとわかりやすい。
  • 各セクション（ヘッダー、ナビゲーション、フッターなど）にも小さなコメントをつけると管理しやすい。
  • メディアクエリの開始・終了が明確になるように工夫。

2. 各メディアクエリに番号をつける

複数のメディアクエリを管理する場合、番号をつける方法も有効です。

/* ============================= */
/* == PC用CSS (768px以上) [1] == */
/* ============================= */
@media screen and (min-width: 769px) {

    /* Header */
    .header {
        display: flex;
        justify-content: space-between;
    }

} /* == PC用CSS (768px以上) [1] ここまで == */

/* ============================= */
/* == PC用CSS (1024px以上) [2] == */
/* ============================= */
@media screen and (min-width: 1024px) {

    /* コンテンツ幅を広げる */
    .content {
        max-width: 1200px;
        margin: 0 auto;
    }

} /* == PC用CSS (1024px以上) [2] ここまで == */

ポイント

  • PC用CSS (768px以上) [1] のように 番号をつける と、複数のブレークポイントがある場合に整理しやすい。

3. PCのレイアウト と明示する

デザインの目的を示すコメントを追加する方法。

/* ======================== */
/* PCレイアウト: ヘッダー  */
/* ======================== */
@media screen and (min-width: 769px) {
    .header {
        display: flex;
        justify-content: space-between;
    }
}

/* ======================== */
/* PCレイアウト: ナビゲーション  */
/* ======================== */
@media screen and (min-width: 769px) {
    .nav {
        display: flex;
        position: static;
    }
}

ポイント

  • PCレイアウト: ヘッダー のように具体的に書くと、どの部分のスタイルか一目で分かる。

結論

おすすめのコメントパターン

  1. シンプルで目立つ枠コメント → /* ========== PC用CSS ========== */
  2. 複数のメディアクエリを管理する場合、番号をつける → /* == PC用CSS (768px以上) [1] == */
  3. レイアウトごとにセクションを分ける → /* PCレイアウト: ヘッダー */

目的に応じて、一番管理しやすいコメントを選びましょう！ 🎯

Discussion