HTMLで要素に枠をつける方法【現役エンジニアが解説】
今回は、HTMLで要素に枠をつける方法について、実線と点線、角丸の枠に分け、簡単に解説していきます。
実線の枠のつけ方
実線の枠をつけるには、スタイルのborderプロパティを指定します。
borderプロパティの値には、枠のサイズとスタイル、色を順不同で指定する必要があります。
<div style="width:200px;height:200px;border:1px solid #000000;"></div>
上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの実線の黒色の枠をつけています。
点線の枠のつけ方
点線の枠をつける際も、スタイルのborderプロパティを指定する必要があります。
点線の枠では、borderプロパティの値の枠のスタイルはdashed(点線)やdotted(細かい点線)を指定します。
<div style="width:200px;height:200px;border:1px dashed #000000;"></div>
上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの(細かくない)点線の黒色の枠をつけています。
角丸の枠のつけ方
角丸の枠をつける場合は、スタイルのborderプロパティの他、border-radiusプロパティも使います。
border-radiusプロパティの値には、角丸の度合いをピクセル単位で指定し、borderプロパティの値はこれまで同様です。
<div style="width:200px;height:200px;border:1px solid #000000;border-radius:5px;"></div>
上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの実線の黒色の枠を、角丸付きで表示しています。