画像の回り込みの文章の位置、または画像の表示位置を指定する

<img align=””>

画像の表示位置(位置揃え)、または画像に対する文字の表示位置(回り込み)を調整するには、IMGタグに「align=””」という属性を追加します。以下のように、5段階の調節が可能です。

画像の位置揃えと
文字の回り込み
記入例 画像と文字の表位置の関係
上揃え <img align=”top”> 画像は左寄せ、文字は画像の右上に1行表示
中央揃え <img align=”midlde”> 画像は左寄せ、文字は画像の右中央から1行表示
下揃え
初期位置はこれ
<img align=”bottom”> 画像は左寄せ、文字は画像の右下に1行表示
左寄せ <img align=”left”> 画像は左寄せ、文字は画像の右上から複数行回り込み
右寄せ <img align=”right”> 画像は右寄せ、文字は画像の左上から複数行回り込み

※画像の回り込みを右寄せ、左寄せに設定しているときは途中で文章の回り込みを解除する方法も併せて参照してください。

記述例

上揃えの例
<img src=”../../logo.gif” align=”top”>
文字は画像に対してこの位置に表示されます。


文字は画像に対してこの位置に表示されます。

中央揃えの例
<img src=”../../logo.gif” align=”middle”>
文字は画像に対してこの位置に表示されます。


文字は画像に対してこの位置に表示されます。

下揃えの例
<img src=”../../logo.gif” align=”bottom”>
文字は画像に対してこの位置に表示されます。


文字は画像に対してこの位置に表示されます。

左寄せの例
<img src=”../../logo.gif” align=”left”>
文字は画像に対してこの位置に表示されます。 上揃えとの違いを良く理解しましょう。


文字は画像に対してこの位置に表示されます。上揃えとの違いを良く理解しましょう。

右寄せの例
<img src=”../../logo.gif” align=”right”>
文字は画像に対してこの位置に表示されます。 上揃えとの違いを良く理解しましょう。


文字は画像に対してこの位置に表示されます。上揃えとの違いを良く理解しましょう

HTML5ではimgタグのalign属性は廃止されました。上下方向はCSSの「vertical-align」プロパティ左右方向の回り込みは「float」プロパティで指定することが推奨されます。

また、これ以外の画像に関するタグの指定方法や注意点は以下の関連情報を参考にしてください。

関連情報

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!