【CSS】borderとは？～枠線を入れる方法～
【CSS】borderの解説です。読み方は「ボーダー」です。
枠線を入れる方法を知りたい方はこちらで解決します💡
もくじ
●borderとは？【先に概要を知るべき】
●【使い方】borderは実際にこう使う
●【特徴】borderの持つ特徴
●【注意】borderを使う時に起こりやすいミスの事例
●borderに似た効果を持つCSS
スポンサードサーチ
【CSS】border ～枠線を入れる方法～
具体的に解説していきます。
borderとは？【先に概要を知るべき】
引用：Google
全ての要素は、上の画像の通りの作りになっています。
真ん中の青い部分が本文。
本文の周りを線（border）が囲っていて
線の内側（padding）と外側（margin）に余白が用意できるようになっています。
ものすごく簡単に言うと、本文の周りに３重に自在に太さを変えられる膜があるというわけです。
【使い方】borderは実際にこう使う
borderはCSSに打ち込む際、上の画像の通り3つの指示をしてあげる必要があります。
➀線の太さ
②線の種類
③線の色
上の画像の結果が、☟こちらの画像です。
➀「3pxの太さ」の②「solidタイプ」の、③「赤い」線が入りましたね💡
【特徴】borderの持つ特徴
borderは基本的に四方に線を入れる仕組みですが、方向を上下左右と指定できます。方法は下の画像の通りです。
【注意】borderを使う時に起こりやすいミスの事例
●太さと色は指定したけど、線の種類を指定し忘れることが多いので、３つの指示を忘れないよう注意。