スタート!CSS入門

ボックスの種類

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
視覚整形モデルでは、ボックスの種類によってその機能に影響を及ぼします。ボックスの種類を指定するには、displayプロパティを使います。ここでは、ボックスの種類とdisplayプロパティの使い方について紹介します。
講師:
07:30

字幕

視覚整形モデルではボックスの種類によってその機能に影響を及ぼします。このレッスンでボックスの種類とそれを指定するdisplay プロパティの使い方について紹介します。ボックスの種類には大きく分けてブロックボックスとインラインボックスの2種類があります。まずブロックボックスについて紹介します。HTML でいうところの見出しを定義するh1 から h6 までの要素や段落を定義する p 要素、コンテナとしての div 要素などにあたるブロックレベル要素はその表示のためにブロックレベルボックスと呼ばれるボックスを生成します。各ブロックレベル要素は子孫ボックスや生成されたコンテンツが含まれており、また主ブロックボックスと呼ばれるブロックレベルボックスを生成します。リスト項目ではこれに加えてリストマーカーを表示する為のマーカーボックスを生成するなど例外はありますが、ほとんどのケースではブロックレベル要素によってこの主ブロックレベルボックスが生成されます。またブロックレベルボックスはブロック包含ボックスであることもあります。ブロック包含ボックスは他のブロック包含ボックスだけを含む場合とインラインレベルボックスだけを含む場合があります。 ここで重要なのはブロックレベルボックスとブロック包含ボックスは別物であるということです。なおブロック包含ボックスはブロックコンテナボックスと呼ぶこともあります。この図では真ん中の色が濃くなっている部分、この両方に属しているボックスのことを総称してブロックボックスと呼びます。ブロックボックスは1つの独立したまとまりとして扱われ、複数表示した場合は基本的に下に並んでいくようレイアウトされます。ただし配置方法を制御したりfloat で回り込みを指定したりしたときはこの限りではありません。次にインラインボックスについて紹介します。インラインボックスはブロックボックスとは異なり自動的に折り返しが行われながら包含ブロックに流し込まれるようにレイアウトされます。このインラインボックスは HTML でいうところのリンクを定義する a 要素や画像を表示する img 要素、強調を定義する em 要素などにあたるインラインレベル要素によって生成されます。ではこれらのボックスの種類を指定するdisplay プロパティについて紹介しましょう。display プロパティは要素を表示するために生成するボックスの種類を指定するプロパティです。 display プロパティに使える値はご覧の各キーワードです。デフォルト値は「 inline 」になっていますが多くの場合でウェブブラウザが用意しているデフォルトスタイルシートによって上書きされていることに注意してください。その他の仕様はご覧の表の通りです。それぞれのキーワードについてどのようなボックスの種類になるのか順にリストでご紹介します。「 inline 」ではインラインボックスが生成されます。「 block 」ではブロックボックスが生成されます。「 list-item 」ではブロックボックスとリストマーカーを表示するマーカーボックスが生成されます。「 inline-block 」ではインラインレベルボックスコンテナが生成されます。これは要素の内容としてはブロックボックスとして外観としてはインラインボックスの一種として扱われます。具体的には li 要素などリストを横並びにしてメニューをレイアウトするときなどによく使われます。「 table 」で始まるキーワードでは表関連の要素として扱われるようになります。「 none 」ではボックスが生成されなくなりレイアウトから存在しなくなります。 子孫要素についても適用されます。また子孫要素のディスプレイプロパティの値で別のキーワードを指定しても上書きされません。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用した領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。ここではこのヘッダー要素に対してボックスを生成しないように指定する CSS を書いてみます。ヘッダー要素に対してdisplay プロパティを使って「 none 」を設定します。ウェブブラウザを見るとヘッダー要素が表示されなくなったことが確認できます。HTML のソースには引き続き存在していますがCSS によってボックスを生成しなくなったためレンダリング結果には存在しなくなったということです。続いて今度は p 要素に対してボックスの種類を変更してみましょう。通常 p 要素はブロックボックスとして生成されているため、例えばこの冒頭に p 要素が2つ続いている箇所では要素ごとつまり段落ごとに下に続けてレイアウトされています。これをインラインボックスに変えてみましょう。p 要素に対してdisplay プロパティを使って「 inline 」を設定します。 ウェブブラウザを見るとp 要素がブロックボックスからインラインボックスに変わりレイアウトが変わりました。このレッスンではボックスの種類とそれを指定するdisplay プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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