モバイルファーストCSSの書き方例

このページは、閲覧者の画面サイズに応じて以下のように見え方が変わります。

スマートフォンサイズの小型端末(横幅768px未満)で閲覧すると、3つのボックスが縦に順番に並んで見えます。
タブレットサイズの中型端末(横幅1024px未満)で閲覧すると、メインボックスとサブボックスの2段組に見えます。
それ以上のサイズの大型端末(横幅1024px以上)で閲覧すると、3段組に見えます。

メインボックスです。
スマートフォン等の小型端末(横幅768px未満)で閲覧すると、画面の横幅全体に広がって表示されます。
タブレット等の小型端末(横幅1024px未満)で閲覧すると、2段組の左側に横幅500px程度(500px＋余白)で表示されます。
PC等の比較的幅の広い端末(横幅1024px以上)で閲覧すると、3段組の左端に60％の横幅で表示されます。

サブボックス1

サブボックス2

解説記事に戻る