レスポンシブwebデザイン

レスポンシブWebデザインを実現するための技術１

・メディアクエリ(Media Queries)

・フルードグリッド(Fluid Grid)

ページの構成要素を任意のグリッドに沿って配置する「グリッドデザイン」と、各要素のレイアウトの幅を%で指定し、新宿させる「リキッドレイアウト」

それらを組み合わせたレイアウト手法で、全体のカラムを可変させる手法をフルードグリッドという。

・フルードイメージ(Fuid Image)

・メディアクエリを使うことで、ウィンドウサイズに合わせてCSSを切り替えることができる。

<link rel="stylesheet" href="comon.css" type="text/css" media="screen" />

<link rel="stylesheet" href="comon.css" type="text/css" media="print" />

記述方法

＠media only screen and(min-width:480px) and(max-width: 768px){ここにCSSを書いていく}

ブレイクポイント

CSSを分岐する場所

PC　タブレット縦　スマホ縦

★コンテンツの横幅が960pxのサイトをMedia Queriesで分岐する場合

/* Defauld -------- */
/*  iPad Smaller than 959px ---------*/
@media only screen and(max-width: 959px{
コンテンツ幅から1px引いたサイズを入れ、ipadなどの大きなタブレット画面以下に対応}

/* Smartphones(landscape) -------- */
@media only screen and(max-width: 767px){
ipad縦サイズ(767px)から1px引いたサイズを入れ、ipone横サイズ画面以下に対応}

下にあるものほど強いので、上からおおきいじゅんに記していく！徐々に小さいものに対して指示していく。

★レスポンシブWEBデザイン検証ツール

Chromeの要素検証ツール内にあるモバイルボタンを押すと各デバイスごとの見え方の確認ができます。