| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

レスポンシブWebデザイン

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

レスポンシブWebデザイン

HTML | CSS | CSS3 |

かなりわかりやすい。

レスポンシブWebデザイン(Responsive Web Design)

  • PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
  • スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作

構成する技術

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

  • 以下を合わせたもの
  • 最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更
デザイン 内容
グリッドデザイン(Grid Design) Webページの要素を罫線や升目に沿って配置
フルードデザイン(Fluid Design) 横幅が変わってもレイアウトを維持したまま要素のサイズを調整

フルードイメージ(Fluid Image)

  • レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装

メディアクエリー(Media Query)

  • メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術

その他技術

  • レスポンシブタイプセッティング(Responsive Typesetting)
    • 文字をレイアウトの大きさに追随して伸縮
  • レスポンシブテーブル(Responsive Table)
    • テーブル(表組)のサイズを調整

モバイルファースト

GROWTH=OPPOTUNITY 「成長」=機会

  • モバイル端末の市場自体、今でも大きく成長

CONSTRAINS=FOCUS 「制約」=集中

  • 無駄なコンテンツは削ぎ落とされる

CAPABILITIES=INNOVATION 「機能」=能力

  • スマートフォンならではの機能

HTMLの用意とリセットCSSの作成

HTML5

  • 古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう

viewportの指定

  • head要素内にあるmeta name="viewport"は、スマートフォン向けのviewportの設定
  • viewportはHTMLドキュメントにmeta要素でhead要素内へ記述
<meta name="viewport" content="width=device-width ">
  • width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味

スタイルシートの作成

  • CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
  • 小さいスクリーンサイズの基準は、幅320px
  • 幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
  • リサイズツール

文字コードの指定

@charset "utf-8";

ブラウザ独自のスタイルをリセット

normalize.css

ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応

CSS Reset

ブラウザデフォルト指定を無くして、さらの状態からスタート

marginとpaddingのリセット

*{margin: 0; padding: 0}

a要素の下線、ul、ol要素の「・」のリセット

a { text-decoration : none}
ul, ol { list-style : none}

img要素の余計な余白(ディセンダー)のリセット

img{ vertical-align : middle}

フルードイメージの導入とタイポグラフィの設定

「フルードイメージ」による画像の伸縮

  • ウィンドウサイズより大きい画像でも、ウィンドウサイズ(または親要素の幅)に応じて、縦横比を保持したまま自動的に画像が拡大・縮小
img{ max-width : 100%}

タイポグラフィ(文字周り)の設定

  • ブラウザーのフォントサイズはデフォルトで16px
  • 日本語のテキストでは、一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされている:line-heightプロパティの値には1.5
html {
font-family : verdana, sans-serif;
line-height : 1.5}

見出しの指定

  • 前に決めた1行の高さ(24px)を基準にして一定の間隔で要素が配置されるように
  • ここでは、h1要素を48px、h2を36px、h3を24px、h4、h5、h6を16pxに指定
h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {
font-size: 48px; 
line-height: 1} /* 48px */
h2 {
font-size : 36px;
line-height : 1.3333} /* 48px */
h3{
font-size : 24px;
line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {
font-size : 16px;
line-height : 1.5} /* 24px */