文字や画像を線で「囲む」ことができる、borderプロパティの紹介となります。
borderプロパティの使い方
HTMLタグに対して、CSSを指定してあげることで要素を線で囲むことができます。
border:線の太さ 線の種類 色;
たとえばこのような囲みかたは、次のようなCSSとHTMLで実装することができます。
//CSS
.shikaku{border:1px solid black;}
<！-- html -->
<span class="shikaku">このような</span>
CSSではshikakuというクラスに1pxの太さ、色がblackの種類がsolidの線を設定し、HTMLでspanというタグにshikakuクラスを適用しています。
borderは、実際にはborder-width（線の太さ）, border-style（線の種類）, border-color（線の色）をまとめて設定しています。
border、margin、paddingの関係
borderは、marginとpaddingの間に位置します。どちらかに所属はしません。要素Bがmargin:1px、padding1px、border:1pxを持っていたとしたら、隣のブロックBとの境界線から要素までの間には1+1+1=3px分の間隔が空くことになります。
なので、要素に対して300pxの幅を指定したのに、borderのサイズが1pxあると左右に1本ずつ線が付いて実質302pxとして表示されます。
width:300px border:1px
width:300px border:3px
もしborderの線をwidthに含めたければ、要素のbox-sizingプロパティをborder-boxにセットしてあげる必要があります。
主な線の種類と太さ
実線
solid（実線） 1px
solid 3px
solid 10px
破線
dashed（破線） 1px
dashed 3px
dashed 10px
点線
dotted（点線） 1px
dotted 3px
dotted 10px
二重線
double（二重線） 1px
double 3px
double 10px
色の指定
red
blue
yellow
など定まった色名があればそれを直接指定することもできますし、
#ADFF2F
#88860B
#8A2BE2
などのカラーコードで指定することも可能です（「色見本」などで検索するとカラーコードは簡単に調べることができます）。
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。
sunagitsune.com
2019.01.27
コメント