レスポンシブルサイトの作製について

スマホでも見れるサイトを作りたい!

そんな願いをかなえることができる素敵な方法をお教えします♪

まず覚えていただきたいのは、PCサイトとスマホでは表示幅がちがうということ!

・・・えっ?
そんなことは分かっている?
そうなんです!
当たり前のように分かっていることですが、
cssでwidhを指定したら、その幅になってしますので、
みなさん困るわけです。

なので、cssでこんな条件分岐をさせるといいのです。

画面が☐☐☐☐pxより大きい時はーーーー
画面が○○○○pxより小さい時はーーーーー
(○○○○は☐☐☐☐より1px小さい)
画面が△△△pxより小さい時はーーーー
画面が×××pxより小さい時はーーーー

すると、pc、タブレット、ミニタブレット、スマホ
といった具合にサイトのサイズ設定ができるのです♪

具体的にcssにどう入力するかはをご参考あれ

/*****************************************************
 レスポンシブル設定
***************************************************/

/* メインメニュー PC用
------------------------------------------------------------*/
@media only screen and (min-width: 1025px){

}
/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){

}
/* 959px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 959px){

}
/* 幅620px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 620px){

}

この{ }の中にidやclassで日もづけられたcssが採用されます。
ただ、この設定はheaderの中に以下のソースを記入してあげないと認識しません。

<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0" />

説明が必要だと思うのでこちらをご覧ください。

<meta name="viewport"
⇧viewport使いますよ!ってことです。
content="
<span style="font-size: 14px;">width=device-width,
⇧幅設定 デバイスの幅に合わせるので
</span>user-scalable=yes,
⇧ユーザーが拡大できるかどうか?
maximum-scale=1.0,
⇧最大拡大率
minimum-scale=1.0
⇧最小拡大率
"
<table width="450" border="1" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td colspan="3" align="center">viewport プロパティ</td>
</tr>
<tr>
<td align="center">width</td>
<td align="center">200~10,000px</td>
<td>幅で、○○pxで指定。
device-widthのような特別なプロパティもある。</td>
</tr>
<tr>
<td align="center">height</td>
<td align="center">200~10,000px</td>
<td>高さで、○○pxで指定。
device-heightのような特別なプロパティもある。
デフォルトは980px。</td>
</tr>
<tr>
<td align="center">minimum-scale</td>
<td align="center">0~10</td>
<td>倍率の最小値。数値で指定。
デフォルトは0.25</td>
</tr>
<tr>
<td align="center">maximum-scale</td>
<td align="center">0~10</td>
<td>倍率の最大値。数値で指定。
デフォルトは1.6</td>
</tr>
</tbody>
</table>

拡大率が1倍~1倍って拡大できないの??
これについては後ほど♪

後は先に書いた@media~を動作させるのにはcss3とやらに
対応させてあげないといけないので、
IE8以前対策でこちらをheader内に挿入

&lt;!--[if lt IE 9]&gt;
&lt;script src="&lt;?php bloginfo('template_url'); ?&gt;/js/html5.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_url'); ?&gt;/js/css3-mediaqueries.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;

これで後は画面の表示の状況と戦えれば大丈夫です。
細かなレスポンシブル設定はそのうち書きたいと思います。

ちなみに、拡大率は1倍~1倍以外は
アンドロイドで不具合がでるとかでないとか・・・・

やっぱり個人的にiosが好きですね!
っていうか頑張れgoogle他os開発メーカーさんたち!

コメントを残す