スタート!CSS入門

ボックスの配置方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの配置方法のうち、通常フローと絶対配置について紹介します。また、それらを指定するための、positionプロパティに加えて、その関連プロパティであるtop、right、bottom、leftの各プロパティの使い方についても学びます。
講師:
08:55

字幕

ボックスの配置方法には3つの方法があります。このレッスンではその内の2つの方法、通常フローと絶対配置について解説し、さらにそれらを指定するためのposition プロパティやその関連プロパティの使い方についても紹介します。まずこのレッスンで解説するボックスの配置方法について紹介します。1つ目は通常フローです。通常フローではブロック整形コンテキストとインライン整形コンテキストという仕組みに基づいてレイアウトが行われます。整形コンテキストとは包含ブロックの中でブロックボックスやインラインボックスがどういう流れでレイアウトがされるかということを指定するものです。また通常フローにはボックス本来の位置から相対的に移動して配置する相対配置も含まれます。配置方法の2つ目は絶対配置です。絶対配置ではボックスは通常フローから外され絶対的な位置を指定します。このとき前後の要素、兄弟要素には影響しません。配置方法の最後はフロートです。このレッスンでは扱いませんがボックスを通常フローから外してフロート、浮かせることができます。それでは配置方法を指定するための positionプロパティについて紹介します。position プロパティボックスの配置方法を指定するプロパティです。 position プロパティに使える値は「 static 」「 relative 」「 absolute 」「 fixed 」の各キーワードです。その他の仕様はご覧の表の通りです。それぞれのキーワードについてどのような配置方法になるのか順にリストで紹介します。「 static 」では通常フローに従って配置されます。position プロパティのデフォルト値も「 static 」になっています。「 relative 」では通常フローに従い、かつボックス本来の位置から相対的に移動して配置する相対配置が適用されます。移動距離は top right bottomo left の各プロパティで指定します。あとに続くボックスはこの相対的な移動距離には影響されません。「 absolute 」では通常フローから外され絶対的な位置に配置されます。位置は包含ブロックとの距離を top rightbottom left の各プロパティで指定します。あとに続くボックスの配置には影響しません。またマージンを指定しても他のボックスのマージンとは相殺されません。最後に「 fixed 」では絶対配置の一種としてウェブページが表示されている領域に対して固定位置として配置されます。 挙動としては「 absolute 」に近いものですがウェブページをスクロールしてもボックスの位置を固定したい場合などに使います。ここまで紹介したキーワードで一番最初の「 static 」以外では位置の指定に別のプロパティを使います。ボックスの位置指定には「 top 」「 right 」「 bottom 」「 left 」プロパティを使います。これらのプロパティに使える値は「長さ」「パーセント値」「 auto 」キーワードです。「長さ」は数値とその単位で指定します。このとき相対配置の位置はそのボックス自体の本来の位置からの距離。絶対配置のときは包含ブロックの4辺からの距離になります。「パーセント値」は数値とパーセントで指定します。相対配置のときはボックス自体の幅または高さの、絶対配置のときは包含ブロックの幅または高さのパーセント値として適用されます。「長さ」と「パーセント値」ではマイナスの値も使えます。「 auto 」は状況に応じた値が適用されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見ると写真の下に深緑の背景色を適用した見出しがあります。 HTML を見るとこの部分はh2 要素として定義されています。ここではこの h2 要素に対して相対的な位置を指定する CSS を書いてみます。まずの h2 要素に対してposition プロパティで「 relative 」相対的な位置指定を設定します。この時点では通常フローと同じ状態ですので何も変化はありません。続いて現在の位置の下から 70px のところに相対的に移動させるため bottom プロパティで 70px を設定します。bottom プロパティで 70px を設定します。ウェブブラウザを見ると h2 要素の位置が本来の位置と比較して下から 70px のところに移動していることが確認できます。またあとに続くボックスには影響が出ないため見出しの下にあった著作権表記のテキストの位置は変わっていません。続いて先ほどと同じ構造の別の HTML を開きます。「 absolute.html 」を開きました。またウェブブラウザもタブを切り替えて「 absolute.html 」をプレビューします。今度は絶対配置でボックスの位置指定をしてみましょう。同じく h2 要素に対してposition プロパティで「 absolute 」を設定します。 この時点で h2 要素は通常フローから外れてレイアウトされていることが分かります。続いて bottom プロパティで今度は下から 10px を指定します。すると h2 要素が画面下に移動しました。これは absolute による絶対配置を指定するとデフォルトではその包含ブロックがルート要素つまりウェブページ全体を基準とするためここではウェブページ全体に対して下から 10px のところに h2 要素が配置されたというわけです。ここで参照する包含ブロックをルート要素以外にする場合は対象の要素に position プロパティで「 relative 」を指定します。ここでは h2 要素の親要素であるメイン要素に対して指定してみましょう。メイン要素に対して position プロパティで「 relative 」を指定します。こうすることで h2 要素の包含ブロックがルート要素からメイン要素に変わり下から 10px という指定の基準もウェブページ全体からメイン要素、つまり画像が表示されている領域に変わりました。このように絶対配置を行う場合はその親など祖先の要素の position プロパティで「 relative 」を指定するのがコツです。 このレッスンではボックスの3つの配置方法の中から通常フローと絶対配置の2つについて解説し、それらを指定するためのposition プロパティや関連プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

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

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

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