レスポンシブWebデザイン
ナビゲーションに移動
検索に移動
レスポンシブWebデザイン
かなりわかりやすい。
レスポンシブWebデザイン(Responsive Web Design)
- PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
- スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作
構成する技術
フルードグリッド(Fluid Grid)
デザイン | 内容 |
---|---|
グリッドデザイン(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の指定
<meta name="viewport" content="width=device-width ">
- width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味
スタイルシートの作成
- CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
- 小さいスクリーンサイズの基準は、幅320px
- 幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
- リサイズツール
- Resizer:Safari
- Window Resizer
- Firesizer
文字コードの指定
@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 */
© 2006 矢木浩人