Home
HTML&CSS Web制作のインデックス
-各種リファレンスとサンプルコード集-

<< Home / ケータイ index / イメージタグ / 画像に並ぶ文字の位置を指定する
Mobile Index

<IMG SRC="" ALIGN="">
画像に並ぶ文字の位置を指定する


対応機種

IMGタグALIGN="" を追加すると、画像に並ぶ文字の位置を指定できます。


<IMG SRC="sample.gif" ALIGN="top">


ALIGN="" に使える指定
ALIGN="top" 画像右側の上部に文字を表示する
ALIGN="middle" 画像右側の中央に文字を表示する
ALIGN="bottom" 画像右側の下部に文字を表示する
ALIGN="left" 画像右側に文字を表示する(複数行)
ALIGN="right" 画像左側に文字を表示する(複数行)

※何も指定しない場合はbottomが適用されます。


【並べる文字の扱いについて】

topmiddlebottomの指定では1行しか並べられないのに対して、leftrightの指定では複数行の文字を並べることができます。

leftrightを指定する場合には、回り込みを終了させるためのBR CLEARタグもご覧ください。


【1行の並びと複数行の違いについて】

例えば、ALIGN="top" を指定して画像の右側に文字を並べた場合、BRタグを使って改行を入れたり、幅いっぱいのところで自動的に改行が入った場合には、改行された文字は画像の下に表示されます。

(例)
まず画像の右側に文字を入れてみます。
改行された文字はここに表示されます。


ALIGN="left" を指定して画像の右側に文字を並べた場合には、改行された文字はそのまま画像の右側にて表示されることになります。

(例)
まず画像の右側に文字を入れてみます。
改行された文字はここに表示されます。

【使用例】

上中下のサンプル
<BR>
<IMG SRC="bickri.gif" ALIGN="top">上部
<BR>
<BR>
<IMG SRC="bickri.gif" ALIGN="middle">中央
<BR>
<BR>
<IMG SRC="bickri.gif" ALIGN="bottom">下部

サンプル画面
上中下のサンプル
上部

中央

下部

【使用例】

上中下のサンプル
<BR>
<IMG SRC="bickri.png" ALIGN="top">上部
<BR>
<BR>
<IMG SRC="bickri.png" ALIGN="middle">中央
<BR>
<BR>
<IMG SRC="bickri.png" ALIGN="bottom">下部

サンプル画面
上中下のサンプル
上部

中央

下部

【使用例】

左右のサンプル
<BR>
<IMG SRC="bickri.gif" ALIGN="left">画像の右側に文字の回り込み
<BR CLEAR="all">
<BR>
<IMG SRC="bickri.gif" ALIGN="right">画像の左側に文字の回り込み

サンプル画面
左右のサンプル
画像の右側に文字の回り込み

画像の左側に文字の回り込み

【使用例】

左右のサンプル
<BR>
<IMG SRC="bickri.png" ALIGN="left">画像の右側に文字の回り込み
<BR CLEAR>
<BR>
<IMG SRC="bickri.png" ALIGN="right">画像の左側に文字の回り込み

サンプル画面
左右のサンプル
画像の右側に文字の回り込み

画像の左側に文字の回り込み

使用例のサンプル画面は、携帯電話での表示を想定したおおまかなイメージです。実際とは多少異なる場合があります。

<< 前のページにもどる


<< Home / ケータイ index / イメージタグ / 画像に並ぶ文字の位置を指定する Page Top