もっとおしゃれにAmeba Ameba HTML タグ入門 #02 画像配置 文字の周辺配置
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />このコードに続けて文字を打つ・・・・
このコードに続けて文字を打つと、左側に文字が表示されていきます。もう少し画像との間隔をとりたいということであれば、style="margin: 5px 10px 15px 20px; は上、右、下、左の時計回り順番なので<img style="margin: 5px 30px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />とすると画像との感覚が広がります。・・・・
とすると画像との感覚が広がります。左の空いているのが気持ち悪ければ、<img style="margin: 5px 30px 15px 0px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />左の空きがなくなります
左の空きがなくなります<img style="margin: 5px 30px 15px 0px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />このままだらだらと文章を書くと自然と文書が画像のまわりを回り込みます。だらだら~~・・・
このままだらだらと文章を書くと自然と文書が画像のまわりを回り込みます。だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~<img style="margin: 5px 30px 15px 0px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />強制的に回り込みを解除して次に進みたいときは、<br clear="all">と書くと、回り込みが解除されます。だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~<br clear="all">だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~
強制的に回り込みを解除して次に進みたいときは、<br clear="all">と書くと、回り込みが解除されます。だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~
<img style="margin: 5px 0px 15px 30px; display: inline" align="right" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />強制的に回り込みを解除して次に進みたいときは、<br clear="all">と書くと、回り込みが解除されます。だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~<br clear="all">だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~
強制的に回り込みを解除して次に進みたいときは、<br clear="all">と書くと、回り込みが解除されます。だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~だらだら~~
もっとおしゃれにAmeba Ameba HTML タグ入門 #01 画像配置 水平位置編
画像表示の最も単純なコードです。
<img src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" />
<タグ>は、ここから呪文コードの開始の合図。
</タグ>は、終わりの合図。
一文で完結するものは、<タグ/>と書きます。
img は、image ですよね。
src は、何の略かわからないけれど、画像の置き場と画像ファイル名です。
こう言う文字は、""で括ってあげます。

絵の大きさそのままですから、はみ出ちゃいます。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
この画像データは上のものと一緒ですが、画像の大きさ、余白、近くの文字の回り込みのさせかたを設定しています。
高さを同じように、50% に指定すると、よくわかんないサイズになります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="" height="50%" />

サイズのパーセント指定は、width="" だけしか、使えないと思っときましょう。100%にすると、テキストエリアの幅ピッタリになります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="100%" height="" />

margin: 5px 10px 15px 20px; の部分は画像の外側の余白指定です。上、右、下、左の時計回りでの指定です。
margin: 5px; と一個だけ指定したら、4辺ともおなじ余白になります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="right" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
align="left"を、align="right"とすると画像が右に表示されます。
<img style="margin: 5px 10px 15px 20px; display: inline" align="center" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
Amebaでは、align="center" は、horizontalとして機能しないようです。
verticalとして機能しているようです。
<center><img style="margin: 5px 10px 15px 20px; display: inline" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" /></center>

苦し紛れの処理では、こいつが機能します。でも、文字は、下の行に追い出されてしまいます。
周りの文字の処理は次回に紹介しますね。
src="画像url" の画像urlには、ネット上の画像のurlを入力すれば、表示されます。
Amebaのロゴを拝借するとこういう感じ。
<img src="http://stat.ameba.jp/common_style/img/ucs/common/logo_ameba.gif"/>

画像urlは、ウェブ上の画像右クリックで、コマンドが出ます。
引用した場合は、引用符やリンクをはっておきましょう。
<blockquote><a href="http://www.ameba.jp/" target="_blank"><img src="http://stat.ameba.jp/common_style/img/ucs/common/logo_ameba.gif"/></a></blockquote>
<img src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" />
<タグ>は、ここから呪文コードの開始の合図。
</タグ>は、終わりの合図。
一文で完結するものは、<タグ/>と書きます。
img は、image ですよね。
src は、何の略かわからないけれど、画像の置き場と画像ファイル名です。
こう言う文字は、""で括ってあげます。

絵の大きさそのままですから、はみ出ちゃいます。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
この画像データは上のものと一緒ですが、画像の大きさ、余白、近くの文字の回り込みのさせかたを設定しています。高さを同じように、50% に指定すると、よくわかんないサイズになります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="" height="50%" />

サイズのパーセント指定は、width="" だけしか、使えないと思っときましょう。100%にすると、テキストエリアの幅ピッタリになります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="left" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="100%" height="" />

margin: 5px 10px 15px 20px; の部分は画像の外側の余白指定です。上、右、下、左の時計回りでの指定です。
margin: 5px; と一個だけ指定したら、4辺ともおなじ余白になります。
<img style="margin: 5px 10px 15px 20px; display: inline" align="right" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
align="left"を、align="right"とすると画像が右に表示されます。<img style="margin: 5px 10px 15px 20px; display: inline" align="center" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" />
Amebaでは、align="center" は、horizontalとして機能しないようです。verticalとして機能しているようです。
<center><img style="margin: 5px 10px 15px 20px; display: inline" src="http://stat.ameba.jp/user_images/20110515/20/ichamaru/3d/4d/j/o0800051311230115755.jpg" width="50%" height="" /></center>

周りの文字の処理は次回に紹介しますね。
src="画像url" の画像urlには、ネット上の画像のurlを入力すれば、表示されます。
Amebaのロゴを拝借するとこういう感じ。
<img src="http://stat.ameba.jp/common_style/img/ucs/common/logo_ameba.gif"/>

画像urlは、ウェブ上の画像右クリックで、コマンドが出ます。
引用した場合は、引用符やリンクをはっておきましょう。
<blockquote><a href="http://www.ameba.jp/" target="_blank"><img src="http://stat.ameba.jp/common_style/img/ucs/common/logo_ameba.gif"/></a></blockquote>

