htmlに水平線を挿入または描画するのは簡単です。 しかし、htmlで垂直線をどのように描画しますか？ 水平線の場合とは異なり、htmlには垂直線を描画する単一のタグはありません。 しかし、それはそうすることが不可能であることを意味するものではありません。
CSSの使用
これを行う1つの方法は、カスケードスタイルシートまたはCSSでhtmlタグを使用することです。 htmlのdivタグを使用して、ページにブロックを描画します。 Divタグでは、border-leftまたはborder-rightプロパティを使用してブロックの境界線を描画できます。 Divのheightプロパティと組み合わせると、目的の長さの垂直線が描画されます。
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- 高さ：高さは、ページ上の行の長さを指定するために使用することができます。
- border-left：これはあなたが好きな行の種類を指定します。 この例は、2ピクセルの厚さの黒い実線です。 あなたは破線またははるかに太い線を持つことができます。
- 位置と左：これら二つは一緒にあなたが水平に整列した行を必要とするページ内の場所を指定します。 Divを適切に配置する属性は、ページ上の行を配置するために使用できます
上記のコードの出力は、ページの中央に黒い実線として表示されます。可能な組み合わせはいくつかあります。
たとえば、border-leftプロパティとborder-rightプロパティの両方を一緒に使用して、2つの垂直線を並べて描画できます。 2本の線を描画する場合は、必ずdivの幅を指定してください。 これにより、2つの垂直線間の距離が決まります。
ピクセル数を使用して、線のサイズまたは太さを変更できます。 水平線を描画するために使用できるほとんどすべてのバリエーションは、垂直線を描画するためにも使用できます。
divなどのコンテナタグを使用すると、必要に応じてテキストブロックの横に垂直線を描画することもできます。 コンテナタグを使用すると、テキストの周りに垂直線だけでなく、水平線も柔軟に描画できます。 これを行うには、次のようなことができます:div>
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
ここの例ではインラインスタイル属性を使用しましたが、理想的には外部スタイ….. それはすべてのあなたのwebページを渡る一貫した外観や質がある機能を与える。
hrタグの使用
水平線を挿入するためのHTMLタグはhrタグです。 同じタグを使用して垂直線を挿入することもできますが、線の書式を設定するには幅とサイズを指定する必要があります。 したがって、おそらく行うことは、前の例のdivタグの代わりにhrタグを使用することだけです。それでも、派手な書式設定が必要ない場合は、非常に簡単に使用できます。 線の太さを設定するにはwidth属性を指定し、線の長さまたは高さを指定するにはsize属性を指定します。
<hr width="1" size="300"/>
divを使用すると、描画する線のサイズとタイプを制御したり、複数の線を描画したりする際に、より柔軟に制御できます。 さて、あなたは私たちが使用していた左と右の代わりにborder-topまたはborder-bottomプロパティを使用して、ちょうど同じ方法で水平線を描くことができます。