2019/12/05

【CSS】borderとは？～枠線を入れる方法～

【CSS】borderの解説です。読み方は「ボーダー」です。
枠線を入れる方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】border ～枠線を入れる方法～

具体的に解説していきます。

引用：Google

全ての要素は、上の画像の通りの作りになっています。
真ん中の青い部分が本文。
本文の周りを線（border）が囲っていて
線の内側（padding）と外側（margin）に余白が用意できるようになっています。

ものすごく簡単に言うと、本文の周りに３重に自在に太さを変えられる膜があるというわけです。

borderはCSSに打ち込む際、上の画像の通り3つの指示をしてあげる必要があります。

➀線の太さ
②線の種類
③線の色

上の画像の結果が、☟こちらの画像です。

➀「3pxの太さ」の②「solidタイプ」の、③「赤い」線が入りましたね💡

borderは基本的に四方に線を入れる仕組みですが、方向を上下左右と指定できます。方法は下の画像の通りです。

●太さと色は指定したけど、線の種類を指定し忘れることが多いので、３つの指示を忘れないよう注意。

●margin・・・枠線の外側に余白を入れるCSS
●padding・・・枠線の内側に余白を入れるCSS