pipichan
@pipichan

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

CSSにスタイルを記述する際に悩むこと

Q&A

Closed

解決したいこと

あるHTML/CSSの本を読みながら模写コーディングの勉強をしております。

下記書籍のCSSのプロパティに引っかかっていることがあります。
文字色は共通されているし親にスタイルを継承させることで子にスタイルが当たるので親にスタイルをすればいいのではと思っています。

どのやり方で試しても見た目は同じスタイルになってしまうことで、どのセレクタにすればいいのかと判断ができません。

  1. 書籍の通り子要素にスタイル指定したほうがいいのか(意図があって指定しているのか)
  2. navの親要素に指定するか
  3. はたまたulに指定してよくない?
    と頭がこんがらがっています。

どのセレクタにスタイルをあてるべきかお考えをお聞かせください。
初歩的な質問ですがよろしくお願いします。

書籍のコード

        <nav class="categoryNav">
          <ul>
            <li><a href="#">農家の日常(4)</a></li>
            <li><a href="#">農家のノウハウ(5)</a></li>
            <li><a href="#">レシピ(2)</a></li>
            <li><a href="#">農家の経営(2)</a></li>
          </ul>
        </nav>

.categoryNav ul li {
 
  color: #7c5d48;
}

私が思うコード

.categoryNav {
  color: #7c5d48;
}

または

ul {
  color: #7c5d48;
}

曖昧であるからこそ悩ましいです..

0

1Answer

唯一の正解はないと思います。

一般論としては、広範囲に影響を与える形で書くと、思わぬ副作用を生みやすくなります。

ページの設計として、「ulなら必ずこの色だ」というポリシーでやるなら、ulに直接スタイルを指定するのもいいでしょうが、単にこの色を指定したいだけなら、影響範囲が狭い(≒ページの別の場所でulに影響を及ぼしにくい)書籍のスタイル指定の方が無難です。

1Like

Comments

  1. @pipichan

    Questioner

    ご回答ありがとうございます!

    どれもスタイルに当てはまるので、奥が深く難しいですね。
    >広範囲に影響を与える形で書くと、思わぬ副作用を生みやすくなります

    そうでした!よいCSSのポイントで詳細度をみだりに高くしてはいけないと見ました。私が記載した箇所だけなら確かにulでも大丈夫でしょう。中・大規模なwebページに出会った時をかんがえるとスコープを絞って影響範囲を狭くする書籍のスタイルが理に適うと理解できました。

Your answer might help someone💌