menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/03/17
  • CSS
  • html5

初心者でも簡単!レスポンシブWEBデザイン メディアクエリ(Media Queries)

レスポンシブWebデザインとは、PC、タブレット、スマートフォンなど、複数の異なるデバイスでページのレイアウト・デザインを最適に表示させることです。レスポンシブでWEBサイトを制作する場合、1つのHTMLファイルを、CSS(Media Queries)を使用しブレイクポイントで制御しページのレイアウト・デザインを設定します。
mediaq

使用方法

viewportを記述する

HTMLの<head>~</head>内に「viewport」を記述します。

CSSファイルの書き方

CSSファイルにPC、タブレット、スマホなどに適したwidthサイズをメディアクエリで書いていきます。
大きいサイズから指定していく方法を“デスクトップファースト”、小さいサイズから順々に指定いく方法を“モバイルファースト”と呼びます。ブラウザはファイルの上から下へと順番に読込HTMLに適用していきます。
今回は“デスクトップファースト”で書いていきます。

IE8以下対応

IE8以下は未対応なので、Googleコードで公開されているスクリプトを使用して対応します。
css3-mediaqueries.js

メリット/デメリット

PCのブラウザで表示する場合ウィンドウの幅を変更すると画面の内容が変わっていきます。
【メリット】
・URLが統一される。
・1つのHTMLファイルで対応できるので、メンテナンスや更新が簡単。
・各デバイスの設計が統一されているので、ユーザーから見てもコンテンツがわかりやすい。

【デメリット】
・デザインには限界が出てくる。
・制作後の作業工数の軽減にはなるが、多くのデバイスに対応させるため、設計やデザインをおこなう際にはとても慎重におこなう必要があります。
・スマートフォンで表示させた場合、ページの読み込みが重くなる可能性がある。

オプションをうまく使用すれば色々な表示を選ぶことができるので、自分の好みに合うスライダーの表示に近づけると思います。スライダーを選ぶなら一押しのjsです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11