レスポンシブデザインWebサイトの作製

レスポンシブ

html5でウィンドウサイズを可変すると　スマートフォン、タブレット、デスクトップなどの

決まったデバイスのサイズになると一瞬にそれぞれの適応サイズに変わる。

レスポンシブデザインの技術

  • フルードグリッド
    • フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。
  • フルードイメージ
    • フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター（Richard Rutter）氏によって提唱されました。
  • メディアクエリー
    • メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

レスポンシブの下準備

作成時にhead内に

<meta name="viewpord" content="device-width">

を挿入することでスマホやタブレットデバイスに適応できる。

スマホのプラウザは仮想ウィンドウサイズ「viewpord」が設定しており、
更に、content="width=device-width "と
指定することで「viewportの幅をデバイスのスクリーンの幅に合わせる」という指示を命令できる。
viewportの幅はスマホの機種、それについてるプラウザ毎により幅の規格が違うので
content="width=device-width "をすることで自動的にデバイスプラウザ毎の幅に指定してくれる。

デバイスプラウザ毎の幅

ブラウザ標準viewportサイズ
Opera Mobile850pixels
iPhone Safari980pixels
Android800pixels
Windows Phone 71024pixels



cssでimgセレクタやコンテンツボックスの指定セレクタにmax-width:100%;を指定することで
プラウザウインドウの幅に合わせて画像幅を揃えてくれる。

img{
max-width:100%;
}

ただし元img画像の幅が仮に300pxだと、プラウザウインドウの幅が300以上にしても

img画像が300以上にならない。

テキストレイアウトのCSS

line-heightはアルファベット表記のPCデバイスや日本語スマホデバイスだと表示面積が狭いので１．５ぐらいでもいいが1０インチ以上のPCだと日本語表記のページは1.6か1.7ぐらいあればいいかも。

補足

line-heightは指定したセレクタのfont-sizeが16pxの時
line-height:1.5で指定するとそのセレクタの文字の高さがfont-sizeの0.5倍、8pxを上下に割り振る。
つまり16pxにpadding-topとbottomに4pxずつ間を空けることができるので実質その1行を24pxの高さを
設定できる。

メディアクエリー

メディアクエリーとはデバイスの画像解像度、ウインドウ幅、デバイスを傾けることで幅が
変わるものなどによってそれらにあわせたレイアウトCSSに適応する機能。

メディアクエリーを使ったCSSの切替条件を決めるポイントをブレイクポイントという。
ブレイクポイントはブラウザーのウィンドウ幅（px）で考えます。

480px以上768px未満 スマホ
768px以上1024px未満 タブレット
1024px以上 PC

...といった風にそれぞれのブレイクポイントにあったメディアクエリーを指定してきます。