HTMLで罫線(区切り線)を引く方法【現役エンジニアが解説】
今回は、HTMLで罫線(区切り線)を引く方法について、hrタグやスタイル、tableタグによる引き方に分け、簡単に解説していきます。
hrタグで罫線を引く
罫線を引く簡単な方法はhrタグを使うことです。
hrタグは一つ使うだけで良く、閉じる(囲う)必要はありません。
<hr>
上記のコードでは、hrタグを使って、水平方向の罫線を引いています。
スタイルで罫線を引く
pタグやdivタグ等にスタイルで罫線を引くことも可能です。
スタイルでborderプロパティを指定することで、罫線が引けます。
<p style="border:1px solid blue;"> ほげ </p>
上記のコードでは、”ほげ”という文字列を囲う四角形の罫線を引いています。
tableタグで罫線を引く
セルを囲う罫線を引きたい場合には、tableタグを使用します。
tableタグでテーブル、trタグで行、tdタグでセルを表現していきます。
<table border="1"> <tr> <td>氏名</td> <td>性別</td> </tr> <tr> <td>田中</td> <td>男性</td> </tr> <tr> <td>髙橋</td> <td>女性</td> </tr> </table>
上記のコードでは、氏名と性別の一覧をテーブルで表現し、各セルに対し1ピクセルの罫線を引いています。