スタート!CSS入門

ボーダーモデル

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
表のボーダー(枠線)の表示モデル(表示方法)を指定するには、border-collapseプロパティを使います。ここでは、border-collapseプロパティの使い方について紹介します。
講師:
04:19

字幕

表のボーダー、枠線のモデルを変えるにはborder-collapse プロパティを使います。このレッスンでは border-collapseプロパティの使い方について紹介します。border-collapse プロパティに使える値は「 collpse 」「 separate 」の各キーワードです。「 collpse 」は結合ボーダーモデル、「 separate 」は分離ボーダーモデルと呼ばれるそれぞれボーダーモデルを指定できます。そのほかの仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。表にはすでに「 table 」要素と「 th 」「 td 」要素にボーダー、枠線を追加しています。「 table 」要素には4 ピクセルの赤いボーダー。「 th 」要素と「 td 」要素には 1 ピクセルの黒いボーダーです。ボーダーモデルのデフォルトは分離ボーダーモデルですので表全体と各セルのボーダーが分離してることが分かります。ではこれを結合ボーダーモデルに変更してみましょう。「 table 」要素に対して border-collapseプロパティを使います。 border-collapse プロパティです。そして結合ボーダーモデルつまり「 collapse 」に設定をします。ウェブブラウザを見ると表全体と各セルのボーダーが結合されていることが分かります。ここで注目すべきポイントがあります。表の一番外側にあった赤い 4 ピクセルのボーダーとセルの回りにあった1 ピクセルの黒いボーダー、こちらが結合された結果外側の赤いボーダーが優先されて表示されています。このようにボーダーが競合した場合にどのボーダーを優先するのかについては次の様にいくつかルールが定められています。1つ目はボーダーの種類を指定するborder-style プロパティの値がhidden 非表示に設定されているときはその設定が最優先されその箇所のボーダーは非表示になるというルールです。2つ目は同じく border プロパティの値がnone なしとして適用されるケースはそのボーダーに関連するすべての要素で noneが設定されている時にかぎるというものです。3つ目は border-style プロパティの値にhidden none 以外が設定されているときは幅の広いボーダーが優先されます。 先ほど書いた CSS ではテーブル全体が 4 ピクセル、セルが 1 ピクセルのボーダーでしたからこのルールが適用されて4 ピクセルのボーダーが優先されたということになります。4つ目はボーダーの幅も同じ場合はボーダーの種類によって優先順位が決定されます。優先順位はご覧の通りです。最後はボーダーの幅も種類も同じときは表のレイヤーによって優先順位が決定されます。これが結合ボーダーモデルのボーダーが競合したときのルールです。このレッスンでは表のボーダー、枠線のモデルを変える border-collapseプロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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