TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでborderプロパティを使った縦線を引く方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

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] Webデザインで副業する方法とは

実際に書いてみよう

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

<!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では初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
CSS

三角ジェネレータを応用してCSSで矢印を作る方法を現役エンジニアが解説【初心者向け】

三角ジェネレータを応用してCSSで矢印を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSのtext-strokeで文字を縁取りする方法を現役エンジニアが解説【初心者向け】

CSSのtext-strokeで文字を縁取りする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
CSS

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

CSSの軽量フレームワーク10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

CSSで複数行のdtとddを横並びにする方法【初心者向け】

CSSで複数行のdtとddを横並びにする方法について解説します。 dt要素とdd要素を改行させないcompact属性ががHTML5から廃止されたので、CS...
CSS

CSSの擬似クラスhasの使い方を現役エンジニアが解説【初心者向け】

将来的に対応予定のCSSの擬似クラスhasの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

あわせてよく読まれている記事

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 nth-of-typeとnth-childの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   nth-of-typeについて nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。 擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。 以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。   nth-childについて nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。 //<span>と兄弟関係にある、全ての要素の中でx番目にある<span>を選択 span:nth-child(x){ 〜 } 兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。   [PR] Webデザインで副業する方法とは2つの違い nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。 下記のようなHTMLで考えた場合、 <div>   <span>1</span>   <span>2<!--このspanに適用！--></span>   <span>3</span> </div> span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。 しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。 <div> <p>Number</p>   <span>1<!--nth-child(2)で適用！--></span> <span>2<!--nth-of-child(2)で適用！--></span> <span>3</span> </div> 次は下記のようなHTMLで考えてみましょう。 HTML <html>   <head>     <meta charset="utf-8">     <title>nth-of-typeとnth-of-child</title>   </head>   <body>     <ul>       <li>         <h2>List01</h2>         <span>01</span>         <span>02</span>         <span>03</span>         <span>04</span>         <span>05</span>       </li>       <li>         <h2>List02</h2>         <span>06</span>         <span>07</span>         <span>08</span>         <span>09</span>         <span>10</span>       </li>       <li>         <h2>List03</h2>         <span>11</span>         <span>12</span>         <span>13</span>         <span>14</span>         <span>15</span>       </li>     </ul>   </body> </html> CSS body{   margin:30px;   font-size:20px;   font-weight:bolder; } ul{   list-style:none; } li{   display:flex; } h2{  
CSS

3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】

3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！ 大石ゆかり お願いします！   疑似クラスの説明と使い方 通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。 例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。 CSS： a:hover{ color:red; }   このように、条件や状態を追加することができる擬似クラスはたくさんあります。 :active／アクティブ状態 :visited／訪問済みのリンク :focus／<input>などの要素が入力状態 :checked／checkboxなどでチェックされている状態 :first-child／最初の子要素 :nth-child／親要素の中で、全ての子要素の内、x番目の子要素 :nth-of-type／親要素の中で、x番目の子要素 などなど、まだいっぱいあります。   3の倍数の要素にスタイルを適用する方法 3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。 HTML： <html>   <head>     <meta charset="utf-8">     <title>nth-of-typeを使ってみよう</title>   </head>   <body>     <span>01</span>     <span>02</span>     <span>03</span>     <span>04</span>     <span>05</span>     <span>06</span>     <span>07</span>     <span>08</span>     <span>09</span>     <span>10</span>     <span>11</span>     <span>12</span>     <span>13</span>     <span>14</span>     <span>15</span>     <span>16</span>     <span>17</span>     <span>18</span>     <span>19</span>     <span>20</span>   </body> CSS： @charset "UTF-8"; /*文字コードの指定*/ body{   display:flex;   flex-wrap:wrap;   margin:30px;   font-size:20px;   font-weight:bolder; } span{   display:block;   width:100px;   height:100px;   margin:5px;   background:gold; }     このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。 span:nth-of-type(3n){ background: limegreen; } span:nth-of-type(3n)は、3×n番目の<span>という意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。   [PR] Webデザインで副業する方法とはn番目の要素にスタイルを適用する方法 nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、 span:nth-of-type(10){ background:tomato; } と書きます。   疑似クラスを使ってみよう このように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。 また、 偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; } 奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato;
CSS

PythonのSyntaxErrorの解決方法を現役エンジニアが解説【初心者向け】

PythonのSyntaxErrorの解決方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonのSyntaxErrorの解決方法について詳しく説明していくね！ 大石ゆかり お願いします！   PythonのSyntaxErrorの主な種類、読み方、原因 プログラミングを行っていると多くのエラーに遭遇します。その中でも代表的なものが「SyntaxError」です。 SyntaxError は直訳すると文法エラーという意味で「シンタックスエラー」と読みます。SyntaxErrorは、プログラムが文法的に正しくないと判断された場合に発生します。 判断はプログラムを実行する前に行われるのでSyntaxErrorを解消しないとプログラムを実行することができません。 それではSyntaxErrorはどのような場合に発生するのでしょうか。いくつか例をあげて確認してみましょう。まずは正常に動作するプログラムのソースコードです。 for i in range(1,10): print("*" * i) 実行結果は以下のようになります。 * ** *** **** ***** ****** ******* ******** ********* それでは、for文の「:」を忘れた場合はどうなるでしょうか？ for i in range(1,10) print("*" * i) 実行結果は以下のようになります。ちょうど「:」に該当する部分でSyntaxErrorが発生していることが分かります。 <span class="ansi-cyan-intense-fg ansi-bold"> File </span> <span class="ansi-green-intense-fg ansi-bold">"<ipython-input-2-80458efb33d9>"</span> <span class="ansi-cyan-intense-fg ansi-bold">, line </span><span class="ansi-green-intense-fg ansi-bold">1</span><span class="ansi-yellow-intense-fg ansi-bold"> for i in range(1,10)</span> <span class="ansi-white-intense-fg ansi-bold">
Python

HTMLで縦線を引く方法を現役エンジニアが解説【初心者向け】

HTMLで縦線を引く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 縦線をひく方法について詳しく説明していくね！ 大石ゆかり お願いします！   活用場面 HTMLで縦線が役立つ場面として、例えばコーポレートサイトの部署紹介ページをイメージしてください。 部署のサービスを紹介するコンテンツを縦線で区切ることで情報整理することが可能です。   テーブルデザインを使う方法 ここではtableをつかって縦線を引いてみましょう。 tableは2重線が初期表示されるのでCSSのborder-collapseプロパティでcollapseを指定し、セルのborderを重ねて表示させます。 項目の区切りに縦線を引きたいのでthタグにborder-rightを指定しました。 サンプルコードをみていきましょう。 See the Pen table line by This is standard (@koutafunahashi) on CodePen.   [PR] Webデザインで副業する方法とは画像を使う方法 CSSのborderプロパティで縦線を引くことが多いものの、ここでは画像を使って縦線を引いていきます。 サービス紹介の区切りに線を引きたいので、li:first-childに背景画像を指定し、縦線を引きました。 See the Pen img line by This is standard (@koutafunahashi) on CodePen.   その他の様々な方法 タイトルに縦線を引いてアクセントを付けることも可能です。 See the Pen title line by This is standard (@koutafunahashi) on CodePen.   縦線をひいてみよう 最後に基本となるCSSのborderプロパティで縦線を引いていきましょう。 先ほど画像で縦線を引きましたが、同様にli:first-childにborder-rightで縦線を引きました。 See the Pen border by This is standard (@koutafunahashi) on CodePen.   執筆してくれたメンター 舟橋幸太郎 フリーのWebデザイナー、グロースハッカーです。 KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。 過去行ったA/Bテストが実績として書籍に掲載されました。 TechAcademyではWebデザインコースを担当しています。   大石ゆかり HTMLで縦線を引く方法がよく分かったので、良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
HTML

実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】

CSSでLINEのような吹き出しを作る方法について解説しています。 実際にソースコードを書いて説明しているので、書きながら実践的に理解していきましょう。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   大石ゆかり 田島メンター！！メニューの横に吹き出しのような三角を付けたいのですが、どうすればいいですか〜？ 田島悠介 それでは今回はbeforeとafterの疑似要素を使って、画面に吹き出しの形を作成する例を紹介しよう。 大石ゆかり beforeとafterは、要素の直前や直後に何かを入れるものでしたね。 田島悠介 そうだね。吹き出しの三角形部分を作るのにはいくつかの手順があるんだ。ひとつ例を見てみよう。   最初に実行結果をお見せします。   吹き出しの書き方 左向きの吹き出しを例に書き方をみていきます。まず、吹き出しの枠を作ります。 html部分 ------------------------------------------ <div class="balloon-left"> 左だよ </div> ------------------------------------------ css部分 ------------------------------------------ .balloon-left { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 34px; text-align: center; background: #44FF44; border: 3px solid #000000; z-index: 0; } ------------------------------------------   次に、:beforeで、吹き出しの尖った部分を作ります。 html部分 ------------------------------------------ <div> 左だよ </div> ------------------------------------------ css部分 ------------------------------------------ .balloon-left { position: relative; display: inline-block; padding: 0 15px;
CSS

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次CSSで縦線を引く方法CSSで横線を引く方法実際に書いてみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら】   田島悠介 今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。 大石ゆかり 田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？ 田島悠介 指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。 大石ゆかり 分かりました！   nth-of-typeとは nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。 擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。   以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。 疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。   nth-of-typeの書き方 「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。 li:nth-of-type(2n){   /*適用する内容*/ } ( )内部の「n」を使って、何番目であるかを記しています。 今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。 また、「3n-1」や「odd」「even」という指定もできます。 「odd」「even」はそれぞれ奇数、偶数という指定方法です。   田島悠介 ()内で指定された部分にのみ、スタイルが適用されるんだ。 大石ゆかり この場合は偶数が対象ということですね。 田島悠介 次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際にHTMLとCSSを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li>
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでborderプロパティを使った縦線を引く方法を現役デザイナーが解説【初心者向け】