スポンサーリンク

【CSS】borderで上だけ、下だけ、上下だけに線を引く方法【コピペでOK】

javascript


「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についての疑問は解消できたでしょうか。
解消できない場合はコピペすれば、問題なく使うことができると思いますのでご活用ください。

javascript
スポンサーリンク
javacriptをゲームで学ぼう