HTML の HR タグの太さをカスタマイズする
この記事では、HTML の <hr> タグについて説明します。 また、≪
≫タグの属性とそのカスタマイズ、つまりCSSでの太さ、色、不透明度の変更についても説明します。
HTML プロジェクトを作成し、<hr> タグを実装することでデモンストレーションを行います。
HTML の hr タグ
HTML の <hr> タグを使用すると、テーマの切れ目や水平方向の罫線を追加して、ドキュメントのパーツを分離または分割できます。
カスタマイズするには、適切な CSS が必要です。 終了タグは必要ありません。 その基本的な構文は次のとおりです。
<hr property: value;> ...
属性:
align: この属性は、ページの水平線を揃えることができます。Left、center、およびrightは、alignプロパティの可能な値です。noshade: 陰影効果を持たないように線を指定します。size: 横線の高さを指定します。幅: 横線の幅を指定します。color: 横線の色を指定します。
hrタグの機能を学ぶための実用的な例
<hr> タグを実装するサンプル HTML プロジェクトを作成してみましょう。 Notepad/Notepad++ (PC) や TextEdit (Mac) など、OS でサポートされている HTML エディタを開きます。
次の簡単な HTML コードをエディターに記述し、ファイルをFilename.htmlとして保存し、保存したファイルをサポートされている Web ブラウザーで開きます。
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<p>Paragraph to split.</p>
</center>
</body>
</html>
出力：
HTML に水平線を挿入する
ソース ファイルに <hr> タグを挿入して、見出しと段落の間に横区切りを設定します。
上記で作成した HTML ファイルに次のコード スニペットをコピーします。
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr>
<p>Paragraph to split.</p>
</center>
</body>
</html>
出力：
見出しと段落の間に水平線が表示されます。 このバーには、色、サイズ、幅、配置のデフォルト値があります。
HTML で水平線をカスタマイズする
属性 (align、color、size、width、noshade) は、目的の出力に応じてカスタマイズできます。 ドキュメント内の水平線の外観を変更するには、CSS を使用する必要があります。
<hr> の height プロパティは、バーの太さを指定します。 バーの可視性は opacity 属性を使用して設定できます。
たとえば、ドキュメント内であまり目立たないバーが必要な場合、不透明度の値は 1 未満にする必要があります。
横罫線の太さ
CSS の height プロパティは、横罫線の太さを指定するために使用されます。 height の最小値は 1px です。
以下は、CSS スタイル シートのコード スニペットです。
hr {
position: relative;
top: 10px;
border: none;
height: 1px;
background: green;
margin-bottom: 30px;
width: 30em;
}
top 属性は、水平線とドキュメントの上部との間のギャップを指定します。 CSS の Background は、HTML の color 属性に代わるものです。
バーの色を指定します。 これらのプロパティを示す完全なコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<p>Paragraph to split.</p>
</center>
</body>
</html>
出力：
水平線の不透明度
CSS の opacity 属性は、水平線の透明度を指定します。 不透明度の値 1 は透明度を示しませんが、不透明度の値 0 は完全な透明度を示します。
以下は、opacity 属性の構文です。
hr
{
background-color: gray;
opacity: 0.5;
}
例：
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
margin-bottom: 30px;
width: 30em;
}
hr.class3{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
opacity: .25;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<hr class=class3>
<p>Paragraph to split.</p>
</center>
</body>
</html>
出力：