HPをスマホ対応デザインに改造する相談を受けたので、やってみた
スマホ対応にする方法は大まかに分けて二種類
| (1) | スマホ専用のページを作って、スマホからのアクセスはそちらに飛ばす |
| (2) | レスポンシブデザイン（スマホによるアクセスの場合にスタイルシートだけ差し替える） |
(1)の方法はJavascriptを使ったり、.htaccessを使ったりして、アクセスしてきたデバイスのユーザーエージェントを取得して、それぞれ適切なサイトに飛ばすわけですね
(2)はアクセスしてきたデバイスの幅によってスタイルシートをケース分けして記述しておく
今回は(2)の方法でやってみた…
スポンサーリンク
スポンサーリンク
やり方は
(1)ビューポートの設定
(2)ケースごとのスタイルシートの記述
これだけ。
具体的には
(1)ビューポートの設定
ヘッダ内にビューポートの記述を加えます
<meta name="viewport" content="width=device-width,initial-scale=1">
※ビューポートについてコチラの説明が分かりやすかったデス
(2)スタイルシートの記述
まず、PC用のサイトをデザインする。
次に、メディアクエリーを使ってスマホ用に適用するスタイルシートを記述する。
以下のようにスタイルシートに記述し、｛ ｝内にスマホ用のスタイルシートを記述すれば、指定した幅(640px)より小さい時だけ｛ ｝内のCSSが適用されます。
@media screen and ( max-width:640px ) {
ここにスマホ用のスタイルを記述
}
二段階に設定したい場合はこんな感じ
@media screen and ( max-width:549px ) {
ここに549pxまでのスタイルを記述
}
@media screen and (min-width:550px) and ( max-width:768px) {
ここに550px～768pxまでのスタイルを記述
}
例
PCサイト用に下記のようなレイアウトをしてみる
<div id="MainContainer">
<div id="HEADER"></div>
<div id="BLOCK1"></div>
<div id="BLOCK2"></div>
<div id="BLOCK3"></div>
<div id="FOOTER"></div>
</div>
※PC用のデザインでは、BLOCK1～3のCSSに｢float:left;｣を指定して横に並べています。
これを、ビューポート幅が640px以下だった場合に、｢float:left;｣をなしに、幅の指定を100%に変えると、下記のようになります（各ブロックが縦並びになる）
スタイルシートは以下のような感じで
#MainContainer { width: 100%; }
#HeaderBlock { width: 100%; }
#SideMenu1 { width: 25%;float: left; }
#Contents { width: 50%;float: left; }
#SideMenu2 { width: 25%;float: left; }
#FooterBlock { width: 100%;clear: left; }
@media screen and ( max-width: 640px )
{
#MainContainer { width: 100%; }
#HeaderBlock { width: 100%; }
#SideMenu1 { width: 100%; }
#Contents { width: 100%; }
#SideMenu2 { width: 100%; }
#FooterBlock { width: 100%; }
}
※PC用サイトのデザインで、全体の幅を100%にすると全体の幅がサイズに合わせて伸縮します。
それでも良いですが、デザインの予想外の崩れが激しくなるので、幅は固定値にして、その値より小さいものはスマホ用表示に変える、でも良いような気がしました。
コメント