縦線でデザインをレベルアップ！HTMLとCSSのテクニック
2024-04-11
HTMLとCSSで縦線を引く方法
特殊文字を使う
HTMLには、縦線を含む様々な特殊文字が用意されています。
例：
 ｜  <br>
<hr>
 ｜ : 半角スペースと縦線（｜）を半角スペースで挟む。<br>: 改行コード。<hr>: 横線（水平線）を挿入。
この方法は、シンプルな縦線を引く場合に便利です。
borderプロパティを使う
CSSのborderプロパティを使って、要素の枠線に縦線を設定できます。
<div style="border-left: 1px solid black;"></div>
border-left: 左側の枠線設定。1px: 線の太さ（ピクセル単位）。solid: 線の種類（実線）。black: 線の色。
この方法は、線の太さや色などを自由に設定できる点がメリットです。
擬似要素を使う
CSSの擬似要素::beforeや::afterを使って、要素の前に/後に縦線を挿入できます。
<div>
<p>テキスト</p>
</div>
div::before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: black;
}
content: "": 擬似要素内に表示する文字列（空("")）。display: inline-block: 擬似要素をインラインブロック要素として表示。width: 線の太さ。height: 線の長さ。background-color: 線の色。
この方法は、要素のコンテンツと独立した縦線を挿入できる点がメリットです。
HTMLとCSSで縦線を引くには、様々な方法があります。それぞれの特徴を理解して、目的に合った方法を選択しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>縦線</title>
</head>
<body>
<h1>見出し</h1>
<p>テキスト ｜ テキスト</p>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>縦線</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h2>見出し</h2>
<p>テキスト</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>縦線</title>
<style>
.box {
display: flex;
align-items: center;
}
.box::before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: black;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>テキスト</p>
</div>
</body>
</html>
上記のサンプルコードは基本的な例です。線の太さや色、位置などを調整することで、様々なデザインの縦線を引くことができます。
HTMLとCSSで縦線を引くその他の方法
<img>タグを使う
縦線画像を用意して、<img>タグを使って挿入する方法です。
<img src="images/line.png" alt="縦線">
src: 縦線画像のパス。alt: 縦線画像の代替テキスト。
この方法は、画像ファイルを用意する必要がある点がデメリットです。
SVGを使う
SVG（Scalable Vector Graphics）を使って、縦線を記述する方法です。
<svg viewBox="0 0 1 100">
<line x1="0" y1="0" x2="0" y2="100" stroke="black" stroke-width="1" />
</svg>
viewBox: SVG画像の表示領域。line: 縦線要素。x1: 縦線の始点のx座標。stroke: 線の色。
CSS Gridレイアウトを使って、縦線を引く方法です。
<div style="display: grid; grid-template-columns: 1fr 1px 1fr;">
<div>テキスト</div>
<div></div>
<div>テキスト</div>
</div>
display: grid: グリッドレイアウトを適用。grid-template-columns: 列のレイアウト設定。1fr: 1フレックス分の幅。1px: 1ピクセルの幅。
この方法は、レイアウトが複雑な場合に有効です。
HTMLとCSSで縦線を引く方法は、目的に合わせて選択する必要があります。
それぞれの方法の特徴を理解して、最適な方法を選びましょう。
html css
