XHTML/CSS・トップ | CSSプロパティ・目次

●一般画像を位置揃えする

 背景画像ではない一般の画像を左揃え、中央揃え、右揃えする方法を解説します。基本的にはテキストの「行揃えを指定する」と同じです。即ち、"text-align"プロパティを使います。厳密には"text-align"プロパティはブロック要素内のインライン要素(通常はテキスト)に対して左右の位置揃えを指定するプロパティです。"text-align"プロパティの値は子要素に継承しますから、インライン要素である img要素の親要素に class属性を指定し、スタイルシート(CSS)のほうで"text-align"プロパティの位置揃えを指定する方法で解説します。まずは以下の2枚の写真を見比べてください。

p要素に対して、センタリング

div要素に対して、センタリング

【CSS】

.venus1 {
 text-align: left;
}
.venus2 {
 text-align: center;
}
.venus3 {
 text-align: right;
} 

【HTML】

<p class="venus2"><img src="flr021.jpg" width="240" height="160" border="0" alt="p要素に対して、センタリング"></p>

<div class="venus2"><img src="flr021.jpg" width="240" height="160" border="0" alt="div要素に対して、センタリング"></div>

【解説】

 写真は同じ画像を使っていますが、センタリング(中央揃え)にずれがあるのはここのWebページの p要素に対して、CSSのほうで左右のマージン(margin-left: 5%; margin-right: 30%;)を指定しているためです。対して、div要素には左右のマージンを指定していませんのでページ全体の中央にセンタリングされています。画像をどのように位置揃えさせるか、どの指定方法を使うかは作者が勘案しますが、ご自身のサイトのWebページで楽に使える方法を選択してください。ここではvenus2のクラス名を使って、解説していますがvenus3を指定すれば右揃えとなります。それ以外の左右の位置揃えさせる方法として margin(マージン)プロパティを指定した組み合わせがあります。また、これ以外の方法もありますので【ポイント】欄の項目を参照にしてください。

【ポイント】

※クラス名のvenus1〜3はページ作者が任意の名前を付けます。(数字を先頭に使えないなど条件があります。)

※HTMLの img要素にclass属性を指定し、CSSのほうで"text-align"プロパティを使った位置揃えを指定することも可能です。

※HTMLの img要素に align属性を指定することもできますが、align属性はHTML 4.01とXHTML 1.0 の Transitional DTDまたはFrameset DTDでのみ使用できます。指定できる値は"top""middle""bottom""left""right"です。(center不可)

※p要素、div要素に対して、align属性はHTML 4.01とXHTML 1.0 の Transitional DTDまたはFrameset DTDでのみ使えます。言い方を変えると、HTML(XHTML)文書におけるalign属性は"col""colgroup""tbody""td""tfoot""th""thead""tr"など表関係の要素を除く、すべての要素に対して、XHTML1.0 Strict DTD、XHTML1.1 DTDで使用することができませんのでご注意ください。

XHTML1.0 Strict、XHTML1.1 DTDにおける悪い例↓

<p align="left"><img src="flr021.jpg" width="240" height="160" border="0" alt="p要素に対して、センタリング"></p>

※center要素はHTML 4.01とXHTML 1.0 の Transitional DTDまたはFrameset DTDでのみ使えますが、こちらは非推奨要素です。使用は避けてください。

悪い例↓

<center>
<div><img src="flr021.jpg" width="240" height="160" border="0" alt="div要素も img要素に対してもセンタリング"></div>
</center>

※img要素のborder属性および、 hspace(画像左右の空間)もHTML 4.01とXHTML 1.0 の Transitional DTDまたはFrameset DTDのみでしか使えません。(ボーダー(border)の太さ、画像まわりの空間(margin)はCSSのほうで指定してください。)

※簡単に使いたいと割り切れば、Transitional DTDの場合、作成ソフトの位置揃えのツールボタンを使い(align属性使用)、それ以外のDTDではCSSのほうで位置揃えするしかありません。

※XHTMLにおける画像への左右の位置揃えについては、このWebページのページソースも参照にしてください。

※一般の画像の左右どちらかにテキストを回り込ませたい場合、または画像を回り込ませたい場合は、floatプロパティを使った「画像の左右にテキストを回り込ませる 」をご参照ください。座標を指定して配置したい場合はpositionプロパティの値に absoluteを組み合わせた方法(「絶対配置・相対配置・固定配置」ご参照)がありますが、テキストが回り込む場合であれば前記のfloatプロパティを使った方法を推奨します。なお、背景画像関連は「背景」プロパティの解説を参考にしてください。

※インライン要素に対して、上下にずらす方法は"vertical-align"プロパティを使った「テキストを上下にずらす」をご参照ください。

XHTML/CSS・目次 | 通常画像・目次

Copyright (C) 2006 http://www.xml.vc/