レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。

スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。

要は通常の980px分をそのままiPhoneの画面に収まるよう縮小した状態で表示されます。

これを解決するために、動的に幅を変更させることができるが、viewportというタグです。

htmlの中に、

という一文をいれれば、その幅に合わせた表示をします。

またそれ以外にも下記のように記すと閲覧している端末の画面幅と同じ数値が適用されます。

webサイトがレスポンシブに設定されている場合にはこのタグがのぞましいです。

このタグのいみですが、幅をデバイスに合わせるという意味です。そのまんまですね・・・initial-scaleは0.5とかとやるとデバイスの幅の半分になります。

もう逃げない。HTMLのviewportをちゃんと理解する

携帯サイト画面に適応する Viewport

他、注意点なんぞを。

• cssでは幅をパーセント表記
• box-sizing: border-box;を指定し、パディングとボーダーを幅と高さに含める。
• 横スクロールを防ぐため、wrapper的なボックスにはoverflow:hiddenを入れる
• 内部コンテンツは幅をmax-width:100%;に設定
• タブレット用のレイアウトを設定する場合は@media screen and (max-width: )などで一定幅以下のサイト用のCSSを用意しておく
• なるべく画像を使わない
• 読み込みファイルサイズを極力少なくすべし
• ホバー時のエフェクトをスマホの時は変える(スマホではホバート同時にクリックしてしまうので)