CSSでborderプロパティを使った縦線を引く方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSで縦線を引く方法について解説しています。ここではborderプロパティを使った方法、要素の大きさを指定して縦線に見せる方法について説明します。また、横線はアンダーラインを使うことで表現が可能です。ぜひ覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSで縦線を引く方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

縦線を引く方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSSで縦線を引く方法

CSSで縦線を引く方法はいくつかありますが、ここでは border プロパティを使った方法と要素の大きさを指定して縦線に見せる方法をご紹介します。

 

border プロパティを使った方法

1つ目は border プロパティを使った方法です。border プロパティにはいくつか種類があり、例えば border-left を使うことで以下のように行頭に縦線を引くことができます。

CSS

.v_line_left {
  border-left: thick solid red;
  padding-left: 10px;
}

HTML

<div class="v_line_left">
  some<br> other<br> content<br>
</div>

実行結果は以下のようになります。

 

要素の大きさを指定して縦線に見せる方法

2つ目は要素の大きさを指定して縦線に見せる方法です。<div> 要素や <span> 要素などの大きさを指定することで縦線のように見せることができます。

CSS

.v_line_fix {
  margin-left: 100px;
  width: 5px;
  height: 150px;
  background-color: brown;
}

HTML

<div class="v_line_fix"></div>

実行結果は以下のようになります。

 

CSSで横線を引く方法

CSSで横線を引く方法もいろいろあります。

 

アンダーラインを利用する方法

CSSで横線を引く方法として、最も単純なのはアンダーラインを利用する方法です。

CSS

.h_line1 {
  text-decoration: underline;
  text-decoration-color: indigo;
}

HTML

<span class="h_line1">コンテンツ1の内容はここに記載します</span>

実行結果は以下のようになります。

 

borderプロパティを使った方法

縦線と同様、borderプロパティを使って横線を引くことも可能です。

CSS

.h_line2 {
  border-bottom: dotted;
  border-width: 5px;
  border-color: midnightblue;
}

HTML

<span class="h_line2">コンテンツ2の内容はここに記載します</span>

実行結果は以下のようになります。アンダーラインより自由な表現が可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

上記のサンプルプログラムをまとめると以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    .v_line_left {
      border-left: thick solid red;
      padding-left: 10px;
    }

    .v_line_fix {
      margin-left: 100px;
      width: 5px;
      height: 150px;
      background-color: brown;
    }

    .h_line1 {
      text-decoration: underline;
      text-decoration-color: indigo;
    }

    .h_line2 {
      border-bottom: dotted;
      border-width: 5px;
      border-color: midnightblue;
    }
  </style>
</head>
<body>
  <div class="v_line_left">
    some<br> other<br> content<br>
  </div>

  <div class="v_line_fix"></div>

  <span class="h_line1">コンテンツ1の内容はここに記載します</span>

  <br><br>

  <span class="h_line2">コンテンツ2の内容はここに記載します</span>
</body>
</html>

実行結果は以下のようになります。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。