CSS2.1まとめ書き－border編（HTML・CSSリファレンス）

1年以上前の記事です。内容が古い可能性があります。

CSS2.1まとめ書きとしていますが、3.0でも基本的には使えると思います。
一般的には上位互換ですからね。

で、今回は枠罫線「border」。
特に「border」に関しては様々なプロパティ、様々な書き方があるので臨機応変に書いていく必要があります。

飾り罫＆飾り枠素材集

posted with ヨメレバ

MdN編集部 MdN 2011-09-16

Amazon

楽天ブックス

7net

honto

ブックオフ

e-hon

これは以下のように書くこともできます。

つまり、borderに関してはfontとは違い、順不同でプロパティを書くことができるわけです。

ちなみにそれぞれのプロパティを分けて書くとすると以下のようになります。

border-styleは罫線の種類を設定するプロパティで普通の直線のsolid以外に二重線のdoubleや点線のdotted等があります。
border-widthは罫線の太さを設定するプロパティで数値＋単位以外にキーワード（thin＝細、thick＝太、等）で設定することも可能です。
border-colorは罫線の色で、こちらは16進数で表記する方法とキーワード（red、green等）で表記する方法が使えます。

で、それぞれ4辺を別々に（border-widthの例）

といった具合に書くこともできるわけです。
これは、marginやpaddingも同様ですね。

そしてこれもそれぞれ分けて書くことができます。
一番下の例を分けて書くとすると。

となります。

まあ、実際はここまで細かく刻んで書くことはあまり無いでしょうが、borderでおおまかな設定をしてから細かい設定を各プロパティで行うときなどに使えると思います。
CSSの記述が後ろにあるものほど優先順位が高くなります。

それから、こういった書き方も結構使われます。

タイトルデザインなどで下線のみ入れたり、左に太めの罫線を入れたりといったときは
border-bottomやborder-left等を使ってその辺のみに罫線を入れるようにするといいと思います。

最後にborder系のプロパティをまとめて紹介して終わりにしたいと思います。

• border（ボーダー4辺のスタイル、太さ、色）
• border-style（ボーダー4辺のスタイル）
• border-width（ボーダー4辺の太さ）
• border-color（ボーダー4辺の色）
• border-top（ボーダー上辺のスタイル、太さ、色）
• border-top-style（ボーダー上辺のスタイル）
• border-top-width（ボーダー上辺の太さ）
• border-top-color（ボーダー上辺の色）
• border-right（ボーダー右辺のスタイル、太さ、色）
• border-right-style（ボーダー右辺のスタイル）
• border-right-width（ボーダー右辺の太さ）
• border-right-color（ボーダー右辺の色）
• border-bottom（ボーダー下辺のスタイル、太さ、色）
• border-bottom-style（ボーダー下辺のスタイル）
• border-bottom-width（ボーダー下辺の太さ）
• border-bottom-color（ボーダー下辺の色）
• border-left（ボーダー左辺のスタイル、太さ、色）
• border-left-style（ボーダー左辺のスタイル）
• border-left-width（ボーダー左辺の太さ）
• border-left-color（ボーダー左辺の色）