- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!レスポンシブWebデザイン
[HTML][CSS][CSS3]
{{amazon 4048863231}}
かなりわかりやすい。
*[「レスポンシブWebデザインとは」|http://ascii.jp/elem/000/000/697/697463/]のまとめ
!!レスポンシブ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を記述
*リサイズツール
**[Resizer|http://sixfoot1.com/safari-extensions/resizer/]:Safari
**[Window Resizer|https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh]
**[Firesizer|https://addons.mozilla.org/ja/firefox/addon/firesizer/]
!文字コードの指定
@charset "utf-8";
!!ブラウザ独自のスタイルをリセット
!normalize.css
ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応
*http://necolas.github.io/normalize.css/
!CSS Reset
ブラウザデフォルト指定を無くして、さらの状態からスタート
*http://www.cssreste.com
*http://www.cssreset.com
!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 */
