HTMLで区切り線を記述するコードを紹介します。
概要
HTMLで水平の区切り線を表示する場合は、<HR/>タグを利用します。
書式
表示例
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>コンテンツです。あいうえおかきくけこ</p>
<hr/>
<p>コンテンツです。ABCDEFFGHG</p>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
幅を指定する場合
幅を指定する場合は、width 属性に値を設定します。または、スタイルシートを利用します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>コンテンツです。あいうえおかきくけこ</p>
<hr width="50%"/>
<p>コンテンツです。ABCDEFFGHG</p>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
スタイルシートを利用する例
スタイルシートを利用して幅を指定する例です。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.ShortHorizontalRule{ width:420px;}
-->
</style>
</head>
<body>
<p>コンテンツです。あいうえおかきくけこ</p>
<hr class="ShortHorizontalRule"/>
<p>コンテンツです。ABCDEFFGHG</p>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-01-06
作成日: 2017-01-18
