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

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

PDFテンプレートの活用

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

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …

アーカイブ