!!!レスポンシブ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要素内へ記述 *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.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 */