Eastツイートするこの連載が本になりました!本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。(232ページ)ISBN:978-4-04-886323-0前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。大画面用のレイアウトのためにグリッドデザインの考え方も導入します。メディアクエリーの設定レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能です。Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。ブレイクポイントの決定ブレイクポイントとは、メディアクエリーによってCSSを切り替える条件となるポイントのことで、ブラウザーのウィンドウ幅(px)で考えます。デバイスに依存しないのがレスポンシブWebデザインの原則ですが、ユーザーが使うであろうデバイスを念頭に、以下の表のようにブレイクポイントを決めます。1024px「枝豆隊」の場合はシンプルなサイトですので、ブレイクポイントを768pxと1024pxに設定します。幅767pxまではデフォルトのレイアウト(1段組み)のままで、幅768px〜1023pxのときは1段組のまま文字を左寄せに、1024px以上のときはレイアウトを2段組にしてコンテンツの位置や画像サイズを変えてみましょう。480px未満、480px以上768px未満、768px以上1024px未満のブレイクポイントしたときのレイアウト表示ブレイクポイントを以上のように設定したので、それぞれのブレイクポイントごとにメディアクエリーを指定していきます。画面幅768px以上、1024px未満の場合、以下のように指定します。}メディアクエリーの中に書いたCSSは条件に合致する場合にのみ適用されます。書いてある幅320px用のCSSの後に768px用のメディアクエリーを書けば、画面幅が768pxの場合にのみCSSを上書きできます。枝豆隊では文字を左寄せに変更するだけですので、以下のように記述します。left}}これで、768〜1023pxの場合にのみ、#contents内のテキストが左寄せになります。実際にブラウザーの横幅を768pxにして表示すると図のようになります。768pxで表示したところ。画面幅1024px以上の場合にだけCSSを適用したい場合は以下のように指定します。}1024px以上では、ここまでの1段組みのレイアウトから2段組のレイアウトへ大幅に変更します。複雑ですので詳しく解説しましょう。一覧へDESIGNフルードグリッドとレスポンシブWebデザインの完成レスポンシブWebデザインの基礎をチュートリアルで学ぶ入門連載。フルードグリッドを導入してサンプルサイトを完成させよう。DESIGNメディアクエリーの設定とグリッドデザインの導入レスポンシブWebデザインの基礎をチュートリアルで学ぶ連載。メディアクエリーを使ってCSSを切り替え、グリッドデザインの考え方を導入する。DESIGNCSSでスマートフォンでも見やすくスタイリングレスポンシブWebデザインによるサイト制作の基本を学ぶ連載。今回はヘッダー、メインコンテンツ、フッターなどの各領域のCSSを設定して見栄えを整えてこう。DESIGNフルードイメージの導入とタイポグラフィの設定レスポンシブWebデザインに必要な技術的な要素「フルード・イメージ」を導入し、読みやすさに考慮して文字サイズを決定しよう。DESIGNHTMLの用意とリセットCSSの作成レスポンシブWebデザインによるサイト制作入門。ページの基本となるHTMLを用意し、CSSの初期設定を記述しよう。DESIGNレスポンシブWebデザインのワークフローと画面設計レスポンシブWebデザインによるWebサイト制作の流れを理解し、サイト制作に必要な画面設計と下準備を始めよう。この記事の編集者は以下の記事をオススメしていますDESIGNゼロから始めるレスポンシブWebデザイン入門スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。Design)が海外で注目を集めている。どのようなアプローチなのだろうか。00DESIGN流行期を過ぎたレスポンシブ・Webデザインのこれからレスポンシブ・Webデザインが誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。スマホお気に入り一覧マイページ。