最終更新日: 2021年1月24日
HTMLで縦線を引く方法を解説！
HTMLの標準機能で縦線を引く方法を解説します。引きたい縦線の種類によって使い分けてみましょう。
HTMLで縦線を引きたい
HTMLで横線を引くには<hr>タグ（水平罫線）がありますが、縦線を引くための専用タグはありません。
専用タグのない縦線を引く方法としてはいくつかありますが、主には下記の方法があります。
- HTMLの画像を使って縦線を引く
- HTMLのテーブルを使って縦線と横線を引く
- 文字数に応じた縦線を引く
- タイトルに帯を付ける
それぞれの特徴を理解して用途によって使い分けると様々なデザインの縦線を引く事ができます。
HTMLで縦線を引く方法
HTMLの画像を使って縦線を引く
HTMLで画像を表示するにはimgタグを利用します。
画像ソフトで1px × 1pxの小さな四角い画像を作成し、imgタグのプロパティーでサイズを指定して利用します。
widthプロパティで縦線の横幅を、heightプロパティで縦線の長さを調整します。
準備する画像によって、様々な線を引く事ができます。
HTMLのテーブルを使って縦線と横線を引く
テーブルに色のついた枠を表示することで区切りの様に縦線を表示します。
tableタグのborderプロパティでは、初期値で線が2重に表示される為、セルのborderを重ねて表示させます。
セルのborderを重ねるには、CSSのborder-collapseプロパティでcollapseを指定します。
下記のサンプルではtable・th・tdにborderを付ける事により、表区切りの様に縦線・横線を引く事ができます。
文字数に応じた縦線を引く
divタグのborderプロパティを使って縦線を引きます。
文字数に応じた要素のサイズに直線を引く事ができます。
タイトルに帯を付ける
h1、h2の見出しのタグの疑似要素の:beforeを利用する事で、タイトルへ縦棒の帯を付ける事ができます。
