スタート!CSS入門

ボックスモデルの基本概念

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素のマージンやボーダーは、ボックスモデルという考え方に基づいて制御します。ここでは、ボックスモデルの基本概念を紹介します。
講師:
03:37

字幕

要素のマージン、パディングなどの余白やボーダー枠線はボックスモデルという考えに基づいて制御します。このレッスンではボックスモデルの基本概念について紹介します。ボックスモデルは CSS における基本的な概念の1つです。HTML によってマークアップされた各要素にはボックスという四角形の領域が生成されます。このボックスについて定められている仕様がボックスモデルです。各ボックスは4つの領域から構成されます。1つ目は内容を表示するためのコンテンツ領域です。例えばテキストや画像など要素に入る内容自身のことを指します。2つ目は内容とボーダーの間の余白を示すパディングです。3つ目は枠線ボーダーです。ボーダーはボックスの境界線ともいえます。最後はボーダーと他の要素との余白を示すマージンです。これら4つの領域の大きさはすべてCSS のプロパティで指定できます。ここではこの4つの領域がどのような関係になっているのか図を見てみましょう。ボックスモデルではテキストや画像など内容を表示する「 content 」領域が一番中心に置かれます。この図では「 content 」コンテントと書かれた一番濃いグレーで示された領域です。 この領域のサイズは複数の理由によって決められます。例えばボックスを生成する要素に対して widthや height プロパティで幅や高さが決められているかどうか。ボックスがテキストや他のボックスを含むかどうかなどです。これ以外の「 padding 」「 border 」「 margin 」についてはそれぞれのプロパティでサイズを指定できます。このとき上 下 左 右それぞれの辺に対して別々のサイズを指定することもできます。次にボックスに対して背景関連のスタイルを適用するときの注意点について紹介します。ボックスに対して背景色や背景画像などを指定すると内容 padding border の領域に対して適用されます。この図では深緑になっている領域ですね。さらにその外側にある margin の背景は常に透明として扱われます。そのためこの要素の親要素で設定されている背景色、背景画像があればその指定が margin の領域に表示されることになります。このレッスンでは要素のマージン、パディングなどの余白やボーダー枠線などで構成されるボックスモデルの基本概念について学びました。

スタート!CSS入門

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

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

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

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

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