[新着] Webテンプレートを仮オープンしました
imgタグに align="" を追加すると、画像に並ぶ文字の位置を指定できます。
<img src="sample.jpg" align="top">
| align="" | top … （画像横の上部に文字を表示します） |
|---|---|
| middle … （画像横の中央に文字を表示します） | |
| bottom … （画像横の下部に文字を表示します）デフォルト | |
| left … （画像の右側に複数行の文字を表示します） | |
| right … （画像の左側に複数行の文字を表示します） |
※この属性は、HTML4.01では非推奨とされています。
【並ぶ文字の扱いについて】
top、middle、bottomの指定では1行しか並べられないのに対して、left、rightの指定では複数行の文字を並べることができます。
※left、rightを指定する場合は、文字の回り込みを終了させるためのbr clearもご覧ください。
【1行の並びと複数行の違いについて】
例えば、align="top" を指定して画像の右側に文字を並べた場合、brタグを使って改行を入れたり、幅いっぱいのところで自動的に改行が入った場合には、改行された文字は画像の下に表示されます。
（例）
まず画像の右側に文字を入れてみます。
改行された文字はここに表示されます。
align="left" を指定して画像の右側に文字を並べた場合には、改行された文字は右側に置かれたまま表示されます。
（例）
まず画像の右側に文字を入れてみます。
改行された文字はここに表示されます。
この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。
■画像右側の上部に文字を表示する場合
<img src="image/sample.jpg" alt="サンプル" align="top">
右側の上部に文字を表示してみます
▼これをブラウザで見ると次のように表示されます
右側の上部に文字を表示してみます
■画像右側の中央に文字を表示する場合
<img src="image/sample.jpg" alt="サンプル" align="middle">
右側の中央に文字を表示してみます
▼これをブラウザで見ると次のように表示されます
右側の中央に文字を表示してみます
■画像右側の下部に文字を表示する場合
<img src="image/sample.jpg" alt="サンプル" align="bottom">
右側の下部に文字を表示してみます（デフォルト）
▼これをブラウザで見ると次のように表示されます
右側の下部に文字を表示してみます（デフォルト）
■画像の右側に複数行の文字を表示する場合
<img src="image/sample.jpg" alt="サンプル" align="left">
画像を左側に配置して
<br>
右側に文字を
<br>
回り込ませてみます
<br clear="all">
▼これをブラウザで見ると次のように表示されます
画像を左側に配置して
■画像の左側に複数行の文字を表示する場合
<img src="image/sample.jpg" alt="サンプル" align="right">
画像を右側に配置して
<br>
左側に文字を
<br>
回り込ませてみます
<br clear="all">
▼これをブラウザで見ると次のように表示されます
画像を右側に配置して
