HTMLで縦線を引く方法を解説!

HTMLの標準機能で縦線を引く方法を解説します。引きたい縦線の種類によって使い分けてみましょう。

コンテンツ [表示]

  1. 1HTMLで縦線を引きたい
  2. 2HTMLで縦線を引く方法
  3. 2.1HTMLの画像を使って縦線を引く
  4. 2.2HTMLのテーブルを使って縦線と横線を引く
  5. 2.3文字数に応じた縦線を引く
  6. 2.4タイトルに帯を付ける

HTMLで縦線を引きたい

HTMLで横線を引くには<hr>タグ(水平罫線)がありますが、縦線を引くための専用タグはありません。

専用タグのない縦線を引く方法としてはいくつかありますが、主には下記の方法があります。

  • HTMLの画像を使って縦線を引く
  • HTMLのテーブルを使って縦線と横線を引く
  • 文字数に応じた縦線を引く
  • タイトルに帯を付ける

それぞれの特徴を理解して用途によって使い分けると様々なデザインの縦線を引く事ができます。

HTMLで縦線を引く方法

HTMLの画像を使って縦線を引く

HTMLで画像を表示するにはimgタグを利用します。

画像ソフトで1px × 1pxの小さな四角い画像を作成し、imgタグのプロパティーでサイズを指定して利用します。

widthプロパティで縦線の横幅を、heightプロパティで縦線の長さを調整します。

準備する画像によって、様々な線を引く事ができます。

HTMLのテーブルを使って縦線と横線を引く

テーブルに色のついた枠を表示することで区切りの様に縦線を表示します。

tableタグのborderプロパティでは、初期値で線が2重に表示される為、セルのborderを重ねて表示させます。

セルのborderを重ねるには、CSSのborder-collapseプロパティでcollapseを指定します。

下記のサンプルではtablethtdborderを付ける事により、表区切りの様に縦線・横線を引く事ができます。

あわせて読みたい
border-collapse
CSSのborder-collapseプロパティは隣接するセルの枠線を共有するか(重ねる)、分離するか(間隔をあける)を設定するプロパティです。border-collapseプロパティの構文や使い方をサンプルコード付きで解説します。

文字数に応じた縦線を引く

divタグのborderプロパティを使って縦線を引きます。

文字数に応じた要素のサイズに直線を引く事ができます。

タイトルに帯を付ける

h1h2の見出しのタグの疑似要素の:beforeを利用する事で、タイトルへ縦棒の帯を付ける事ができます。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事