テニス３６５ スタッフブログ

みなさん、こんにちは。スタッフフジワラです。


今回はテニ子さんからお寄せ頂きました画像の配置に関するご質問にお答えさせて頂きたいと思います。


画像の横にテキストを回りこませる方法ですが、スタイルシートを使ってタグを書く必要があります。


下記にサンプルを用意してみましたので、ご参考になさってください。


各サンプルの下にありますテキストボックスの中身をコピーし、『<ｉｍｇ ～ />』の部分に画像を、『テキスト』の部分に文章を、それぞれ入れれば表示されます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p style="float:left; padding:5px;"><img src="http://staff.blog.tennis365.net/image/sample01.gif" width="150" height="300" border="0" alt="画像サンプル"/></p><strong style="color:#33ccff;font-size:15px;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</strong>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p style="vertical-align:top;"><p style="float:right; padding:5px;"><img src="http://staff.blog.tennis365.net/image/sample01.gif" width="150" height="300" border="0" alt="画像サンプル"/></p><strong style="color:#33ccff;font-size:15px;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</strong></p>

<div style="vertical-align:top;"><div style="float:left;width:100px;"><strong style="color:#33ccff;font-size:15px;">前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト前半テキスト</strong></div><div style="padding:5px;float:left;width:150px;"><img src="http://staff.blog.tennis365.net/image/sample01.gif" width="150" height="300" border="0" alt="画像サンプル"/></div><div style="float:left;width:100px;"><strong style="color:#33ccff;font-size:15px;">後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト後半テキスト</strong></div></div>

こちらのサンプルでは、前半テキスト部分の幅が１００ピクセル、画像部分の幅が１５０ピクセル、後半テキスト部分の幅が１００ピクセルとなっております。
この幅は、ご自分のテキストや画像の幅に応じて、『width:～px;』という部分の数字を変更してください。


また、画像の途中で回り込みを終了させたい場合は、下記のタグをテキストの終わりに入力してください。

<br style="clear:left">



皆様からコメント等でお寄せ頂きましたご質問にお答えできておらず、大変申し訳ございません。


今後、可能な限りお答えしていきたいと思いますので、何かございましたら、ご遠慮なくお問い合わせ下さい。


これからもテニス３６５ブログをよろしくお願い申し上げます。