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

初心者向けにHTMLで縦線をひく方法について解説しています。縦線を使う場面の例とテーブルデザインを使う方法、画像を使う方法、CSSのborderプロパティを使う方法などいくつかの書き方を紹介します。場合によって使い分けてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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] HTML/CSSで挫折しない学習方法を動画で公開中

画像を使う方法

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

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