CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。

それでは、実際のコード例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .vLine {
    border-left: 6px solid rgb(128, 0, 128);
    height: 500px;
    margin-left: 5%;
  }
</style>
</head>
<body>
<h1>Vertical Line Example</h1>
<div class="vLine"></div>
</body>
</html>

コードの解説

この例では、vLine というクラスを持つ空の div 要素に、以下の3つのプロパティを指定しています。

  • border-left: 6px solid rgb(128, 0, 128); — 左側に幅6pxの紫の実線を表示します。
  • height: 500px; — 垂直線の高さを500pxに設定します。
  • margin-left: 5%; — 左側に余白を設け、画面端から少し離れた位置に線を配置します。

出力結果

上記のコードをブラウザで実行すると、次のように垂直線が表示されます。

CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

線のスタイルをカスタマイズする

border-left の値を変更すれば、線の太さ・色・スタイルは自由自在です。例えば、破線にしたい場合は次のように指定します。

.vLine {
  border-left: 4px dashed #333;
  height: 300px;
}

このように、dashed（破線）や dotted（点線）を指定するだけで、デザインに合わせた垂直線を作成できます。また、border-right を使えば右側に線を表示することも可能です。レイアウトの区切り線やデザインのアクセントとして、ぜひ活用してみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>