「borderで引きたい場所にだけ線を引きたい!」
という場合の対処方法を説明します。
この記事を読んでできること
・borderの使い方を理解することができる
・コピペだけで、引きたい場所にborderを使用することができる
borderの基本
まず、こちらをご覧ください。
【要素の周りに線を引く場合】
border:3px solid #333;のように指定すると要素の周りに線を引くことができます。
値はそれぞれ線の幅、線のデザイン、線の色です。
(border-width border-style border-color)
「borderだけ指定すると上下左右に線が反映する」ということだけ覚えましょう。
“border”でピンポイントに線を引こう
border-top: 3px solid #333;
border-right: 3px solid #333;
border-bottom: 3px solid #333;
border-left: 3px solid #333;
上線:border-top
右線:border-right
下線:border-bottom
左線:border-left
これらを使うと、引きたい箇所の線を指定することができます。
4種類・4方向あります。
「上と下だけに引きたい」時はborder-topとborder-bottomを指定すればOKです。
下記を参考にしながら実際にやってみましょう。
【ピンポイントに線を引く場合】
応用:上下それぞれちがうデザインも可能
線のスタイルはsolidを使う場合が多いです。
一方で、オシャレな枠線にしたいという方はこちらもチェックしてみて下さい。
【上下それぞれちがうデザインにする場合】
まとめ
borderについての疑問は解消できたでしょうか。
解消できない場合はコピペすれば、問題なく使うことができると思いますのでご活用ください。