`<hr>`タグの厚さ変更方法
2024-09-09
HTMLの<hr>タグの厚さを変更する方法
HTMLの<hr>タグは、水平線をページ内に挿入するために使用されます。デフォルトでは、<hr>タグの厚さは細く設定されています。しかし、CSSを使用して、この厚さを変更することができます。
CSSを使用して厚さを変更する
スタイルシートを作成またはリンクする
<hr>タグにスタイルを適用する
<hr>タグにクラスまたはIDを割り当て、そのスタイルをCSSで定義します。
例
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
<style>
.thick-line {
border: 4px solid black;
}
</style>
</head>
<body>
<hr class="thick-line">
</body>
</html>
この例では、<hr>タグにthick-lineクラスを割り当て、そのスタイルをCSSで定義しています。borderプロパティを使用して、線の厚さ（4px）、スタイル（solid）、および色（black）を設定しています。
- border-bottom-widthプロパティ
下側の境界線の厚さを設定します。
注意
- ブラウザのデフォルトスタイルが異なる場合がありますので、必要に応じて調整してください。
<hr>タグは、セクションを区切るためのシンプルな方法として使用されます。複雑なレイアウトやデザインが必要な場合は、他のHTML要素やCSSテクニックを検討してください。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
<style>
.thick-line {
border: 4px solid black;
}
</style>
</head>
<body>
<hr class="thick-line">
</body>
</html>
.thick-lineクラスを<hr>タグに割り当てます。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
<style>
#my-hr {
border: 2px dashed blue;
}
</style>
</head>
<body>
<hr id="my-hr">
</body>
</html>
my-hrIDを<hr>タグに割り当てます。
例3: インラインスタイルを使用して厚さを変更する
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
</head>
<body>
<hr style="border: 3px dotted green;">
</body>
</html>
<hr>タグのstyle属性を使用して、直接スタイルを定義します。
border-top-widthプロパティ
- 上側の境界線の厚さを設定します。
hr { border-top-width: 4px; }heightプロパティ
<hr>タグの高さ全体を設定します。ただし、ブラウザによっては解釈が異なる場合があります。
hr { height: 5px; }contentプロパティ
<hr>タグのコンテンツを指定し、そのスタイルを調整します。
hr { content: ""; border-top: 3px solid black; height: 0; }
html css user-interface
