HTML で垂直線を作成する

HTML ページに垂直線を作るには、CSS で高さ、太さ、色を設定します。装飾用の区切り線には border-left が適しています。内容の区切りを示す場合は <hr> をスタイルし、コンテンツブロックの間に線を配置するにはフレックスボックスまたは CSS Grid を使います。HTML だけでは線の見た目を制御できません。

CSS の border-left で垂直線を作る

左側の境界線は、手軽な装飾用の線です。要素に明示的な高さを指定し、続けて境界線の太さと色を設定します。この Node.js スクリプトは、完成したサンプルページを vertical-line.html に書き込みます。ファイルをブラウザーで開くと、表示を確認できます。

次は、ページ全体を生成する例です。Node.js で実行すると、2 つのラベルと、その間に青い区切り線があるページを作成します。

const { writeFileSync } = require("node:fs");

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vertical line with a border</title>
  <style>
    .row { display: flex; align-items: center; }
    .line {
      height: 8rem;
      border-left: 2px solid #2563eb;
      margin-inline: 1rem;
    }
  </style>
</head>
<body>
  <div class="row">
    <span>Account details</span>
    <div class="line" aria-hidden="true"></div>
    <span>Preferences</span>
  </div>
</body>
</html>`;

writeFileSync("vertical-line.html", page);
console.log("Created vertical-line.html");

CSS では線の長さを 8 rem、太さを 2 ピクセルに設定しています。ページに合わせて、これらの値と境界線の色を変更してください。margin-inline は、左から右へ書くレイアウトでも右から左へ書くレイアウトでも、両側に余白を加えます。この線は装飾用なので、aria-hidden="true" を指定するとアクセシビリティツリーから除外されます。パーセント指定の高さは、包含ブロックに確定した高さがある場合に基づいて計算されます。包含ブロックの高さが確定していないと、期待した大きさにならないことがあります。

hr 要素を垂直線に調整する

hr 要素は、HTML ソースでは <hr> と記述し、ページの各部分の間にある内容上の区切りを表します。その意味がコンテンツに合う場合に使ってください。CSS で変えられるのは見た目であり、要素の意味ではありません。ブラウザーには既定のスタイルがあるため、細い垂直線を描く前に境界線をリセットします。たとえば <hr class="vertical-rule"> を使い、width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem; を設定します。画面上の幅は左側の境界線によって決まります。この要素は通常のドキュメントフローに置かれ、独立した行を占めます。横並びのコンテンツの間に配置する場合は、フレックスボックスまたは Grid のコンテナーに入れてください。

フレックスボックスまたは Grid でコンテンツの間に区切り線を配置する

フレックスボックスと Grid では、区切り要素をレイアウト項目として配置し、境界線または背景色で線を表示します。フレックスボックスの行では、2 つのコンテンツ領域の間に区切り要素を置きます。親要素に display: flex; align-items: stretch; gap: 1rem; を指定し、各領域に flex: 1;、区切り要素に border-left: 2px solid #2563eb; を指定します。線は行の高さまで伸び、その高さはコンテンツ領域のうち高い方に合わせて決まります。装飾用の区切り線には aria-hidden="true" を指定します。

Grid では 3 列を使い、中央のトラックを線にします。指定例は grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem; です。パネルを 1 列目と 3 列目に置き、中央に background: #2563eb を指定した区切り要素を置きます。中央のトラック幅 2 ピクセルが線の太さになります。画面幅が狭い場合は、メディアクエリーでパネルを縦に並べ、読み進める順序に合うなら垂直線を水平の境界線に置き換えます。単純なアクセントには border-left、内容上の区切りには <hr>、レイアウト項目の間に線を置くにはフレックスボックスまたは CSS Grid を選んでください。