CSSによるレイアウト

レスポンシブレイアウトの実装例

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブレイアウトについてより深く理解するために、desolveorgというサンプルサイトのレイアウト実装プランに基づいて、実際に実装を行った例について紹介します。
講師:
08:26

字幕

このレッスンでは レスポンシブレイアウトについて より深く理解するために desolve.org というサンプルサイトの レイアウト実装プランに基づいて 実際に実装をおこなった 例について紹介します 画面はエディタで サンプルファイルの index.htm と main.css を それぞれタブで開き 現在は main.css を 開いているところです 最初の実装は モバイルデバイスから見たときに ページの幅が デバイスの幅になるように また初期表示時のスケールが 100%になるように メタタグを使ってビューポートを指定する という実装です そしてその実装が HTML ファイルの 6行目にあります この行の部分です 2つのプロパティが カンマ区切りで区切られて 指定されています 複数のプロパティを 指定するときには このカンマを忘れがちですので 注意してください 構文がこの実装例と 同じようになっているかどうか 確認してみましょう 次に main.css に戻り メディアクエリの記述について 見てみましょう 最初のメディアクエリは モバイルデバイス用の メディアクエリです もうひとつはタブレット用で もうひとつはデスクトップ用です 下にスクロールして 実装を確認してみましょう この行にあるのが モバイルデバイス用の メディアクエリです このメディアクエリでは 最大幅は 480ピクセルのスクリーンを 指定していることがわかります この中のスタイルは 幅が480ピクセルより 大きいスクリーンには 適用されません 続いてタブレット用の メディアクエリです タブレット用の メディアクエリは こちらになります ここでは minimum width に 481ピクセル max width に768ピクセルが 書かれており 値の範囲を指定していることが わかります このとき 指定している値が ほかのメディアクエリと 競合をしないように 注意してください そして最後のメディアクエリは デスクトップ用です デスクトップ用の メディアクエリは こちらのようになります ここでは minimum width を 769ピクセルに指定しています タブレットよりも 大きいスクリーンでは このスタイルが 適用されます さて 冒頭にあるステップに 戻りましょう 次におこなったのは モバイルと タブレット用の スタイルで メニューがマークアップされている リスト要素を非表示にすること さらに次のステップでは デスクトップ用スタイルで プルダウンメニューを 非表示にすることです それぞれ 確認してみましょう モバイル用のスタイルに スクロールします 追加したセレクタは aside navi ul というセレクターです これはサイドバーにある ナビゲーションの中の リスト要素でマークアップされた メニューを示しています そしてこの中では それを 非表示にするスタイルが 書かれています ここでは このようなセレクタを 使っていますが 同じ結果を 少し違ったセレクタで 実現する場合も あるでしょう それは まったく問題ありません 同じセレクタと スタイルを タブレット用スタイルにも 適用しています 次に デスクトップ用スタイルまで スクロールします こちらが 指定のセレクタです プルダウンメニューに対して スタイルを記述するため ナビ要素の中にある セレクト要素 こちらを セレクタとしています そして 非表示にするための スタイルがあります これで モバイルと タブレットでは リスト要素でマークアップされた メニューが デスクトップでは セレクト要素 つまり プルダウンメニューが それぞれ非表示になります 最後のステップを確認するために 再度 上まで スクロールしましょう 最後のステップはモバイル用のスタイルと タブレット用のスタイルで使っている 画像を 小さな画像に 差し替える というものです モバイルスタイル用の 該当部分を見てみましょう 下までスクロールします ここでは sm_ という ファイル名で始まる画像が 読み込まれていることがわかります 同じことが タブレット用スタイルでも おこなわれています これらは デスクトップ版の スタイルで指定している画像と比べて 小さい画像になっています これですべての実装について 説明しました すべてのステップを思い出すと これらは 単にレイアウトを レスポンシブレイアウトにするためだけの ものではない ということがわかります 目的のレイアウトを 実現するためには 考慮しなければならないことが たくさんあります たとえば レスポンシブレイアウトを習得するには 固定レイアウトや 可変レイアウトについての 知識も必要になります またそれ以外にも スマートフォンや タブレットなどの スマートデバイスを ターゲットにするために 通常のスクリーンと タッチスクリーンの特性についても 知る必要があります たとえば ここまで紹介した 実装例で 話をしましょう ブラウザに切り替えます 画面上部の メニュー部分に 注目をしてください これはもともとの実装プランでは 予定していなかった箇所ですが レスポンシブレイアウトのための 重要なポイントです ウインドウサイズを縮めると メニュー部分のレイアウトが 変化することがわかります 今 変化がおこなわれました さらに縮めると また変化しました よく見ると モバイル用のメニューのアイコンは デスクトップ用とタブレット用と比較すると より大きく表示されていることが わかります これが タッチスクリーンへの 最適化です タッチスクリーンは 当然 指で操作しますので 一般的にリンク領域を 広くする必要があります 小さいリンクや それがタップできるのかどうか わからないリンクは ユーザーを イライラさせる要因です そのためこのように スクリーンの特性をふまえた 最適化が 必要になります またデスクトップとタブレットでは もうひとつ違いがあります デスクトップでは メニューの下に 説明文が表示されています しかし タブレット表示に切り替わると この説明文が消えています これはミスではありません デスクトップ以外の環境では 解像度が狭くなるため 余分な情報を カットしているのです それぞれの環境には それぞれの特性があります そのためすべての環境で 同じ情報を 同じように提供するのではなく 環境に応じて ユーザーが最も必要としている コンテンツを 最適化した形で 提供する必要があります また同様に メインイメージや ギャラリーの写真についても 表示される幅に応じて 様々な表示の工夫が おこなわれています 実際に サンプルファイルを ブラウザで表示しながら 色々と試してみてください このレッスンでは レスポンシブレイアウトについて より深く理解するために desolve.org というサンプルサイトの レイアウト実装プランに基づいて 実際に実装をおこなった例について 紹介しました

CSSによるレイアウト

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

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

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

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

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