画像関連

imgの活用〜。
　1.画像を貼る
　2.画像に説明
　3.画像の横に文字
　4.画像サイズを指定
　5.画像に余白
　6.画像に枠
　7.画像でリンク
　8.画像保存禁止(au)

※「画像URL」にはご自分でＵＰした画像のアドレスを入れて下さい。
←HTMLタグ

画像を貼る

きほん。

<img src="画像URL">

画像に説明

alt="代替文字"属性をつける

<img src="画像URL" alt="文字">

画像の読み込み中や画像が表示出来ない時に文字が出ます。

<img src="画像URL" alt="代替文字">

↑

画像の横に文字

alignで回り込み

通常は画像の横に文字を書いても一行しか書けませんが、align="leftかright"を付けると複数行の文字が書けます。
leftで左、rightで右に画像を指定。画像の途中で回り込みをやめたい場合は、<br clear="all">で改行しましょう。

文字
文字
文字
<img src="画像URL" align="指定">

･･･これ、dlタグの中で使っているので携帯では反映しないやも･･(管理人の携帯からは無効です)。
「回り込んでねぇよ！」という方はこちらからご確認下さい〜。
多分、PCでは(ドコモも？)回り込んで見えるのですが、auではここに<hr>とかのブロック要素を入れちゃうとやっぱり回り込みは出来ませんのであしからず。

<img src="画像URL" align="left又はright">　<br clear="all">

↑

画像サイズを指定

サイズを変更したい

拡大 縮小
<img src="画像URL" width="横幅" height="縦幅">

数字か%で指定します。
88px×31pxの場合、width="88" height="31"とサイズ指定しておけば、画像が表示されない時でもレイアウトが崩れません。
※画像の重さは大きくしても小さくしても変わりません。

<img src="画像URL" width="横幅" height="縦幅">

↑

※画像の横に文字

どうでしょう
回り込みましたか？
文字
文字
文字
<img src="画像URL" align="left">

※ちなみに
画像の横に
更に画像。



※ちなみに・２
画像の横に
更に回り込み。
･･これはauでは無効。
落っこちます。

↑