CSSの記述について質問です。 添付画像のようにPCの場合とスマホの場合で表示を変える場合どのように記述すればよいですか？ 分岐点は768PXとします。
CSSの記述について質問です。 添付画像のようにPCの場合とスマホの場合で表示を変える場合どのように記述すればよいですか？ 分岐点は768PXとします。
補足
ちなみにWordPressの Page Builder by SiteOrigin を使ってます。
ベストアンサー
■■■ メディアクエリを使う方法 ■■■ メディアクエリを使って、 画面サイズによってレイアウトを変更する場合は、 メディアクエリの設定の前に、 ビューポートを設定しておかないとメディアクエリが効かない。 <head> 内に、 ──────────────── <meta name="viewport" content="width=device-width, initial-scale=1"> ──────────────── のように記述してビューポートを設定しておく。 CSS では、 768px を分岐点としてレイアウトを切替えるなら、 メディアクエリで以下のように書けばいい。 ──────────────── ～ PC の場合のレイアウト ～ @media screen and ( max-width: 768px ) { ～ スマホの場合のレイアウト } ──────────────── スマホレイアウト基準（モバイルファースト）でレイアウトするなら、 ──────────────── ～ スマホの場合のレイアウト ～ @media screen and ( min-width: 768px ) { ～ PC の場合のレイアウト } ──────────────── 質問のようなレイアウトの場合、 [ 1 ], [ 2 ], [ 3 ], … のように並べる要素は、 フレックスレイアウトで並べるといい。 HTML の構成としては、 ──────────────── <section id="gallery"> <div>1</div> <div>2</div> <div>3</div> … </section> ──────────────── のように、 フレックスコンテナとなる <section> の中に、 並べるフレックスアイテムの <div> を入れる。 そして CSS では、 <section> の横幅を、 フレックスアイテムが横に並ぶ個数に合わせて指定する。 フレックスアイテムの横幅を 360px、 並べるフレックスアイテムどうしの間隔を 20px とすると、 画面幅 768px 以上のときは、 フレックスアイテムが２個並ぶ横幅以上にするから、 360px × 2 + 20 = 740px にすればいい。 画面幅が 768 未満の場合は、 フレックスアイテムが１個並ぶ横幅 360px にすればいい。 ──────────────── /* ==== PC ==== */ #gallery { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 20px; width: 740px; margin: auto; } #gallery > * { flex: 0 0 auto; box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 360px; height: 240px; border: solid 1px #f33;; background: #fee; } /* ==== SP ==== */ @media screen and ( max-width: 768px ) { #gallery { width: 360px; } } ──────────────── ■■■ メディアクエリを使わない方法 ■■■ 質問のレイアウトであれば、 メディアクエリを使わなくても、 フレックスレイアウトだけの挙動でも実装できる。 フレックスコンテナ #gallery の max-width を、 フレックスアイテムが２個並ぶ幅にしておけば、 あとは、 画面幅が大きいときは２個並び、 画面幅が小さくなって２個入らなくなると、 １列になって表示される。 この場合、 フレックスアイテムは justify-content:center で左右中央に配置することになるけど、 フレックスアイテムが奇数の場合、 末尾で１列だけになったアイテムは左右中央に配置されてしまい、 左右２列の配置からずれてしまう。 これを防ぐために、 #gallery の ::after 擬似要素を、 空白のアイテムとして置いておくことで、 奇数のばあいも２列の配置を維持する。 ──────────────── /* ==== ギャラリー｜外枠 ==== */ #gallery { /* パラメータ */ --gallery-width: 768px; --gallery-gap: 20px; --gallery-pad: 14px; --gallery-item-width: calc( ( var( --gallery-width ) - var( --gallery-gap ) ) / 2 - var( --gallery-pad ) ); --gallery-item-height: calc( var( --gallery-item-width ) * 3 / 4 ); /* フレックスレイアウト */ display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: var( --gallery-gap ); /* その他 */ box-sizing: border-box; width: auto; max-width: var( --gallery-width ); padding: 24px var( --gallery-pad ); margin: 0px auto; } /* ==== ギャラリー｜アイテム ==== */ #gallery > * { /* フレックスによる伸縮禁止 */ flex: 0 0 auto; /* 中のテキストを中央に固定 */ display: flex; justify-content: center; align-items: center; /* その他サイズなど */ box-sizing: border-box; width: var( --gallery-item-width ); height: var( --gallery-item-height ); border: solid 1px #f66; background: #fee; } /* 列を保つための仮要素 */ #gallery::after { content: ""; width: var( --gallery-item-width ); height: 0px; } ────────────────
1人がナイス！しています
質問者からのお礼コメント
勉強になりました。
お礼日時：1/19 17:43
