HTMLでテキストを整列する方法
Webページを作成する際、テキストの整列は視覚的な魅力と読みやすさを向上させるために不可欠です。HTML単独では、段落などのブロックレベル要素内のテキストの水平方向の配置を制御する直接的なメカニズムを提供していません。そこでCSSの「text-align」プロパティが登場します。
CSS text-alignプロパティ
CSSの「text-align」プロパティは、ブロックレベル要素またはテーブルセル内のコンテンツの水平方向の配置を設定するために使用されます。例えば、<p> のように新しい行を開始し、ページの幅全体を占める要素などです。
text-alignプロパティの値
「text-align」プロパティでは、以下の値を使用できます。
| 値 | 説明 |
|---|---|
| left | テキストを左側に整列します（デフォルト） |
| right | テキストを右側に整列します |
| center | テキストを中央に整列します |
| justify | テキストの両端が揃うように調整します |
使用例
以下は、「text-align」プロパティを使用してテキストを整列させる例です。
<!DOCTYPE html>
<html>
<head>
<style>
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
.justify-align {
text-align: justify;
}
</style>
</head>
<body>
<p class="left-align">左側に整列されたテキストです。</p>
<p class="right-align">右側に整列されたテキストです。</p>
<p class="center-align">中央に整列されたテキストです。</p>
<p class="justify-align">両端が揃えて配置されたテキストです。両端揃えは、テキストの行末が揃うように、単語間のスペースを調整します。</p>
</body>
</html>
よくある質問
HTMLだけでテキストを整列できますか？
いいえ、HTMLだけではテキストの水平方向の配置を直接制御することはできません。CSSの「text-align」プロパティを使用する必要があります。
text-alignプロパティはインライン要素にも有効ですか？
「text-align」プロパティは、ブロックレベル要素とテーブルセルに対してのみ有効です。インライン要素の配置を制御するには、他のCSSプロパティを使用する必要があります。
text-align: justifyを使用する場合の注意点は？
「text-align: justify」を使用すると、テキストの行末を揃えるために単語間のスペースが調整されます。これにより、一部の行で単語間隔が不自然に広くなる可能性があります。これを防ぐには、ハイフネーションなどのテクニックを使用する必要がある場合があります。