mixiチェック
ホームページやブログを作成している時に、画像を横並びにしたい、画像の横に文字を書きたい事もあると思います。
通常の方法だと画像の横には、文字を書けません。
写真の横に文字が書きたいんだけど、何度やっても下にしか書けなくて、悩んでいた方ももう大丈夫です。
そんな時に役立つタグを紹介します。
HTMLタグの説明
上記の属性は、HTML4.01では非推奨とされています。
【画像に並ぶテキストの位置】
「top」、「middle」、「bottom」は、 画像に並ぶテキストの位置（垂直方向）を指定します。
top、画像の上端とテキスト行の上端を揃えます。
middle、画像の中央とテキスト行のベースラインを揃えます。
bottom、画像の下端とテキスト行のベースラインを揃えます。
【フロートの指定】
「left」と「right」は、画像のフロート（浮動化）を指定します。
left、画像を左に配置して、後続の内容を右側に回り込ませます。
right、画像を右に配置して、後続の内容を左側に回り込ませます。
【並ぶテキストの扱いについて】
top、middle、bottom、画像の横には1行分のテキストが並びます。
left、right、画像の横に複数行のテキストを回り込ませる事が出来ます。
ベースラインについて
英文などの場合、例えば「x」と「y」では下辺の位置が異なります。
「x」のように、下側にはみ出ていない文字の下辺ラインをベースラインと言います。
※日本語の場合はベースラインは存在しません。
写真の右横に文字を配置するタグ
「
画像を左に配置して、
右側にテキストを回り込ませます。
」
＜写真の右横に文字を配置するタグ＞
「
<p>
<img src="gazo.gif" alt="画像" align="left">
画像を左に配置して、
右側にテキストを回り込ませます。
</p>
」
写真の右横に文字を配置するタグ(回り込みを解除)
「
画像を左に配置して、
右側にテキストを回り込ませます。
回り込みを解除しました。
」
＜写真の右横に文字を配置するタグ＞
「
<p>
<img src="gazo.gif" alt="画像" align="left">
画像を左に配置して、
右側にテキストを回り込ませます。
<br clear="left">
回り込みを解除しました。
</p>
」
写真の左横に文字を配置するタグ
「
画像を右に配置して、
左側にテキストを回り込ませます。
」
＜写真の左横に文字を配置するタグ＞
「
<p>
<img src="gazo.gif" alt="画像" align="right">
画像を右に配置して、
左側にテキストを回り込ませます。
</p>
」
写真の左横に文字を配置するタグ(回り込みを解除)
「
画像を右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。
」
＜写真の左横に文字を配置するタグ＞
「
<p>
<img src="gazo.gif" alt="画像" align="right">
画像を右に配置して、
左側にテキストを回り込ませます。
<br clear="right">
回り込みを解除しました。
</p>
」
口コミ評価評判感想
ブログでは普通に、画像を横並びに配置する事が出来ます。
また、ブログの環境の影響でtop、middle、bottomの設定も上手く表示されませんでした。
企画倒れのネタになってしまいました・・・。
