【CSS 3-2】よくあるつまずき｜CSSが効かない・崩れる・優先順位で困ったときの見直し方（初心者向け）

CSSが効かない時は、まず「その要素を正しく選べているか」を見ます。

たとえば、HTMLがこうだとします。

<div class="profile-text">
  <p>サンプル文章です。</p>
</div>

<div class="profile-text">
  <p>サンプル文章です。</p>
</div>

この時、CSSは

.profile-text {
  color: #2563eb;
}

.profile-text {
  color: #2563eb;
}

なら当たりますが、
※class 名(.profile-text)、

.profiletext {
  color: #2563eb;
}

.profiletext {
  color: #2563eb;
}

のように class 名(.profiletext)が少しでも違うと当たりません。

CSSは、少しの書き方ミスでその行が効かなくなることがあります。

たとえば、

h1 {
  color: #2563eb		/* ; が抜けている */
  font-size: 32px;
}

h1 {
  color: #2563eb		/* ; が抜けている */
  font-size: 32px;
}

このように color の行の最後の ; が抜けていると、
その後の見え方までおかしくなることがあります。

• 行の最後に ; があるか
• { と } が対応しているか
• color や margin のスペルが違っていないか
• 数字と単位（24px など）が抜けていないか

toshi

「何が悪いか分からない」時ほど、
まず記号を見直すだけで直ることがかなり多いです。

※Visual Studio Code等、プログラム用のエディタだと
保存する前に下記画像のようになり気づきやすいです。

例：こう書いてあるとします。

p {
  color: #333333;
}

.profile-text p {
  color: #2563eb;
}

p {
  color: #333333;
}

.profile-text p {
  color: #2563eb;
}

この場合は、
.profile-text の中にある p の方が、より細かく指定されているので、
青(#2563eb;)の方が当たりやすくなります。

全部覚えなくて大丈夫です。

まずは、

• あとに書いたCSSが勝つことがある
• より細かく指定した方が強いことがある

この2つが分かれば十分進めます。

CSS 3-1 でやった Flex は、
並びたい要素を包んでいる親に書くのが基本です。

たとえば、

<section class="profile-layout">
  <img src="images/sample.jpg" alt="サンプル画像" />
  <div class="profile-text">
    <p>サンプル文章です。</p>
  </div>
</section>

<section class="profile-layout">
  <img src="images/sample.jpg" alt="サンプル画像" />
  <div class="profile-text">
    <p>サンプル文章です。</p>
  </div>
</section>

この時に display: flex; を書く場所は、
img や .profile-text ではなく、
.profile-layout です。

.profile-layout {
  display: flex;
  gap: 24px;
}

.profile-layout {
  display: flex;
  gap: 24px;
}

画像は、そのままだと想像より大きく表示されることがあります。

特に Flex の中に入れると、
画像が大きすぎて文章が押し出されることがあります。

そんな時は、画像側の width を調整します。

.profile-layout img {
  width: 200px;
  height: auto;
}

.profile-layout img {
  width: 200px;
  height: auto;
}

• 画像の幅を小さくするとバランスが見やすくなる
• height: auto; を入れると縦横比が崩れにくい
• 最初は 160px〜240px くらいで試すと違いが見やすい

たとえば入力欄では、

input,
textarea {
  width: 100%;
  box-sizing: border-box;
}

input,
textarea {
  width: 100%;
  box-sizing: border-box;
}

のように、
box-sizing: border-box; があると、
幅を扱いやすくしやすいです。

今は深く覚えるより、
「幅で変な崩れ方をしたら box-sizing を確認する」
くらいで大丈夫です。