連載
» 2010年09月17日 10時00分 UPDATE

D89 CSS/スタイルシート リファレンス辞典(4):ボックスモデルを極めるためのCSSプロパティ、10選

[喜安亮介,@IT]

バラエティに富んだボーダースタイルを徹底的に

 無数にあるCSS/スタイルシート プロパティを大まかに分類し、分類したプロパティを1つずつ紹介していく本連載。第4回は、ボックスモデルを理解するうえで重要な幅、高さ、ボーダーのプロパティ計10個を紹介します。

 ボックスモデルの知識として基本的な幅、高さ、バラエティに富んだボーダースタイルを徹底的に理解していきましょう。

今回紹介するCSS/スタイルシート プロパティ:


border border-top border-bottom border-left border-right
border-width border-style border-color width height


ボーダー

 本企画で対象とするバージョンは現在多く使われている、CSS 2.1とします。CSS/スタイルシートの基本的な使い方に関しては、下記連載をご参照ください。

いまさら聞けないCSS/スタイルシート入門

いまさら聞けないCSS/スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?
デザインハック」コーナー

 また本企画では、プロパティの参照方法のコードを、標準JavaScriptによるDOMでの参照方法に加え、jQueryセレクタを使った参照方法も掲載してます。jQueryと、そのセレクタについては、下記記事をご参照ください。

jQuery、プラグイン、jQuery UI、Web経由のCDNとは

jQuery、プラグイン、jQuery UI、Web経由のCDNとは
CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説
デザインハックリッチクライアント
2009/12/8

borderプロパティ

 borderプロパティは、ボックスのmargin(マージン)とpadding(パディング)の間にある“けい線”のいろいろなプロパティを表すプロパティです。

 borderプロパティを使えば、上下左右のボーダーを一括で指定できます。また、border-topborder-bottomborder-leftborder-rightといったプロパティのショートハンドプロパティとして使用されます。

詳しくはコチラ→ border “けい線”のいろいろなプロパティを表すborderプロパティ

border-topプロパティ

 border-topプロパティは、ボックスのmargin-top(マージントップ)とpadding-top(パディングトップ)の間にある上側“けい線”のいろいろなプロパティを表すプロパティです。

 border-top-widthborder-top-styleborder-top-colorのショートハンドプロパティとして使用され、それらの値を一括で設定します。

詳しくはコチラ→ border-top 上側“けい線”のいろいろなプロパティを表すborder-topプロパティ

border-bottomプロパティ

 border-bottomプロパティは、ボックスのmargin-bottom(マージンボトム)とpadding-bottom(パディングボトム)の間にある下側“けい線”のいろいろなプロパティを表すプロパティです。

 border-bottom-widthborder-bottom-styleborder-bottom-colorのショートハンドプロパティとして使用され、それらの値を一括で設定します。

詳しくはコチラ→ border-bottom 下側“けい線”のいろいろなプロパティを表すborder-bottomプロパティ

border-leftプロパティ

 border-leftプロパティは、ボックスのmargin-left(マージンレフト)とpadding-left(パディングレフト)の間にある左側“けい線”のいろいろなプロパティを表すプロパティです。

 border-left-widthborder-left-styleborder-left-colorのショートハンドプロパティとして使用され、それらの値を一括で設定します。

詳しくはコチラ→ border-left 左側“けい線”のいろいろなプロパティを表すborder-leftプロパティ

border-rightプロパティ

 border-rightプロパティは、ボックスのmargin-right(マージンライト)とpadding-right(パディングライト)の間にある右側“けい線”のいろいろなプロパティを表すプロパティです。

 border-right-widthborder-right-styleborder-right-colorのショートハンドプロパティとして使用され、それらの値を一括で設定します。

詳しくはコチラ→ border-right 右側“けい線”のいろいろなプロパティを表すborder-rightプロパティ

border-widthプロパティ

 border-widthプロパティは、ボックス“けい線”の幅を表すプロパティです。border-widthプロパティを使えば上下左右のボーダー幅を一括で指定できます。

 「border-top-width」「border-bottom-width」「border-left-width」「border-right-width」といったプロパティのショートハンドプロパティとして使用されます。

詳しくはコチラ→ border-width “けい線”の幅を表すborder-widthプロパティ

border-styleプロパティ

 border-styleプロパティは、ボックス“けい線”のスタイルを表すプロパティです。border-styleプロパティを使えば上下左右のボーダースタイルを一括で指定できます。

 「border-top-style」「border-bottom-style」「border-left-style」「border-right-style」といったプロパティのショートハンドプロパティとして使用されます。

詳しくはコチラ→ border-style “けい線”のスタイルを表すborder-styleプロパティ

border-colorプロパティ

 border-colorプロパティは、ボックス“けい線”の色を表すプロパティです。border-colorプロパティを使えば上下左右のボーダー色を一括で指定できます。

 border-top-color、border-bottom-color、border-left-color、border-right-colorといったプロパティのショートハンドプロパティとして使用されます。

詳しくはコチラ→ border-color “けい線”の色を表すborder-colorプロパティ

widthプロパティ

 widthプロパティは、ボックスのコンテンツ幅を表します。

詳しくはコチラ→ width コンテンツ幅を表すwidthプロパティ

heightプロパティ

 heightプロパティは、ボックスのコンテンツ高さを表します。

詳しくはコチラ→ height コンテンツ高さを表すheightプロパティ

Profile

喜安 亮介

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。


Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。