【CSS】borderプロパティ 要素を線で囲む方法とデザイン例

今回ご紹介するのは、枠線を表示するborderプロパティについて。borderプロパティで引ける枠線には直線、点線、破線などがあり種類が豊富。

今回はborderプロパティの基本の使い方とともに、優秀なデザイン例もご紹介します!

要素を線で囲むCSSのプロパティ

borderプロパティの使い方

以下が枠線を引くborderプロパティの指定方法です。


実行例

まずは枠線を引くCSSのborderプロパティについて解説します。以下のようなHTMLを用意しました。このborderプロパティは要素に何も入っていない場合でも、適用することができます。

実行結果

borderプロパティで使用できる値

solid

solidを指定すると実線が表示されます。一番多くのサイトで使用されている、汎用性の高い値です。記事後半でご紹介しますが、使いこなすことで豊富なデザインを施すことができます。

dotted

dottedを指定すると丸でドットを形成し、枠線を表示します。大きさを変えると、丸の大きさも変わります。

dashed

dashedは破線を表示します。dottedは丸で枠線を形成しますが、dashedでは長方形で枠線を形成します。

double

doubleは線を二重にして表示します。指定する太さの値が小さい場合は一重に表示されます。

groove

grooveは谷のように窪んだ枠線を表示します。

ridge

ridgegrooveと対称に浮き出たように枠線が表示されます。

inset

insetでは中に入り込んだような枠線を形成します。grooveよりもさらに窪んで見えます。

outset

outsetではinsetと対称に、浮き出たような枠線を形成します。ridgeよりもさらに突出して見えます。

hidden

hidden枠線の実体はあるものの、枠線が非表示に設定されています。

none

noneを指定すると、枠線は完全に表示されません。

borderプロパティを使用した枠線のデザイン例

では先ほどご紹介した値を使用して、実際に使用できそうなデザインを作成してみましょう。

丸みのあるボックス

borderプロパティで設定した枠線は、border-radiusで角の装飾に変化を与えることができます。ここではborder-radius: 10px;を適用しました。

楕円形のボックスを作成する

border-radiusの値をさらに大きくすることで、楕円に近い形のボックスを作成することもできます。この楕円は見出しなどで有効に利用できそうですね。

左線だけを表示する

borderプロパティは一部の線を直接作成したり、一部の線を非表示にしたり、細かな設定を施すこともできます。以下のように、よく見かける典型的な付箋のようなデザインも作成可能です。

borderプロパティはnoneを利用して、以下のように置き換えることもできます。

応用編:borderプロパティを利用して立体的なボタンを作成する

borderプロパティはただ枠線を表示させるだけでなく、立体的なデザインを施すこともできます。ここでは『疑似クラス』というものを使用しました。

:hoverはカーソルが要素の上にある時、:activeは要素がクリックされたときの装飾を設定します。背景色よりも濃い青色を枠線に設定することで、浮き出たボタンをクリックするように見せることができるのです。

See the Pen
ボタン 装飾
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はCSSで枠線を設定する方法についてご紹介しました。borderプロパティは自らHTMLでWebぺージをコーディングするときにかなり有効なプロパティです。

太さや色、指定する位置を調整することでデザインも自由なので、ぜひ沢山コードを書いて習得しておきましょう!

参考文献:
https://beginners-hp.com/css-property/border-style.html
https://developer.mozilla.org/ja/docs/Web/CSS/border