こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- CSSで要素に枠線や境界線を作るにはどうしたらいいの？
- CSSの
borderプロパティで実装できる枠線の種類はどんなものがあるの？ - CSSの
borderプロパティを実際に使ったデモが見たい
という方のお悩みを解決します！
CSSのborderとは？
CSSのborderプロパティを使用すると、その要素に枠線をつけることができます。
とても便利なプロパティでWebサイト制作をする上で使わないことはまずありえないというレベルの必須スキルとなります。
borderプロパティの概要が分かったところで次は基本的な書き方を見ていきます。
borderの書き方
borderプロパティの基本的な書き方は以下です。
/*borderの書き方*/
border: 枠線のサイズ 枠線の種類 枠線の色;
.Item{
border: 1px solid #000;
}
.Box{
border: 5px dotted black;
}枠線のサイズや枠線の種類、枠線の色をそれぞれ指定することができます。
また、borderプロパティは要素の全体に枠線がつく仕様ですが、
「要素の下にだけ枠線をつけたい！」
「左側にだけ枠線をつけたい！」
という場合はborder-bottomといった形で指定してあげましょう。
/*borderの書き方*/
border-top: 枠線のサイズ 枠線の種類 枠線の色;
border-left: 枠線のサイズ 枠線の種類 枠線の色;
border-bottom: 枠線のサイズ 枠線の種類 枠線の色;
border-right: 枠線のサイズ 枠線の種類 枠線の色;
.Item{
border-bottom: 1px solid #000;
}
.Box{
border-left: 5px dotted black;
}borderの種類
枠線の種類は全部で8つほど選択できます。
ここではよく使う4つだけ紹介します。
/*borderの種類*/
none: 初期値。上書きでborderを消したい時にも使う。
solid: 1本の実線。最も使う。
double: 2本の実線。時々使う。
dotted: 点線。あまり使わない。
dashed: 破線。あまり使わない。イメージがつきやすいようにCodePenでデモを用意しましたのでご覧になってくださいまし。
See the Pen
oNjNmmj by 石森裕也 (@yuyaphotograph)
on CodePen.
borderのデモ
実際のWebサイト制作でよく使われるborderプロパティのデモを紹介して締めとさせていただきます。
See the Pen
JjYjxQo by 石森裕也 (@yuyaphotograph)
on CodePen.
まとめ
以上、初心者向けにCSSのborderプロパティの使い方や実際のデモを紹介しました。
この記事のコードをコピペして試してみるのもよし、お使いのエディタで書いてみるのもよし。
Webサイトをコーディングする上で必須のスキルですのでぜひ使いこなせるようになりましょう〜！
「コーディングでよく使われる技術を学んでもっとスキルアップしたい！」
という方は以下の記事も目を通してみてくださいまし〜
CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】 
CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】 
jQueryとVue.jsでアコーディオンメニュー（toggle機能）を作る方法
