HTML で垂直線を作成する

1. HTML で border-left CSS プロパティを使用して垂直線を作成する
2. HTML で hr タグを微調整して垂直線を作成する

この記事では、HTML で縦線を作成するいくつかの方法を紹介します。

HTML で border-left CSS プロパティを使用して垂直線を作成する

HTML では、hr タグを使用して水平線を作成しますが、垂直線を作成するためのタグはありません。ただし、border-left CSS プロパティを使用して垂直線をシミュレートできます。

border-left プロパティは、左側の境界線のスタイルを設定するために使用されます。プロパティは、border-left width、border-left style、および border-left color の省略形です。

border-left プロパティのみを使用すると、垂直線が作成されます。HTML でコンテナを作成し、それを選択してプロパティを適用し、垂直線を作成できます。

たとえば、HTML でクラス v-line を使用して div を作成し、v-line を選択していくつかのスタイルを適用します。border-left プロパティを thick solid #000 に設定します。

次に、height を 100%に設定し、left を 50%に設定します。最後に、position プロパティを absolute に設定します。

ここでは、Web ページの中央に黒い境界線があります。このようにして、HTML の border-left CSS プロパティを使用して垂直線を作成できます。

サンプルコード：

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

HTML で hr タグを微調整して垂直線を作成する

hr タグを微調整して、HTML で縦線を作成できます。

hr タグは、水平線を作成するために使用されます。hr タグの height には最大値を使用し、width には最小値を使用できます。

このようにして、水平線の高さが伸び、幅が狭くなります。水平線とその境界線に同じ色を適用して、垂直に見えるようにすることができます。

たとえば、HTML で hr タグを作成します。CSS で、hr タグの height を 100vh に設定し、width を .5vw に設定します。

次に、border-width を 0 に設定します。最後に、線の color と background-color を #000 に設定します。

ここでは、垂直線が細くなるように、0 の値を border-width に設定します。このようにして、HTML の hr タグを使用して垂直線を作成しました。

サンプルコード：

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}