このページの中身
実装
決めたことを、崩れない形で組みます。土台は出発点のCSSにまとめてあります。
図の中身を文字で読む
- 実装で決めること CSSの仕組みと、速さ
- 先に決まっていること レイアウト デザインシステム
- 組む CSSの仕組み レイアウトの実装
- 測る 速度の指標
- 直す 速くする
- ここが効く先 公開
このページから降りる#
この分野が答えになる場面#
全22件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く22 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| 一覧のカードの高さが揃わない | Gridのサブグリッドで、見出し・本文・ボタンの行を列をまたいで揃える。 | コードを開く | レイアウトの実装 |
| gap と margin のどちらを使うか | 並びの中の間隔は gap。端の余白を打ち消す記述が要らなくなる。 | .row { display: flex; gap: var(--space-4); } | レイアウトの実装 |
| 表示が遅い | 画像から。表示寸法の2倍以下に縮め、AVIFかWebPにし、最初の画面より下は lazy にする。 | コードを開く | 速くする |
| 何から手を付けるか分からない | 画像、読み込みを止めるもの、JavaScriptの量の順。上から3つでたいていの遅さは解ける。 | コードを開く | 速くする |
| 読み込み中に画面が飛ぶ | img に width と height を書く。ブラウザが場所を先に確保する。 | <img src="photo.webp" width="800" height="600" alt="説明"> | 速度の指標 |
| 最初の表示が遅い | head の同期scriptとCSSが表示を待たせている。script に defer を付ける。 | <script src="app.js" defer></script> | 速くする |
| 画像をどの形式で書き出すか | 写真はAVIFかWebP、図はSVG。透過が要るPNGは、AVIFで置き換えられることが多い。 | コードを開く | 速くする |
| srcset の書き方が分からない | 幅の候補を w で並べ、sizes に表示幅を書く。sizes を省くと100vwとみなされ、大きすぎる画像が選ばれる。 | コードを開く | 速くする |
| 速度を測ったが数値が毎回違う | 手元の1回は当てにならない。実際の利用者の75パーセンタイルで見る。 | コードを開く | 速度の指標 |
| Lighthouseのスコアは上がったのに体感が変わらない | ラボの数値と実利用者の分布は別物。Search Console のウェブに関する主な指標を見る。 | コードを開く | 速度の指標 |
| 操作しても反応がない時間がある | INPが悪い。長く走るJavaScriptを分割し、その画面で使わないコードを送らない。 | コードを開く | 速度の指標 |
| CSSが上書きできない | !important、カスケードレイヤーの順、インライン style、詳細度、記述順の順に確かめる。 | コードを開く | CSSの仕組み |
| 外部ライブラリのスタイルを上書きしたい | セレクタを長くしない。@layer で層の順を決めるほうが、あとで壊れない。 | コードを開く | CSSの仕組み |
| 上書きしやすい土台を作りたい | :where() で包む。中身の詳細度が0になるので、あとから素直に上書きできる。 | :where(.prose) p { margin-block: var(--space-3); } | CSSの仕組み |
| FlexboxとGridのどちらを使うか | 列の幅を揃えたいならGrid、中身の量で幅を変えたいならFlexbox。 | コードを開く | レイアウトの実装 |
| 画面幅で列数を変えたい | repeat(auto-fit, minmax(16rem, 1fr)) だけで折り返る。ブレークポイントを書かなくてよい。 | コードを開く | レイアウトの実装 |
| 部品を置く場所によって形を変えたい | メディアクエリではなくコンテナクエリを使う。画面幅ではなく親の幅で分岐する。 | コードを開く | レイアウトの実装 |
| 文字や余白を画面幅に連動させたい | clamp() を使う。推奨値に rem を含めないと、利用者の文字サイズ設定に追従しなくなる。 | h1 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem); } | レイアウトの実装 |
| 幅がpaddingの分だけ膨らむ | box-sizing: border-box を全体に当てる。 | *, *::before, *::after { box-sizing: border-box; } | CSSの仕組み |
| 縦書きや多言語に備えたい | 上下左右ではなく論理プロパティで書く。margin-inline や inset-block-start。 | コードを開く | CSSの仕組み |
| カスタムプロパティが効かない | :root にしか置いていない。要素に持たせると継承で子に届き、局所で切り替えられる。 | コードを開く | CSSの仕組み |
| 更新したのに表示が変わらない | キャッシュが残っている。ファイル名かクエリを変えて配信する。 | <link rel="stylesheet" href="style.css?v=20260824"> | 速くする |
他の分野へ#
基礎 ／ タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索