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

右・左・中央寄せ

スポンサードリンク

右・左・中央寄せ

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

【注意】
「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等の学習に役立つ書籍を紹介します。

始めるための基礎知識

タグを覚えよう(非推奨タグ含む)

入門者を卒業した方へ

HTML5を覚えよう

スタイルシートを覚えよう

アクセス数増加、収入を得る仕組み

サイト運営にあたって

HTML 以外も知っておこう

スクリプト・プログラム言語も知ろう

リファレンス

付録

このページの人気コンテンツ

    全ページの人気コンテンツ

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