HTML の HR タグの太さをカスタマイズする

Aimen Fatima 2023年6月20日

HTML HTML Tag

HTML の hr タグ
HTML に水平線を挿入する
HTML で水平線をカスタマイズする

この記事では、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>

出力：

HTML の hr タグ

hrタグの機能を学ぶための実用的な例