wordpressをサーバーOSの設定から始めるIT系ファシリテーターです。
プログラミングとか、物づくりとかって仕様が決まるとある程度答えまでの道筋が見えるもんですが、ファシリテーションはその場の人でコロコロ変わるから面白いですね。
それはさておき・・・
ホームページやブログのデザインとは切り離せないCSSの備忘録。
webのフロントだけやり続けていれば覚えているんでしょうが、間空いて触るので備忘録作成。
「CSS」「スタイルシート」って何?って方は面白くないので別記事へどうぞ。
borderのプロパティ
要素を囲む上下左右4箇所毎に指定可能。
4箇所の枠線をまとめて定義する事も、個別に定義する事も可能。
また、下記4つのプロパティにおいてもまとめて定義or個別定義が可能。
- スタイル
- 太さ
- 色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
--まとめて(上下左右の枠線全て同じ定義) border:<スタイル> <太さ> <色>; --左の枠線のみ border-left:<スタイル> <太さ> <色>; --枠線のスタイルのみ(上下左右の枠線全て同じ) border-style:solid; --枠線のスタイルのみ(上下左右の枠線別々) border-style:solid ridge double none; --左の枠線の色のみ border-left-color:green; |
プロパティでスタイルのみ設定する時は、上下左右をそれぞれ指定できる。
太さと色はそのまんまなので、スタイルのみもうちょっと書く。
border-style
スタイル。破線、二重線、非表示などを選べる。
- dashed
- dotted
- double
- groove
- hidden
- inset
- outset
- ridge
- solid
- unset
- none
それぞれのスタイルがどのようになるのか?は↓へ
立体的な表現にするスタイル(groove、inset、outset、ridge)は、
濃色系だと違いがわかりにくいです。
border-style:dashed;
border-style:dotted;
border-style:double;
border-style:groove;
border-style:inset;
border-style:outset;
border-style:ridge;
border-style:solid;
border-style:unset;
border-style:none;
コメント