PC(2カラム)とSP(1カラム&途中から2カラム)で要素のグルーピングが異なる時の実装方法

Question

質問: PC(2カラム)とSP(1カラム&途中から2カラム)で、要素のグルーピングが異なる場合、どのように実装したら良いのでしょうか？

▼レイアウトの仕様

一つのHTMLファイルに.containerの中身をPCとSPのコードをそれぞれ別々に書いて、メディアクエリ(@medeia screen)で、768px以下の時はpc側のコンテンツを丸ごとdisplay:none, 768px以上の時はSP側のコンテンツを丸ごとdisplay:noneと書いて良いのでしょうか？ (あまり見ない印象、どのようなデメリットがあるかわからず不安です)

それともサーバーサイド側でリクエストを受け取ったユーザのUserAgentを取得してPCとSPのファイルを出し分ける方が良いのでしょうか？

※本サービスは、限定会員向けのサービスの為、SEOを考慮する必要はありません。

Answer 1

PCとSPのコードをそれぞれ別々に書いて、メディアクエリでまるごと表示/非表示を切り替えるという方法は、今回のような場合は簡単に実装できるというのがメリットですね。デメリットとしては、転送量が大きくなるので重くなる、内容が変更があった場合PCとSPの両方を更新する必要があるということですね。

サーバーサイド側でファイルを切り替える場合もほぼ同じですが、転送量が大きくなるというデメリットは解消できます。

HTMLは共通にしてCSSのみでメディアクエリでレイアウトを切り替えるという方法にすれば、内容が変更があった場合のデメリットも解消できます。ただし、かなり複雑なCSSになり、かなりのスキルを必要としますね。

CSSのみの場合もいろいろ方法はあると思いますが、CSS Gridを使うのが比較的シンプルにできそうです。

Comments

[DeepRoastBeans]

なるほどですね、大変参考になりました！今回使用する画像ファイルはjpgで500KB以下想定の為、そこまでレスポンスタイムに影響がなさそうですが、どういうところに留意すべきか理解が深まりました。
SP・PCでレイアウトがかなり異なっても、HTMLを共通にして書くことなんてできるんですね。。。相当凄いです。