レスポンシブWebデザインとメディアクエリーの切っても切れない縁

レスポンシブWebデザインとは

レスポンシブWebデザインとは、1つのHTMLをCSSで制御し、

ユーザーが閲覧するデバイスの画面サイズに応じて

ページのレイアウト・デザインを最適化して表示させる技術のこと

スマートフォンやタブレットからのアクセス数が増加している今、

レスポンシブWebデザインはモバイル対応に非常に有効なものだと言えるでしょう。

引用元 : http://www.asobou.co.jp/blog/web/responsive

 

実際に製作する際の手順と作成方法

1. ビューポート(viewport)タグを記述する
headタグ内に以下のソースコードを記述します。

 

2. ブレイクポイントを決める

ブレイクポイントとは、CSSの切り替え地点のことをいいます。

例えば、PC用とスマートフォン用の表示を作成したい場合、画面幅が何pxになったときに

切り替えたいか、サイズを計算してレイアウトを決めます。
デバイスによって画面幅は様々です。

ブレイクポイントの数と値に決まりはありませんので、

実際に作る際は見本サイトや書籍を参考にして製作に入るといいです。

 

3. メディアクエリでCSSを記述する

min : 最小サイズ

max : 最大サイズ

サンプルデモ

メディアクエリとは

CSSでPC、スマホ、タブレットする際に記述するコードのことで、書く文言が決まっています。

@をつけてサイズを指定することで簡単に設定できます。

例)

0px~480pxの画面サイズにCSSを適応させる →
@media screen and (max-width: 480px) { セレクタとプロパティ名 }

480以上の画面サイズにCSSを適応させる→
@media screen and (min-width: 480px) {セレクタとプロパティ名 }

480px~1024pxの画面サイズにCSSを適応させる→
@media screen and (min-width: 480px) and ( max-width:1024px)  {セレクタとプロパティ名 }

 

書き方の一例

ソースの参考元:http://dotinstall.com

コメントを残す

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

CAPTCHA