一般的には上位互換ですからね。
で、今回は枠罫線「border」。
特に「border」に関しては様々なプロパティ、様々な書き方があるので臨機応変に書いていく必要があります。
まずは一番良く使う書き方を紹介したいと思います。
border:solid 1px #FFFFFF;
これは以下のように書くこともできます。border:#FFFFFF 1px solid;
つまり、borderに関してはfontとは違い、順不同でプロパティを書くことができるわけです。ちなみにそれぞれのプロパティを分けて書くとすると以下のようになります。
border-style:solid;
border-width:1px;
border-color:#FFFFFF;
border-styleは罫線の種類を設定するプロパティで普通の直線のsolid以外に二重線のdoubleや点線のdotted等があります。border-width:1px;
border-color:#FFFFFF;
border-widthは罫線の太さを設定するプロパティで数値+単位以外にキーワード(thin=細、thick=太、等)で設定することも可能です。
border-colorは罫線の色で、こちらは16進数で表記する方法とキーワード(red、green等)で表記する方法が使えます。
で、それぞれ4辺を別々に(border-widthの例)
border-width:1px; (4つの辺全て)
border-width:1px 5px; (上下、左右)
border-width:1px 5px 0px; (上、左右、下)
border-width:1px 5px 0px 2px; (上、右、下、左)
といった具合に書くこともできるわけです。border-width:1px 5px; (上下、左右)
border-width:1px 5px 0px; (上、左右、下)
border-width:1px 5px 0px 2px; (上、右、下、左)
これは、marginやpaddingも同様ですね。
そしてこれもそれぞれ分けて書くことができます。
一番下の例を分けて書くとすると。
border-top-width:1px;
border-right-width:5px;
border-bottom-width:0px;
border-left-width:2px;
となります。border-right-width:5px;
border-bottom-width:0px;
border-left-width:2px;
まあ、実際はここまで細かく刻んで書くことはあまり無いでしょうが、borderでおおまかな設定をしてから細かい設定を各プロパティで行うときなどに使えると思います。
CSSの記述が後ろにあるものほど優先順位が高くなります。
それから、こういった書き方も結構使われます。
border-bottom:solid 1px #FFFFFF;
border-left:solid 5px green;
タイトルデザインなどで下線のみ入れたり、左に太めの罫線を入れたりといったときは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(ボーダー左辺の色)