【HTML&CSS】borderプロパティの使い方を紹介！
どうも皆さんこんにちは！kwです！
今回は、CSSのborderプロパティの一般的な文法と、例としてborderプロパティを使ったちょっとしたテクニックを解説していきます。
borderプロパティをうまく使える人とうまく使えない人とでは、デザインの出来の差がとてもつきます。
borderプロパティを使った技術は、ウェブデザイナーにとっては必須の技術なので是非今回でborderプロパティの基本的な使い方を覚えてみてください！
1.borderプロパティの使用用途
borderプロパティの使用用途は、主に要素に線をつけることができます。
例えば、画像を線で囲いたい時、文字の下に線を付けたい時ってありますよね。
そんな時に使うのがborderプロパティです。
なお、borderプロパティは要素のどこに線をつけるかを指定することができ、
全方向を線で囲いたい時はborderでいいのですが、要素の左、右、上そして下に線を付けたい場合は、それぞれプロパティが異なります。なので今回は、それぞれのプロパティをまとめたのでコチラをご参照ください↓
全方向を線で囲いたい場合→border
要素の左に線を付けたい場合→border-left
要素の右に線を付けたい場合→border-right
要素の上に線を付けたい場合→border-top
要素の下に線を付けたい場合→border-bottom
この通りです。
それぞれ用途によってプロパティが違うのはややこしいですが、頑張って覚えてみてください！（笑）
プロパティの種類が４つもあってもプロパティ以外の文法は共通なので割とすぐ覚えられちゃいます！
では、実際にそれぞれのプロパティを使った例を見てみましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
※今回はわかりやすいように線の色を赤色に変えています。
※今回、display:inline;としていますが、これはお好みで大丈夫です。ただ、今回のように要素の範囲だけ線を付けたい場合にはdisplay:inline;を必ず記述してください。
次は、このコードについて解説していきます。
2.borderプロパティの一般的な文法
borderプロパティは一般的にこのように記述します↓
border:~px,solid ~;
この一つ目の~pxの部分では線の太さを指定できます。
なお、単位はpxです。
続いて、二つ目のsolidは、直線という意味です。
ここは普通に暗記してください！
最後の三つ目の~は色では色を指定できます。
代表的な色（red,blue,whiteなど）はそのまま色の名前を記述するだけで大丈夫ですが、
細かく調節したい場合は十六進数で指定します。
この文法は、border,border-left,border-right,border-top,border-bottom共にプロパティ以外は同じ記述方法で指定できます。
3.borderプロパティを使ったちょっとしたテクニック
今回は、例としてborderプロパティを使ったちょっとしたテクニックをご紹介します。
今回は、ウェブサイトでよく見るコレ↓の作り方を紹介します。
テキストテキスト
よく見ますよねこれ！
実はborderプロパティだけで実装できてしまうのです！
では、実際に作り方を解説していきます。
まず、左の線は下の線より太く、そして見やすいように灰色にしたいので、
border-left:6px solid silver;としてあげましょう。
そして、下の線は左の線より細く、色は灰色にしたいので、
border-bottom:2px solid silver;としてあげましょう。
あとは、程よく線の長さをお好みでwidthで調整してあげるだけで完成です！
コードを貼っておきます↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
こんな簡単なコードでよく見るアレが作れちゃいます！
ぜひ覚えて使ってみてはいかがでしょうか？
4.まとめ
いかがでしたでしょうか？
borderプロパティを知っているだけでこんなにもデザインの幅が広がります。
ぜひborderプロパティをマスターしてみてはいかがでしょう！？
ということで今回も、最後まで見てくれた方、ありがとうございました！
ぜひ、お手隙の際に他の記事もご覧ください！
また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
