1. Home
  2. HTMLタグ
  3. イメージタグ
  4. 画像に並ぶテキストの位置を指定する

画像に並ぶテキストの位置を指定する


<img src="" alt="" align="">


img要素align="" を追加すると、画像に並ぶテキストの位置を指定できます。また、画像をフロートさせることもできます。



<img src="sample.gif" alt="サンプル" align="top">


属性 説明
align="" top 上端揃え
middle 中央揃え
bottom 下端揃え (初期値)
left 左フロート
right 右フロート

上記の属性は、HTML 4.01では非推奨とされています。(Strict DTDでは使用できません)

【画像に並ぶテキストの位置】

topmiddlebottom は、 画像に並ぶテキストの位置(垂直方向)を指定します。

  • top … 画像の上端とテキスト行の上端を揃えます。
  • middle … 画像の中央とテキスト行のベースラインを揃えます。
  • bottom … 画像の下端とテキスト行のベースラインを揃えます。

【フロートの指定】

leftright は、画像のフロート(浮動化)を指定します。

  • left … 画像を左に配置して、後続の内容を右側に回り込ませます。
  • right … 画像を右に配置して、後続の内容を左側に回り込ませます。

フロートを指定する場合は、「回り込みを解除する」もご覧ください。

【並ぶテキストの扱いについて】

  • topmiddlebottom … 画像の横には1行分のテキストが並びます。
  • leftright … 画像の横に複数行のテキストを回り込ませることができます。

[写真] top を指定している場合は、
改行されたテキストは画像の下に続きます。

[写真] left を指定している場合は、
改行されたテキストも画像の横に続きます。

【ベースラインについて】

英文などの場合、例えば xy では下辺の位置が異なります。

[ベースラインの表示例]

x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。

メモ

この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

■画像右側の上部にテキストを表示した例


<p>
<img src="rainbow.jpg" alt="写真" align="top">
右側の上部にテキストを表示します。
</p>

表示例

写真 右側の上部にテキストを表示します。


■画像右側の中央にテキストを表示した例


<p>
<img src="rainbow.jpg" alt="写真" align="middle">
右側の中央にテキストを表示します。
</p>

表示例

写真 右側の中央にテキストを表示します。


■画像右側の下部にテキストを表示した例


<p>
<img src="rainbow.jpg" alt="写真" align="bottom">
右側の下部にテキストを表示します。(デフォルト)
</p>

表示例

写真 右側の下部にテキストを表示します。(デフォルト)


■左フロートを指定した例


<p>
<img src="rainbow.jpg" alt="写真" align="left">
画像を左に配置して、
<br>
右側にテキストを回り込ませます。
<br clear="left">
回り込みを解除しました。
</p>

表示例

写真 画像を左に配置して、
右側にテキストを回り込ませます。
回り込みを解除しました。


■右フロートを指定した例


<p>
<img src="rainbow.jpg" alt="写真" align="right">
画像を右に配置して、
<br>
左側にテキストを回り込ませます。
<br clear="right">
回り込みを解除しました。
</p>

表示例

写真 画像を右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。


イメージタグ

ページの先頭へ