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

HTMLで縦線を引く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座の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デザインコースを担当しています。

 

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

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