こんにちは！
UPSTARTSのSベンです！
今回は「境界線」についての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 |
<body> <div>グランドライン</div> </body> |
境界線
境界線を付けるborderは、
要素の外側に線を付けたい時などに使うプロパティになります。
境界線関連のプロパティ
border-color → 線色の指定
border-width → 線の太さの指定
border-style → 線のスタイルの指定
上記のようにプロパティを一つずつ指定する方法と、
border
で上記のプロパティをまとめて指定する事もできます。
一つずつ指定する方法
ではまずプロパティを一つずつ指定する方法から見ていきましょう。
|
1 2 3 4 5 |
div { border-color: blue; border-width: 2px; border-style: solid; } |
上記の指定では、青い2pxの実線が付きます。
border-styleですが、この他にも二重線や点線、破線などいろいろ種類がありますので気になる方は調べてみてください。
まとめて指定する方法
今度は先ほど3行で書いたソースを、1行で書いてみます。
|
1 2 3 |
div { border: 2px solid blue; } |
表示は先ほどと変わりません。
このようにborderでまとめて記述することもできます。
角丸の指定
最後にborder-radiusですが、こちらは線の角丸の指定になります。
このプロパティを使うことにより、線の角を丸く表現することが可能です。
ではソースを見ていきましょう。
|
1 2 3 4 |
div { border: 2px solid blue; border-radius: 5px; } |
とがっていた角に丸みを付けることができたかと思います。
角丸にすることでシャレオツな雰囲気を出すことができます。
今回は境界線となる「border」プロパティについてやっていきました。
次回は「テキスト関連」についてです。
ではまた次回！
