HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> HTMLタグ辞典 >> 画像(イメージ)タグ >> 画像の回り込みの文章の位置、または画像の表示位置を指定する

画像(イメージ)タグ

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

<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">
文字は画像に対してこの位置に表示されます。 上揃えとの違いを良く理解しましょう。
文字は画像に対してこの位置に表示されます。上揃えとの違いを良く理解しましょう。

☆ワンポイントアドバイス

この画像の回り込みの指定は、スタイルシートでも設定が可能です。これ以外の画像に関するタグの指定方法や注意点は以下の関連情報を参考にしてください。

→関連情報

参考

タグをコピーするには?

操作方法

→マウスでフォーム内に書かれたタグをクリックするとタグがハイライトするので、マウスの右クリックでコピーするか、キーボードの[Ctrl]+[C]を押すと、コンピュータのメモリに記憶されます。後は任意の場所に貼り付けてください。