• このエントリーをはてなブックマークに追加

様々なデバイスに合わせてWebコンテンツのレイアウトを最適化し、美しく見せるための一つの手段やWebデザイン。

サーバー側でPCなのか、タブレットなのか、スマートフォンなのかを判断して、それぞれのデバイスごとにHTMLソースコードやCSSを適用されるものではなく、現在表示されている同じHTMLを元にCSS、画像等を使用して、主に画面の幅を元にCSSのメディアクエリーを使って、表示の最適化をする。

CSSで表示非表示を切り替える。画像は大きく作る。なるべく共有化出来る・使いまわし出来る画像はPC・スマートフォン・タブレットに限らず1枚にする。

3つの構成要素

  • メディアクエリー
    • CSSのデバイス幅でCSSの切り替えを行う
    • 500px~800pxまではAというCSS、801px~1200pxまではB、それより大きい物はCと言った具合に
    • 例:@media screen and (max-width: 1000px) 幅が最大1000pxの時に適用される
    • 例:@media screen and (min-width: 0) and (max-width: 500px) 幅が最小0px~最大1000pxの時に適用される
  •  フルードイメージ
    • イメージサイズをデバイスやボックスの幅に合わせて最適化する
    • max-width:100%, height:autoなどで実現する
  • フルードグリッド
    • 可変レイアウト
    • 今までよく指定されてきた、pxをベースとしていたものではなく、%(パーセント)を幅基準として、比率を保ちながらレイアウトを行う。ある程度画面が小さくなると、横に並べていたものが小さく表示されてしまうので、その幅になる時には、2カラムだったものを1カラムにするなど、メディアクエリーで指定する