画像を回り込ませる

くまさん右寄せ


imgタグの中に style=（フロート:位置）指定で画像を回り込ませます。
画像（写真）とテキストを横並びに表示する方法としては、テーブル（table）タグを使用することも多いのですが、今回は画像をテキストに回り込ませる方法、floatについて記録しておきます。

画像右移動は
<img src="フォルダ名/ファイル名/画像名.拡張子" alt="表示名" style="float:right"/> です。
くまさんが右側で喜びました。

検索エンジンはalt属性をほとんど評価しないと言われてますが、画像だけでは情報はゼロですのでaltには何かページ（画像）に関連する説明を入れた方がいいでしょう。
リンク画像にした場合にはaltはリンク先の情報として判断されます。


くまさん左寄せ

rightの部分をleftに指定すると。
左側でくまさんが喜びます。



レイアウトが崩れたり、画像が表示されない時は…
画像と画像の縦幅が被っている。
画像のサイズがスタイルシートで指定した枠を超えている。
ぐらいが原因でしょうか。

cssで画像リンクの枠を消すにはcssファイルの全体指定の部分に

img { border-style:none; }

を追記します。

画像タグのalt属性は音声出力等の機能に対応していますがSEO的にも効果があります。
通常の画像貼り付けの場合には貼り付けたページの情報として、リンク画像として貼り付けた場合にはリンク先のページの情報として検索エンジンに認識されますので必ず何らかのキーワードを埋め込むように心掛けます。