CSSで画像やテキストなどの要素に枠線を付ける方法/borderプロパティの使い方

rose-petals IT

文字や画像を線で「囲む」ことができる、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分の間隔が空くことになります。
border図
なので、要素に対して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関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント