HTML/CSS フロントサイド

レスポンシブ対応の書き方

WebサイトをPC用とスマホ用でレイアウトを別々にするときの僕なりの方法をまとめます。

HTML内にPC用、SP用のDOMを構築


以下のように、PC用のDOMとSP用のDOMを用意します。

PC用のDOMのクラス名に"for-pc"、SP用のDOMのクラス名に"for-sp"と設定しています。

これを画面のサイズごとに表示するかしないかを切り替えます。

 

CSS内で画面幅に応じて、PC用かSP用のスタイルを割り当てるかを決める


cssの"@media"を使って、画面幅に応じたスタイルを適応します。

画面の幅が最低でも"768px"ある場合は、PC用のスタイルを、

画面の幅が最大でも"767px"しかない場合は、SP用のスタイルが適応されます。

PC用のスタイルでは"for-pc"のクラスを持つDOMを表示して、"for-sp"のクラスを持つDOMを非表示にします。

SP用のスタイルではPC用と逆のことをしています。

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-HTML/CSS, フロントサイド
-,

© 2021 Shiro's secret base