PCとスマホで画面上に表示されるコンテンツをCSSで切り替える件

さてさて、PCとスマホでどうしてもコンテンツに使いづらさや見た目の不具合が発生してしまう場合があります。

まあ、そこを発生しないようにする間をついた構成もあるかと思いますが、そうなると、本来のPCで行いたいことはあきらめ、スマホにも対応するやり方に切り替えるわけで、結局本来の内容とは根本的にデザイン等が変わってしまいます。

妥協すると言った方がしっくりきますでしょうか？ｗ

そこで便利な方法が、デバイスによって表示内容を切り替えるという方法です！

具体的には、今回の方法では画面のピクセル数で切り替えを指定します。

例えば、PCやタブレットではPCと同じような表示を行いたい！

しかし、スマホではそのままだと小さくなったりデザインが崩れてしまう為、スマホで操作したいデザインに切り替えたいといった場合に利用する事が出来ます。

用途としては、グローバルナビとかに使う場合が多い感じでしょうかね…？

という事で、早速その方法について見て行きたいと思います。

まず、ピクセルの指定です。

今回は分りやすいようにiphone3Gの解像度を最低値として指定したいと思います。

iphone3Gは画面解像度幅が480pxですので、まずこれが1つの基準値になります。

分りやすくいうと、画面幅が480px以下になったら指定したデザインに切り替わるというイメージです。

で、もう1つの基準値ですが、細かく指定は出来ますが、今回はiphone3GはPCのデザインで表示しようと思いますので、481pxが2つ目の値となります。

ここで一回纏めると、480pxのiphone3Gの画面幅になったらAというスタイルで表示する、そして481px以上になったらBというスタイルで表示するといった感じです。

これはCSSで指定できます。

といった具合に読み込むCSS自体を切り替えるパターンもありますが、対象が少なかったりするとCSSが複数に増えるのも面倒なので、今回は1つのCSS内に記載する方法でご紹介いたします。

まず、480px以下になった場合に表示する指定です。

@media screen and (max-width: 480px) {
 div#globalnavi { background-color: #000; }
 /* 表示領域が480px以下で背景が黒に変更されます！*/
}

続いて、それ以上になった場合の設定です。

@media screen and (max-width: 481px) {
 div#globalnavi { background-color: #fff; }
 /* 表示領域が480px以下で背景が白に変更されます！*/
}

これで完了です、簡単ですね！

PCのブラウザの幅をマウスで縮めてみていただくと、あるタイミングで背景が切り替わるのが確認できるかと思います。

今回、分りやすいように背景のみを指定しましたが、例えば、PCでは画像のナビゲーションをデザイン的に配置しておいて、スマホ版では画像を消してテキスト表示するといった事ももちろん可能です！使い方、無限大的な？ｗ

また、「ええぃ面倒だ！」と言った場合には指定幅で消してしまうことも可能です！

@media screen and (max-width: 480px) {
 div#globalnavi { display: none; }
 /* 表示領域が480px以下で非表示！*/
}

設定は他にも481pxから960px、961pxから1136pxといった具合に、複数の指定で分けていくことも可能です。

スマホとPCの調整でお悩みの箇所があれば、一度設定を試してみてください！

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる) 著：エビスコム