CSSによるレイアウト

コンテンツをレスポンシブに対応する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メディアクエリーを使ってコンテンツの内容に対してレスポンシブレイアウトを適用する方法について学びます。
講師:
11:54

字幕

このレッスンでは メディアクエリーを使って コンテンツの内容に対して レスポンシブ レイアウトを 適用する方法について学びます 画面ではブラウザで サンプルファイルの完成版である content.htm を開いているところです このレッスンで取り組む部分について 説明していきます 画面の右側には Archived Galleries というメニューがあります この左横にメインイメージがあります ブラウザのウィンドウサイズを変更して 縮めていくと このウェブページがレスポンシブ レイアウト であることがわかります タブレット用のブレイクポイントに達すると メインイメージとメニューが 縦に並ぶように レイアウトが変化します またメインイメージの内容も 変化しています さらに縮小を続けると モバイル用のブレイクポイントに達します ここでもメインイメージの内容が 変わっています また モバイル用の画面では スペースに限りがありますので メニューの代わりにドロップダウンメニューが 表示されています またドロップダウンメニューの中には 先ほどのメニューと同じ項目が 表示されています ページの構造自体は すべて共通です ここで変化しているのは スタイル CSS のみです それでは この HTML と CSS が 完成する前のサンプルファイルを エディタで開き 今 ご覧いただいたように コンテンツをレスポンシブ レイアウトに 対応する方法を紹介していきましょう エディタに切り替えます ここではサンプルファイルの HTML を 開いており その中に CSS も含まれています ページの構造は 少しトリッキーになっています 下の方までスクロールして 確認してみましょう bannerクラスというクラスが適用された section 要素があります これは先ほど見たメインイメージを 表示するためのものです この section 要素の中には Fine urban photography というテキストを含む h2 要素があります その下には menu クラスが適用された section 要素があります 多くのリンクがリストとして マークアップされています しかし さらにその下を見ると 同じリンク先を持った プルダウンメニューも マークアップされています つまり 何をやりたいかというと スクリーンサイズに応じて これらのメニューの どちらを表示するか ということを メディアクエリーを使って 制御しています これは あまり理想的な方法ではありません なぜなら 通常のメニューと プルダウンメニューは HTML の中で 明らかに意味が重複してしまっており テキストブラウザや音声読み上げ機能などで 閲覧すると 不都合が発生するためです これを解決するにはJavaScriptか サーバーサイドのコードによって 2 つの内の 1 つだけを HTML に出力するよう 実装する方法があります しかし ここではあくまで メディアクエリーの説明を わかりやすくするために あえて 2 つのメニューを HTML に記述し CSS だけで制御しています それでは スタイルに戻りましょう ここに 非常によく似た内容の メディアクエリーが いくつかあります これらは条件式によって適用されるスタイルを 分岐しており 上からモバイル用のスタイル タブレット用のスタイル デスクトップ用のスタイル という風に順番で並んでいます 始めにタブレット用のスタイルに スタイルを追加していきましょう スタイルを追加する前に 追加しようとしている場所が メディアクエリーの中括弧の 内側である ということを確認してください 外側に記述しても 正常に機能しません menu に対するスタイルを 書いていきましょう まず menu クラスの中にある プルダウンメニューに対するセレクタです タブレットで表示している時は プルダウンメニューを表示したくないので display プロパティを none にして非表示にします プルダウンメニューは select 要素で定義していますので select を記述し display プロパティを使って none にします これはデスクトップでの表示でも同じですので このルールをコピーして デスクトップ用のスタイルにも ペーストします これでタブレットとデスクトップでの 表示時は プルダウンメニューが非表示になるように なりました 一方 モバイルでの表示では プルダウンメニューは 表示されなければなりません 上にスクロールして モバイル用の メディアクエリーの中に スタイルを記述していきます ここではプルダウンメニューを 表示するのと同時に 通常のリスト形式のメニューを 非表示にするスタイルも必要です そのためここでは menu クラスの中の ul 要素に対してセレクタを作り 非表示に設定します display none を使います その下にプルダウンメニューを表示するため menu クラスの中に select 要素があるこのセレクタに対して 幅 200 px display は block そして margin に対して 1em auto を設定します これによりプルダウンメニューは モバイルの時のみ 幅 200 px で block level 要素として 上下に 1em のマージンを設けながら 左右にセンタリングされて 表示されるようになります コードを保存し このページをブラウザで確認してみましょう まだメインページについては 実装していませんが メニューが表示されています デスクトップとタブレットでの表示では ドロップダウンメニューではなく リストのメニューが表示されています モバイルでの表示では プルダウンメニューが表示されるはずです 確認してみましょう 幅を狭くして モバイル用のスタイルが適用されると メニューがプルダウンメニューになっています これで実装ができました 次はメインイメージについて 考えていきましょう エディタに戻ります まず デスクトップ用の表示から スタイルを作成していきます 156 行目に banner セレクタがあります これがメインイメージを表示するための コンテナになりますので ここに高さ つまり height プロパティで 450 px を指定します この高さはこれから表示しようとしている 画像と同じ高さです そして画像は CSS の バックグラウンドイメージ 背景画像として表示します ここでは background プロパティを使って URL images というフォルダの中にある stairs.jpg この画像ファイルを利用します 画像が ループして表示されないように no-repeat も追加します これでデスクトップ用のスタイルは 完成です 同じようにタブレットとモバイルにも スタイルを適用しましょう タブレット用のスタイルまで スクロールします 先ほどとは違う値を使いましょう height プロパティ 高さに 150 px を指定します そして画像の URL は 同じ images ディレクトリの中にある 今度は違うファイル sub.jpg という画像ファイルを使います no-repeat を指定することは同じです 続いてモバイル用のスタイルまで スクロールします 同じように banner クラスセレクタを 見つけます そして 高さに今度は 200 px 画像の URL は images ディレクトリの 中にある glass.jpg という画像ファイルを 指定します no-repeat は やはり共通です ここで img 要素ではなく CSS の背景画像を使っているには いくつかの理由があります 第一に メインイメージは 装飾のためだけの画像ですので 表示される領域が変化して トリミングされても 問題がないからです 第二に メディアクエリーを使って 画像を入れ替える時に img 要素を使うよりも 背景画像を使ったほうが 簡単だからです そして第三に 背景画像を使うことで それを表示するための処理を 最適化することができます このケースでは デスクトップでの表示は デスクトップで表示する画像だけを タブレットでの表示時には タブレットで表示する画像だけが リクエストされます つまり ユーザが必要とされる画像だけが 実際にダウンロードされ 表示されることになります 他の画像はダウンロードされません もちろん ブラウザのウィンドウサイズを 変更して 他のブレイクポイントに達した場合は その時点で必要になった画像が ダウンロードされます これによりサーバに送信される http リクエストの数を 抑えることができています それでは これを保存し ブラウザに戻って リロードしてみましょう メインイメージが表示されました ウィンドウサイズを縮めると タブレット表示のブレイクポイントに 達した瞬間 メインイメージも変化しています 同様に モバイルまで縮めても メインイメージが変化しています ここで紹介した例は かなりシンプルなもので 実際のウェブサイト制作では もう少し複雑なコードが必要になるでしょう コンテンツにレスポンシブ レイアウトを 適用する場合 ページの構造やスタイルについて 慎重に考慮する必要があります 多くのユーザがデスクトップ モバイルなどの多様なデバイスを 使っていることを理解し 一つのデバイスだけで美しく見えることに 執着しすぎず それぞれに最適化したコンテンツを 作ることが大切です このレッスンでは メディアクエリーを使って コンテンツの内容に対して レスポンシブ レイアウトを 適用する方法について学びました

CSSによるレイアウト

このコースでは、大きく3種類に分かれたCSSによるレイアウトについて解説します。ピクセルパーフェクトなデザインを実現しやすい固定レイアウト、スクリーンやウィンドウのサイズ変更に対して変化する可変レイアウト、ユーザーの環境に応じて最適なレイアウトを提供できるレスポンシブレイアウトなどについて丁寧に説明します。

2時間40分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。