CSSで詰まる
この場面の困り事と、そのまま使えるコード。全10件。 足りなければ、行末のページへ進む。
このページの中だけを絞ります。ページは移りません。
CSSが上書きできない
!important、カスケードレイヤーの順、インライン style、詳細度、記述順の順に確かめる。CSSの仕組み
同じ要素に3ルールが当たる。勝つのは詳細度→記述順。
HTML
<a class="link" id="demo-link" href="#">リンクの見本</a>
CSS
a.link {
color: #2e6e5e;
}
#demo-link { color: #a2382a; } /* ID が勝ち */
a.link { color: #95591c; } /* 同じ詳細度なら後勝ち */外部ライブラリのスタイルを上書きしたい
セレクタを長くしない。@layer で層の順を決めるほうが、あとで壊れない。CSSの仕組み
セレクタを長くせず、@layer で層の順を決める。
HTML
<p class="layer-comp">components 層の部品</p>
CSS
@layer reset, vendor, base, components, utilities; @import "vendor.css" layer(vendor);
上書きしやすい土台を作りたい
FlexboxとGridのどちらを使うか
列の幅を揃えたいならGrid、中身の量で幅を変えたいならFlexbox。レイアウトの実装
列幅を揃えるなら Grid。中身の量で幅を変えるなら Flex。
HTML（見本の骨組み）
<div class="cards">…</div> <div class="toolbar">…</div>
トークンは 出発点のCSS の :root にあります。
コピーする CSS
:root {
--space-3: 12px;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-3);
}
.toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; }
画面幅で列数を変えたい
repeat(auto-fit, minmax(16rem, 1fr)) だけで折り返る。ブレークポイントを書かなくてよい。レイアウトの実装
auto-fit + minmax。見本の幅と列の最小幅で折り返しを確かめる。
HTML（見本の骨組み）
<div class="cards"> <article class="card">1</article> … </div>
トークンは 出発点のCSS の :root にあります。
コピーする CSS
:root {
--col-min: 10rem;
--space-5: 24px;
}
.cards {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
}
部品を置く場所によって形を変えたい
メディアクエリではなくコンテナクエリを使う。画面幅ではなく親の幅で分岐する。レイアウトの実装
親の幅で段組が変わる（コンテナクエリ）。幅つまみで確かめる。
HTML（見本の骨組み）
<article class="card"> <div class="card__body"><p>左</p><p>右</p></div> </article>
分岐は画面幅ではなく @container です。
コピーする CSS
.card { container-type: inline-size; }
@container (min-width: 24rem) {
.card__body { display: grid; grid-template-columns: 1fr 1fr; }
}
文字や余白を画面幅に連動させたい
幅がpaddingの分だけ膨らむ
box-sizing: border-box を全体に当てる。CSSの仕組み
border-box なら親の幅に収まる。外すと padding 分はみ出す。
HTML（見本の骨組み）
<div class="play-box-wrap"> <div class="play-box-child">この箱</div> </div>
全体に当てるなら *, *::before, *::after です。
コピーする CSS
*, *::before, *::after { box-sizing: border-box; }
縦書きや多言語に備えたい
カスタムプロパティが効かない
:root にしか置いていない。要素に持たせると継承で子に届き、局所で切り替えられる。CSSの仕組み
要素に変数を持たせると、通常とコンパクトで切り替えられる。
HTML（見本の骨組み）
<article class="card">通常</article> <article class="card is-compact">コンパクト</article>
トークンは 出発点のCSS の :root にあります。
コピーする CSS
:root {
--space-5: 24px;
--space-3: 12px;
}
.card { --card-pad: var(--space-5); padding: var(--card-pad); }
.card.is-compact { --card-pad: var(--space-3); }
この場面の値をまとめて決めるなら作業台へ。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 並べ方（Flexbox と Grid）
この場面で貼れるもの#
答えを読んだら、ここから完成形を持ち帰れます。
