こんにちは朱夏です。
今回はCSSの「border」を使って枠線を引く方法をまとめてみました。
コンテンツを線で囲うにはどうすればいいんだろう？
線の種類はどんなものがあるのかな？
上下にだけ線を引くことは出来るのかな？
こういった疑問も解決できる様にまとめました。
それではいってみましょう。
borderの書き方
borderで使える線の種類
borderで一辺だけ線を引く方法
あとがき
borderの書き方
初めに、基本的な枠線の引き方、「border」の書き方を説明します。
初めに、コードはこんな感じになります。
See the Pen
wvaZERE by 朱夏 (@syunatsu1)
on CodePen.
書き方はシンプルで、「border」プロパティの中に線の種類、太さ、色を指定すればOKです。
太さと色は指定しなくても線を引くことは可能です。
その場合、太さは3px、色は基本的に黒、もしくはグレーで表示されます。
borderで使える線の種類
「border」で使える線の種類には、実線、二重線、点線など様々な線を選択できます。
それらのサンプルを一気に紹介します。
See the Pen
jOPRQqy by 朱夏 (@syunatsu1)
on CodePen.
各枠線の種類に対応した値を一覧にしました。
borderで一辺だけ線を引く方法
枠線の上だけ、右だけなど、一辺に線を引く方法があります。
それには以下を使います。
この方法で線を引いたサンプルを用意しました。
See the Pen
zYGXMbe by 朱夏 (@syunatsu1)
on CodePen.
サンプルの中で1つポイントになるのが、「コの字」と「凹型」の枠線です。
どちらも3辺に線を引いたものになりますが、コードの書き方が違います。
これは、CSSが後出しで設定されたものを優先する事を利用した小技です。
これを使うと、普通に3辺に線を引くより1行コードを削れます。
たった一行ですが、こういった事で容量や作業時間が結構変わったりします。
あとがき
というわけで、「border」で枠線を引く方法をまとめてみました。
今回のまとめ。
枠線を引くには、「border」に種類、太さ、色を書く。
「border」ははっきり境界を区切ってしまうので、見た目のデザインをする上で使い方が難しい要素の1つかなと思っています。
上手く使いこなせるように日々積み上げですね^_^
今回は以上です。
次回もよろしくお願いします。
