差分

==[[レスポンシブWebデザイン]]==

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

*最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更最初にグリッド[[デザイン]]によって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルード[[デザイン]]に変更

![[デザイン]]

|グリッドデザイン（Grid グリッド[[デザイン]]（Grid Design）

|フルードデザイン（Fluid フルード[[デザイン]]（Fluid Design）

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

*メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々の[[CSS]]を適用する技術====その他技術[[その他]]技術====*レスポンシブタイプセッティング（Responsive レスポンシブタイプセッティング（[[R]]esponsive Typesetting）

*レスポンシブテーブル（Responsive レスポンシブテーブル（[[R]]esponsive Table）

====GROWTHG[[R]]OWTH=OPPOTUNITY 「成長」＝機会====

====CONSTRAINSCONST[[R]]AINS=FOCUS 「制約」＝集中====

====CAPABILITIESCAPABILIT[[IE]]S=INNOVATION 「機能」＝能力====

==HTMLの用意とリセットCSSの作成[[HTML]]の用意とリセットCSSの作成=====HTML5[[HTML]]5===*古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう古いブラウザーのサポートが必須の場合など、特別な事情がなければ[[HTML]]5を使って記述しましょう====viewportの指定[[vi]]ewportの指定====*head要素内にあるmeta name="viewport[[vi]]ewport"は、スマートフォン向けのviewportの設定は、スマートフォン向けの[[vi]]ewportの設定*viewportはHTMLドキュメントにmeta要素でhead要素内へ記述viewportは[[HTML]]ドキュメントにmeta要素でhead要素内へ記述 <meta name="viewport[[vi]]ewport" content="width=devicede[[vi]]ce-width ">*width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味は、「[[vi]]ewportの幅をデバイスのスクリーンの幅に合わせる」という意味

*CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述[[CSS]]の記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述

*幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながら[[CSS]]を記述

====文字コードの指定[[文字コード]]の指定====

====[[CSS ]] Reset====