スタート!CSS入門

包含ブロック

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
視覚整形モデルにおいて、それぞれのボックスのサイズや位置は、包含ブロックをベースにして計算されます。ここでは、包含ブロックとは何かについて紹介します。
講師:
02:44

字幕

CSS では多くのボックスの位置や大きさは包含ブロックと呼ばれる矩形、四角形のボックスを基準に計算されます。ここでは包含ブロックとは何かについて紹介します。視覚整形モデルは CSS における基本的な概念の1つです。ボックスモデルに基づいて生成されたボックスがどのように配置されるかを規定しています。このとき多くのボックスのサイズや位置は包含ブロックというも-のによって決められます。英語では「 containing block 」と言うため包含ブロックのことを指してコンテナブロックと呼ぶこともあります。では具体的に包含ブロックについて紹介していきます。例えばこのような HTML があったとします。div 要素を親として p 要素がその子として入れ子になっているシンプルな構造です。この HTML で生成される包含ブロックは次の通りになります。div 要素と p 要素、こちらの2つの要素が入れ子、親子関係になっている場合、p 要素の位置やサイズを決めるためにdiv 要素のパディングやマージンが関係していることがこの図から分かります。p 要素は親要素である div 要素のコンテンツ領域、つまりパディングの内側一杯に広がっているからです。 このように div 要素がその子孫要素のために作り出した部分を包含ブロックと呼びます。この図では背景が深緑になっている箇所です。p 要素の位置やサイズはdiv 要素によって作られた包含ブロックによって決められているといえます。このレッスンでは多くのボックスの位置や大きさを計算する基準となっている矩形、四角形のボックス、包含ブロックとは何かについて学びました。

スタート!CSS入門

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

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

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

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

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