CSSによるスタイリング

320ピクセルのカードが 320ピクルの画面でもオーバーフローする

• カードで明示された幅は、必ずしも総幅ではない。パディングとボーダーはコンテンツ幅の外側にスペースを追加する可能性がある。
• CSS は表示規則を適用する。セレクトラ は要素を選び、宣言 はプロパティと値（例：color: navy）を与える。

ボックスのすべての部分を考慮する

• ボックスモデル には、コンテンツ、パディング、ボーダー、マージン が含まれる。パディングとボーダーは描画されたボックス内部にあり、マージンは隣接要素との間隔を確保する。
• content-box の場合、幅 320 px、両側パディング 16 px、両側ボーダー 2 px で、マージンを除いて 356 px となる。border-box の場合、明示された 320 px にはそのパディングとボーダーが含まれる。

幅を柔軟にする

• レスポンシブデザイン は、利用可能なスペースに合わせてコンテンツとレイアウトを適応させる。このカードは、パディングとボーダーを含めて容器に対して 400 px まで埋め尽くす。
• class="card" を持つ要素にルールを適用する。長い改行のないコンテンツ、親要素のマージン、その他のルールも確認が必要であり、単一の宣言ではページ全体が収まることを保証できない。

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 16px;
  border: 2px solid currentColor;
  overflow-wrap: anywhere;
}

変更が必要なときのみレイアウトを変更する

• メディアクエリ は条件に基づいてルールを適用する。例えば、列が読みづらくほど狭くなったら2列から1列に変更する。
• ブレイクポイントをコンテンツから選択し、複数の幅や大きなテキストでテストする。すべてのスマートフォンやノートパソコンが同じ可利用幅を持つとは仮定しない。

実際に勝つルールを確認する

• カスケードは、セレクトラの指定性よりも前に、起源、重要性、レイヤーなどの要因を考慮する。同等のルールでは、IDクラスよりクラスが、クラスより要素セレクタが指定性が高い。
• 指定性が同等のルールでは、後のソース順序で決定することがある。ブラウザの開発者ツールを使用して、一致したルール、読み込まれたスtylesheet、計算された値を確認する。

ボックスと読み取り体験を試す

• 幅の狭い・広いコンテナ、キーボードフォーカス、拡大されたテキストを試します。両方のカラーテーマでテキストが読めるか、コンテンツが折り返されるか確認します。
• ボックス計算を用いた1つの overflow 修正例と、実際のマッチングルールを用いた1つのスタイル干渉例を説明します。

出典: W3C CSS カスケード。