2020/11/03

HTMLで罫線(区切り線)を引く方法【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルの罫線を引いています。

• facebook
• Tweet
• Read Later