タイトル画像
サイトタイトル画像

右・左・中央寄せ

右・左・中央寄せ

「中央寄せ(センタリング)」とは、文章などを表示領域の中央に固めて配置することを言います。

【注意】
「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 属性によって行うことが可能です。

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2002/07/11)