ECサイトを作るにあたって、多くの方に訪問していただきたいですよね。
やっぱり、PCでECサイトを利用する方は多いと思いますが、
最近はスマートフォンでECサイトを利用する方も増えてます。
媒体によって最適なレイアウトで表示させるのが理想ですよね。
サイトを作る上で重要になってきた、レスポンシブウェブデザインについて
説明します。
レスポンシブウェブデザイン
レスポンシブウェブデザイン（responsive web design）とは、
表示させる媒体の画面サイズに応じて最適な表示に切り替える仕組みを
持つデザインのことです。
特徴として1つのページでPC画面とスマホ画面と両方に
対応させているので、別々のページを作る必要がありません。
そこで問題になるのが、PC画面サイズとスマホ画面サイズとの境目です。
あとタブレットにも対応させると境目が2つになります。
もっと細かくPC画面、タブレット横向き画面、縦向き画面、
スマホ縦向き画面、横向き画面と分ける場合もあります。
ちなみに縦向きをポートレート表示、横向きをランドスケープ表示と呼びます。
今回はPC、タブレット、スマートフォンと3画面に
対応した境目を考えてみます。
この境目をブレイクポイントと呼びます。
ブレイクポイント
PCの画面サイスの横幅は最低でも1,000ピクセルあるので
PCサイトを作る際に横幅を1,000px前後（960px～1040px）
にすることが主流になっています。
タブレット縦画面横幅最小がiPadの768pxでしょうか。
スマートフォンサイトの縦画面の横幅多いのが、
iPhoneの375pxですね。
ここから導かれるブレイクポイントは、
タブレット最小が768pxなので、スマートフォンとの境目を760px、
PCとタブレットの境目はPCサイトの最低960pxなので950pxぐらいが
いいのではないかと思います。
スマートフォンやタブレットは横向きのランドスケープ表示も
ありますが、スマホ横向きをタブレット縦向き、
タブレット横向きをPC画面で大丈夫でしょう。
ブレイクポイント書き方
PC画面を標準としたCSSに、ブレイクポイントを
スマートフォン画面用とタブレット画面用の記述は下記のようになります。
＜記述例＞
@media screen and (max-width: 760px) {
/* スマートフォン画面用記述 */
}
@media screen and (max-width: 950px) {
/* タブレット画面用記述 */
}また、レスポンシブデザインでスマホ対応にするために
HTMLでは headタグ内にmeta要素の「viewport」を記述します。
＜記述例＞
<meta name="viewport" content="width=device-width,initial-scale=1">content に記述する内容の意味は、
width=device-width：デバイスの幅に合わせた表示をする
initial-scale=1：初期倍率を1にする
これを記述すつことで、PC、タブレット、スマートフォンに
合わせた横幅で表示されます。
initial-scale というのは拡大倍率です。
PC画面とスマホ画面の動作確認
動作確認のため、以前の記事ショッピングカートを
表示させてみましょう。
【PC画面】
トップページ
商品詳細ページ
ショッピングカート
【スマートフォン画面（Android）GoogleChrome】
トップページ
商品詳細ページ
ショッピングカート
HTMLに「viewport」を記述すると下記の表示になります。
【スマートフォン画面（Android）viewport記述】
トップページ
商品詳細ページ
ショッピングカート
【スマートフォン画面（iPhone）viewport記述】
トップページ
商品詳細ページ
ショッピングカート
このようにviewportを記述することでスマートフォンの文字が
大きく見やすくなります。
PC画面でレイアウトしたので viewport を記述しただけでは
スマートフォンでの表示に最適化していないのでレイアウトが
崩れています、調整が必要ですね。
CSSにブレイクポイントを記述することで、
スマホ画面用のレイアウトを調整することができます。
コメント