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

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-65e66a …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

アーカイブ