CSSによるレイアウト

可変レイアウトの実装プラン

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

ぜひご覧ください。

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

字幕

このレッスンでは 可変レイアウトについて より深く理解するために dissolve.orgという サンプルサイトの レイアウト実装プランを紹介します 主要な箇所では 参考になるような情報交えます 目的の幅 間隔を実装するためには どの要素にどのようなスタイルが 必要になるかを決めるため レイアウト見ていきましょう またレイアウトのため ページ全体に適切な幅の範囲を 決めなけれなければいけません 内部の様子にもCSSが必要です これらをあなたご自身で 行ってみてください 現在ブラウザでサンプルファイルの index.htmを開いています レイアウトはまだ完成していないようです また適切なスペースも与えられていません 一応可変レイアウトにはなっていますが 最終的に目指す形は もう少し良いものです 別のタブにこのレッスンで紹介する プランを全て実装した htmlを開いています タブを切り替えます 可変レイアウトが完成してますね 特定のサイズでレイアウトの変化が 止まるように最大幅と最低幅は 設定されています ウィンドウサイズを変更すると このように最低幅が設定されています また下にスクロールすると これら2つの要素は 適切なスペースを保ったまま 可変するようになっています またサイドバーにある画像も 可変になっており 必要に応じて実寸のサイズで 表示されるようになっています エディターに切り替えます すでに先ほど見ていた実装前の htmlとそこで使われている CSSファイルを開いています CSSファイルに切り替えます ここにこのウェブサイトの 実装プランに必要な実装ステップと ちょっとした情報は書かれています ページ全体の左のpaddingや メインカラムの幅 右カラムの幅 ページ全体の右のpaddingなのです そして実装のステップは 以下の通りです はじめに165行目にある ベーシックレイアウトスタイルズ レイアウトの 基本的なスタイルを記述している 箇所までスクロールします ボディの幅を90%に設定し ページの最小幅と最大幅には 適切な値を設定します この値はあなた自身で 考えてみてください その値は様々な要因に基づくはずです 次に冒頭にある値 こちらを使って再度 ベーシックレイアウトスタイルズに行き アーティクルセレクタと ベーサイドセレクタを見つけ その両方に適切な幅と パディングを設定します さらに189行目にある コンテントリージョンスタイルズ コンテンツ領域のための スタイルまでスクロールし ヘッダー メインナビ バナーの クラスセレクタを見つけ 必要と考えられるプロパティーを追加して ページ内のコンテンツが 正常に成立するようにします 続いて350行目にある ニュースセレクタのために それらは横に並び かつpaddingと 要素の間のスペースを 保てるように 適切な幅padding マージンを設定します あなた自身で 決めなければいけないことが 数多くありますが 実際に適切と考えられる 値にならなかったとしても 大丈夫です あくまでこれは 可変レイアウトを深く理解するための 練習だと思ってください さらに637行目にある コンテントイメージセレクタに ウィンドウサイズが縮小されても 画像が正常なサイズで 表示されるように プロパティーを追加します 同時にhtmlファイルでも 直接イメージタグを 修正する必要あります index.htmのタブに切り替え 下にスクロールすると 77行目と82行目に それぞれのイメージタグが みつけられます さてここまでサンプルサイトの 実装プランについて 紹介してきました サンプルファイルを元に 実際に考え ファイルを編集してみて下さい このレッスンでは 可変レイアウトについて より深く理解するために dissolve.orgという サンプルサイトのレイアウト 実装プランを紹介しました

CSSによるレイアウト

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

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

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

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

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