スタート!CSS入門

ボーダー間のスペース

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
表のボーダー間のスペースを指定するには、border-spacingプロパティを使います。ここでは、border-spacingプロパティの使い方について紹介します。
講師:
03:00

字幕

表のボーダーモデルが「 separate 」分離ボーダーモデルのときボーダー間のスペースを変えるにはborder-spacing プロパティを使います。このレッスンでは border-spacing プロパティの使い方について紹介します。border-spacing プロパティに使える値は「長さ」です。長さは数値とその単位で指定します。値は1つまたは2つで指定します。1つだけを指定した場合その長さ分だけ上下左右のスペースを設定します。2つ値を設定した場合は1つ目の長さが左右を、2つ目の長さが上下のスペースを設定します。マイナスの値は設定できません。また仕様ではデフォルト値が「 0 」になっていますが多くのウェブブラウザでは分離ボーダーモデルを表現するためデフォルトで2 ピクセル程度のスペースを設けています。その他の仕様はご覧の表通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。表にはすでに「table」要素と「th」「td 」要素に「border」 枠線を追加しています。「 table 」要素には4 ピクセルの赤い ボーダー。「 th 」要素と「 td 」要素には 1 ピクセルの黒いボーダーです。 また表全体のボーダーモデルには「 separate 」分離ボーダーモデルを明示的に指定しています。border-spacing プロパティは分離ボーダーモデルのときのみ有効になりますので注意しましょう。ではボーダー間のスペースを変更してみましょう。「 table 」要素に対して border-spacingプロパティを使います。border-spacing プロパティです。これに対してボーダー間のスペースを10 ピクセルに設定します。ウェブブラウザを見ると表のボーダーの間のスペース、こちらが 10 ピクセルに広がったことを確認できます。なお Internet Explorer 7 は border-spacingプロパティに対応していません。このレッスンでは表のボーダーモデルが「 separate 」分離ボーダーモデルのときボーダー間のスペースを変えるborder-spacing プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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