画像の横に文字を並べたい時は、align属性を使います。
align属性といえば、以前少しだけ書きましたが、それをイメージタグに使うのですね。
HTMLの基本構造について。HTMLタグとは? 中央寄せ等のalign属性の話も少し。
基本構造
<img src=" " title=" " alt=" " align=" ">
src属性:画像へのパス。どこにあるのか指定する。
title属性:画像やリンク先のタイトル。カーソルを合わせると表示される文字もコレ。
alt属性: 代替テキスト。画像が表示されない場合に代わりに表示される文字。読み上げ機能で読み上げるのもココ。検索エンジンもこの属性で何の画像か判断。
ブログサービスでは、写真投稿の設定で、
srcやtitle、altは自動的に反映してくれるものが多いですよね。
align属性を設定する・画像の横に一行入力する
画像の右側上端に一行分
上端
align属性は "top"
<img src=" " title=" " alt=" " align="top"> 上端
※改行したら、自動的に画像の下に文字が表示されます。
上端。この次に改行すると…
自動的に下に記載。
画像の右側中央に一行分
中央
align属性は "middle"
<img src=" " title=" " alt=" " align="middle"> 中央
画像の右側下端に一行分
下端
align属性は "bottom"
<img src=" " title=" " alt=" " align="bottom"> 下端
align属性を設定する・画像の横に回り込む形で入力する
left指定で画像が左。文字は回り込み指定。
改行したらそのまま画像の横に。
画像の縦より多いこの行は画像の下に自動的に表示。
align属性は "left"
<img src=" " title=" " alt=" " align="left"> left指定で…
right指定で画像が右。文字は回り込み指定。
align属性は "right"
<img src=" " title=" " alt=" " align="right"> right指定で…
回り込み設定で、途中から解除したい場合
この後の行から文字を画像の下に記載したい時は、、
改行を重ねてもいいけど、、
<br clear="left"> で画像の下に記載されるようになります。
いわゆる回り込み解除ですね。
<p><img src=" " title=" " alt=" " align="left"> この行のあとから…時は、、</p>
<p>改行を重ねてもいいけど</p>
<br clear="left">…で画像の下に記載されるようになります。
<p>いわゆる回り込み解除ですね。</p>
ちなみに、今回 br タグを使っていますが、
同じ方法では、pタグでは反映されませんでした。
別の方法があるのかもしれませんが…(*´з`)
それでは今回はこのへんで。(*'▽')/