skillup

技術ブログ

UI デザイン

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

投稿日:

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

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

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

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

htmlの中に、

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

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

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

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

http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

http://keicode.com/mobile/viewport.php

他、注意点なんぞを。

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

 

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …