【CSS】borderとは?~枠線を入れる方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】borderとは?~枠線を入れる方法~

HTML&CSS

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

スポンサードサーチ

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

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

borderとは?【先に概要を知るべき】

引用:Google

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

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

【使い方】borderは実際にこう使う

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

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

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

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

【特徴】borderの持つ特徴

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




【注意】borderを使う時に起こりやすいミスの事例

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

borderに似た効果を持つCSS

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