CSSによるレイアウト

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

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

ぜひご覧ください。

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

字幕

このレッスンでは レスポンシブレイアウトについて より深く理解するために desolve.olgという サンプルサイトの レイアウト実装プランを紹介します このプランの実装については あなたご自身で行ってみてください 現在ブラウザでは これから紹介する実装プランの 完成例のファイルを表示しています このレスポンシブレイアウトの中には 異なるブレイクポイントがあります ウィンドウサイズを変更して ブレイクポイントに達したとき レイアウトが変化することに気づくでしょう このようにレイアウトは変化しています それぞれのレイアウトには いくつかの大きな違いがあります 例えば、この画像が表示されている箇所 この箇所は、デスクトップのスタイルの時と タブレットのスタイルの時で 大きくレイアウトが異なります また、デスクトップには サイドバーにメニューが表示されていますが こちらは、タブレット用のスタイルの時は プルダウンメニューに変わっています さらに、ウィンドウサイズを小さくして モバイル向けのレイアウトになると 一番上のメインイメージ については非表示になり ナビゲーションのアイコンが 大きく表示されています このように、メディアクエリを使って スクリーンサイズに合わせて レイアウトを切り替える という実装プランです エディタに切り替えましょう すでにサンプルファイルの index.htmとmain.css を開いています これらは、先ほどブラウザでみた 完成例のファイルではなく レスポンシブレイアウトを 実装前の状態です さて、CSSファイルに切り替えると コメントの中にWebサイトの 実装プランについて 必要なステップが書かれています まず、これを見ながら このWebサイトを完成させるために 何が必要なのか確認していきましょう 始めに、index.htmについてです ここでは、モバイルデバイスから見たときに ページの幅がデバイスの幅になるように また、初期表示時のスケールが 100%になるように メタタグを使って ビューポートを指定します 次の2から4のステップは それぞれの別の行に対して それぞれのメディアクエリを 作成するというものです ステップ2では 幅が481ピクセル未満の環境に対して モバイルデバイス用のメディアクエリを ステップ3では 幅が481ピクセルから 768ピクセルの間の環境に対して タブレット用のメディアクエリを ステップ4では 幅が768ピクセルより 大きい環境に対して デスクトップ用の メディアクエリを作成します 具体的に記述する箇所を 確認してみましょう モバイル向けのメディアクエリを書く 298行目までスクロールします ここでは現在、@media とだけ書かれています この箇所に先ほどの条件で メディアクエリを記述します 他の2ヶ所についても同様です さて、ステップの続きに戻りましょう 次のステップ、ステップ5は モバイル用とタブレット用のスタイルに サイドバーのアーカイブドギャラリーズ というメニューが非表示になるように セレクターとスタイルを記述します アーカイブドギャラリーズメニュー とはどれのことでしょうか HTMLに切り替えてみます 下にスクロールすると ul要素でマークアップされた メニューが表示されています これを非表示にしてください 逆に、デスクトップ用のスタイルでは その下にある、select要素 つまり、プルダウンメニューを 非表示にします cssに戻りましょう 今確認した要素について スタイルを各ステップが、5と6です 最後にステップ7です ここでは、モバイル用と タブレット用のスタイルで ギャラリー画像に対して サイズの小さい画像を指定します すでに大きい画像のスタイルが 設定されていますので 差し替えを行う、ということになります サンプルファイルの中には すでに小さい画像が用意されています イメージズディレクトリーの中に sm_というファイル名で始まる 画像ファイルがいくつかありますので 探してみてください さて、ここまでサンプルサイトの 実装プランについて紹介してきました サンプルファイルを基に、実際に考え ファイルを編集してみてください このレッスンでは レスポンシブレイアウトについて より深く理解するために desolve.olgという サンプルサイトのレイアウト 実装プランを紹介しました

CSSによるレイアウト

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

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

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

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

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