WebサイトをPC用とスマホ用でレイアウトを別々にするときの僕なりの方法をまとめます。
HTML内にPC用、SP用のDOMを構築
以下のように、PC用のDOMとSP用のDOMを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- PC用 --> <div class="for-pc"> . . . </div> <!-- SP用 --> <div class="for-sp"> . . . </div> |
PC用のDOMのクラス名に"for-pc"、SP用のDOMのクラス名に"for-sp"と設定しています。
これを画面のサイズごとに表示するかしないかを切り替えます。
CSS内で画面幅に応じて、PC用かSP用のスタイルを割り当てるかを決める
cssの"@media"を使って、画面幅に応じたスタイルを適応します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* PC用 */ @media screen and (min-width: 768px) { .for-pc { display: show; } .for-sp { display: none; } . . . } /* SP用 */ @media screen and (max-width: 767px) { .for-pc { display: none; } .for-sp { display: show; } . . . } |
画面の幅が最低でも"768px"ある場合は、PC用のスタイルを、
画面の幅が最大でも"767px"しかない場合は、SP用のスタイルが適応されます。
PC用のスタイルでは"for-pc"のクラスを持つDOMを表示して、"for-sp"のクラスを持つDOMを非表示にします。
SP用のスタイルではPC用と逆のことをしています。