右・左・中央寄せ HTML、CSS
HTMLを使った右・左・中央寄せ
「中央寄せ（センタリング）」とは、文章などを表示領域の中央に固めて配置することを言います。
【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「HTML5」ではこのページで説明している次の要素は廃止されました。
| 要素 | 説明 |
|---|---|
| center | 要素の左右中央揃え |
center 要素 と align 属性
「中央寄せ」には、center 要素 と align 属性を利用する方法があります。
center 要素は、中央寄せをしたいテキストや表を<center>～</center>で囲むだけす。
<center>中央寄せ</center>
align 属性は、周囲との関係における当該要素の水平配置を指定します。可能な値は次の4つです。
| align 属性の値 | 説明 |
|---|---|
| left | テキストは左揃えでレンダリングされる |
| center | テキストは中央揃えでレンダリングされる |
| right | テキストは右揃えでレンダリングされる |
| justify | テキストは左右マージンに揃えられる |
標準では、日本語環境では align = "left" ですが、右から左のテキスト環境では、align = "right" となっています。
実際に、これらを利用した例をみてみましょう。
ファイル名：center.html
<html><head><title>右・左・中央寄せ</title></head><body><center>中央寄せ</center><div align="center">中央寄せ</div><div align="right">右寄せ</div><div align="left">左寄せ</div></body></html>
div 要素は、文書に構造を付加するための一般機構を提供するものです。
現在では、center 要素は、div 要素でalign属性を"center"に設定することと全く等価であり、center 要素は推奨されていません。
また、「右寄せ」「左寄せ」可能な要素は存在しないため、div 要素を利用することをお勧めします。
なお、表（table 要素）、画像（img 要素）、段落（p 要素）など、まとまった塊をキャンバスに配置することも、align 属性によって行うことが可能です。
CSSを使った右・左・中央寄せ
スタイルシートを使うと次のように記述できます。
<div style="text-align : center">中央寄せ</div>
それぞれの記述方法は次のとおりです。
<html><head><title>右・左・中央寄せ</title></head><body><div style="text-align : center">中央寄せ</div><div style="text-align : right">右寄せ</div><div style="text-align : left">左寄せ</div></body></html>
スポンサードリンク
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
