CSSによるレイアウト

CSSによる可変レイアウトの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSを使って可変レイアウトを実装する方法について学びます。
講師:
07:06

字幕

このレッスンではCSSを使って 可変レイアウトを実装する方法について 学びます 画面はサンプルファイルのfluid.htmを ブラウザを使って開いているところです それぞれの要素はマージンや パディングを持っていないことが わかると思います また全ての要素は 上から下に順に表示されているだけですので このレイアウトを調整していきます ブラウザのサイズを変更してみましょう デフォルトではレイアウトは 可変になっています html内のブロックレベル要素に 幅が定義されていない場合は 親要素の幅に合わせられます つまりここでは全ての幅は デフォルトの100%になっています このhtmlファイルをエディタで開いてみます まず最初にボディセレクタのサイズまで スクロールします そしてここにwidthプロパティを使って 幅を定義します 固定レイアウトでは固定の数値を使いますが 可変レイアウトでは割合 パーセンテージを使います ここでは80%としましょう このように全体を囲むラッパー ここではボディ要素の幅を どのくらいの割合にするかは自由です 左右のスペースが必要なければ 90%や95%にしても構いません ここでは左右にどのくらいのスペースを設けるかが 焦点になります さて幅は80%になりましたので いったん保存してブラウザで確認してみましょう ブラウザをリロードすると ブラウザのウィンドウサイズに基づいて 左右に10%ずつのスペースが設けられ ボディ要素が80%に収められていることがわかります エディタに戻り少し下にスクロールしていきます 可変レイアウトで忘れがちなことの1つに パディングを設定することが挙げられます レイアウトに含まれるカラムや要素を 縦に並べた時左右いずれかまたはその両方に 同じパディングの値を適用しないと レイアウトが崩れてしまいます したがってこのヘッダーは 左のパディングの値を パーセンテージに変更する必要があります 現在は32pxになっています ここを2%に変更します これによりパディングは上側に32px 左に2%が設定されました 先ほどと同様いったん保存し ブラウザを開きリロードしてみます ヘッダー内のパディングが変わったため 見出しが少し移動しました エディタに戻ります 続いてカラムのスタイルです col1は左にフロートしています そしてcol2は右にフロートしています 現在は幅はどちらも定義されていません col1にwidthプロパティを使って 幅を60%に設定します そしてヘッダーと同様に左のパディングに 2%を指定します col2にも同じようにスタイルを設定していきます col2の幅はwidthプロパティを使って 34%そして今度はパディングは右方向に 同じ値の2%となります これでcol1は左にcol2は右に それぞれフロートしますので その間のマージンについては特別指定する必要はありません col1とcol2のそれぞれの幅widthプロパティの値が この2つのカラムの間にスペースをもたらします いったん保存しブラウザに切り替え リロードしてみると2つのカラムのレイアウトになりました ブラウザのサイズを変更すると カラムも可変レイアウトになっていることが わかります さて下までスクロールしてみましょう ここに2つの要素があります これらも可変レイアウトにした上で 横並びになるようスタイルを設定してみましょう エディタに戻ります 下にスクロールするとnewsというクラスセレクタがあります このクラスは先ほどの2つの要素の両方に適用されています ここでは幅を44.5%に指定します つまり2つの要素の幅が両方とも44.5%になります そしてパディングを回りにつけるため パディングプロパティを使って1.75%を値に指定します ここでは2つの要素にフロートが行われていませんので 間のスペースを設ける必要があります マージンライトプロパティを使って 右にマージンを4%設けましょう その下にあるセレクタによって2つの要素の 右側にある要素のみマージンライトを0にする指定がありますので 余分なマージンが発生することはありません これを保存しブラウザに切り替えリロードすると 2つの要素が横並びになりました ここで注目しておきたいのが 2つのカラムの間のスペースそして左右のスペースです これらはとても狭い領域です これらには全て異なるパーセンテージを指定しています これは2%でこれは親要素に基づいて4%で これは左右のカラムに基づいて算出されて こちらは左と同じ2%です 非常に複雑ではありますが あらかじめカラムや要素のレイアウトをプランし 計算をしておくことでこのように非常に 洗練された構造を作ることができます これで基本的な2カラムの可変レイアウトが完成しました このレッスンではCSSを使って 可変レイアウトを実装する方法について 学びました

CSSによるレイアウト

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

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

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

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

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