配置のコントロール/HTML基礎講座

Home | 目次 | Prev | 配置 | Next

コンテンツを右や左、あるいは中央に配置することは時として必要に迫られます。配置は見栄えの記述になりますので、やはりスタイルシートが不可欠です。当サイトでも、いろんなページで配置のコントロールをスタイルシートで記述しています。

■ 廃止予定の要素と属性

HTMLでは、<center> ～ </center> という要素はこの範囲で囲まれたコンテンツはすべてセンタリングできる便利なものです。

また、align属性も同様に利用できました。　(例： <div align="center">)

現在、HTML4.01ではこれらの要素及び属性は非推奨とされ、廃止が予定されています。今後はスタイルシートに置き換えて設定することが推奨されています。

ただし、文書型宣言の Transitional では、今のところまだ使用が可能ですが、廃止が決定されている以上いつまでも古い手法でコントロールするわけには行きません。

■ スタイルシートで設定するセンタリング

スタイルシート (Cascading Style Sheet) では、コンテンツを中央揃えにする場合、ブロックレベル要素に位置指定を設定します。

 p { text-align: center }

このように設定することで、指定された要素内にある文字や静止画像などのコンテンツを中央に配置することができます。ただし、この設定はインラインレベル要素には適用されませんので、扱いに注意してください。

基本的に HTMLで記述するすべてのコンテンツは、「ブロックレベル要素内に置く」ということを覚えてください。

■ 余白を上手に利用する

例えばこのページ。左右に余白を設定して全体のバランスをとっています。一番上のアンカーは右寄せにしています。一番下のアンカーの記述は中央に配置してあります。これらはスタイルシートで記述しています。たったこれだけでも、全体が見やすいページになっていると思います。余白を上手に利用することでコンテンツの位置を決められるということを覚えてください。

 CSSの記述
   div.link { margin-right: 50px; text-align: right }

 HTMLの記述
  <body>
  <div class="link">
  <a href="index.html">Home</a>
  </div>

  </body>

このようにして、このページの一番上のリンクを記述しました。余白を利用することで、任意の位置にコンテンツを配置させることができます。つまり、

←----------　余白（ margin ） ----------→ コンテンツ ←---　余白　---→

こうすることで、コンテンツを自由に配置できます。スタイルシートの面白いところでもあります。

位置を設定できるスタイルシートのキーワードは、

 margin      コンテンツの外側の余白の設定
 padding     コンテンツの内側の余白の設定
 text-align  文字列の位置の指定　right left center

  基本的にすべての要素で設定が可能です。

初版公開日 2002年8月30日最新更新日 2004年3月7日

■ 配置のコントロール