skillup

技術ブログ

UI デザイン

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

投稿日:2016年9月15日 更新日:

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

スマホでは何も指定しなければブラウザはウェブサイトの幅が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を用意しておく
  • なるべく画像を使わない
  • 読み込みファイルサイズを極力少なくすべし
  • ホバー時のエフェクトをスマホの時は変える(スマホではホバート同時にクリックしてしまうので)

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5fc2c …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …