CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

   当サイトはアフィリエイト広告を利用しています

画像の横に文字を並べたい時の対処法

画像の横に文字を並べたい時は、align属性を使います。

align属性といえば、以前少しだけ書きましたが、それをイメージタグに使うのですね。

HTMLの基本構造について。HTMLタグとは? 中央寄せ等のalign属性の話も少し。

 

 

基本構造

 

<img src=" " title=" " alt=" " align=" "

 

src属性:画像へのパス。どこにあるのか指定する。 

title属性:画像やリンク先のタイトル。カーソルを合わせると表示される文字もコレ。

alt属性: 代替テキスト。画像が表示されない場合に代わりに表示される文字。読み上げ機能で読み上げるのもココ。検索エンジンもこの属性で何の画像か判断。

 

ブログサービスでは、写真投稿の設定で、

srcやtitle、altは自動的に反映してくれるものが多いですよね。

 

align属性を設定する・画像の横に一行入力する

画像の右側上端に一行分

f:id:mikanusagi:20180922234248p:plain 上端

align属性は "top"

<img src=" " title=" " alt=" " align="top"> 上端

 

※改行したら、自動的に画像の下に文字が表示されます。

f:id:mikanusagi:20180922234248p:plain 上端。この次に改行すると…

自動的に下に記載。

  

画像の右側中央に一行分

f:id:mikanusagi:20180922234248p:plain 中央

align属性は "middle"

<img src=" " title=" " alt=" " align="middle"> 中央

 

画像の右側下端に一行分

f:id:mikanusagi:20180922234248p:plain 下端

align属性は "bottom"

<img src=" " title=" " alt=" " align="bottom"> 下端

 

align属性を設定する・画像の横に回り込む形で入力する

f:id:mikanusagi:20180922234248p:plain left指定で画像が左。文字は回り込み指定。

 改行したらそのまま画像の横に。

画像の縦より多いこの行は画像の下に自動的に表示。

align属性は "left"

 <img src=" " title=" " alt=" " align="left"> left指定で…

 

f:id:mikanusagi:20180922234248p:plainright指定で画像が右。文字は回り込み指定。

 

align属性は "right"

 <img src=" " title=" " alt=" " align="right"> right指定で…

 

回り込み設定で、途中から解除したい場合

f:id:mikanusagi:20180922234248p:plain この後の行から文字を画像の下に記載したい時は、、

 改行を重ねてもいいけど、、


<br clear="left"> で画像の下に記載されるようになります。

いわゆる回り込み解除ですね。

<p><img src=" " title=" " alt=" " align="left"> この行のあとから…時は、、</p>

<p>改行を重ねてもいいけど</p>

<br clear="left">…で画像の下に記載されるようになります。

<p>いわゆる回り込み解除ですね。</p>

 

 

ちなみに、今回 br タグを使っていますが、

同じ方法では、pタグでは反映されませんでした。 

別の方法があるのかもしれませんが…(*´з`)

 

 

それでは今回はこのへんで。(*'▽')/