HTMLで縦線を引く方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLで縦線をひく方法について解説しています。縦線を使う場面の例とテーブルデザインを使う方法、画像を使う方法、CSSのborderプロパティを使う方法などいくつかの書き方を紹介します。場合によって使い分けてみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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.
画像を使う方法
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サイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
