画面幅を変えて、1列・2列・3列を比較

枠内は独立したページです。幅を変えると、実際のCSSメディアクエリが再評価されます。JavaScriptで列数を書き換えているわけではありません。

画面より大きい幅を選ぶと、枠の中を横へスクロールできます。縮小画像ではなく指定した幅のビューポートです。640px以上と960px以上は、端末名ではなくこの枠の幅で判定します。

どのルールが適用されるか

• 640px未満：基本の1列
• 640px以上・960px未満：2列
• 960px以上：両方の条件が成立。同じ詳細度なので、後に書いた3列が優先

サンプルだけを開いてウィンドウ幅で試す ／ 記事と共通のCSSを開く

ダークモードはOS・ブラウザーの設定に従います。印刷スタイルはサンプル単体を開いて印刷プレビューで確認できます。