2006年04月29日

画像の回り込み @自由研究

写真や絵を織り交ぜてブログの記事を書くときにやりたくなるのが「回り込み」。回り込みについてプチレクチチャー。
ドコモ提供画像を貼って文章を書くとき、横に1行しか書けないワ
モバQうんうん大きい画像を使ったときに下にしかならないのは格好悪いね!
20051106_144930374.png普通にやるとこのようになっちゃう。普通にやるとこのようになっちゃう。普通にやるとこのようになっちゃう。

ドコモ提供画像の横に書くにはどうすればいいのかしら?
モバQそれはいろいろ方法があるけど、「回り込みを指定する」方法が一般的ではないかな。

20051106_144930374.pngこんな風にできるよこんな風にできるよこんな風にできるよこんな風にできるよ


モバQ回り込みを許可するfloatと、回り込みを解除するclearを使用したんだよ。

<img src="画像のURL" style="float:left;"/>こんな風にできるよ<br style="clear:both;">


ドコモ提供難しいワ。
モバQstyle="○○"はスタイルシートの書き方なんだ。これはタグに追加する感じで書く。ここでは画像タグ<img>、改行タグ<br>に書いたけど、強調の<strong></strong></pre>や<div></div>に書いてはさんでもいいんだよ。

ドコモ提供スタイルシートは難しいワ。float:leftは何なの?
モバQここで、float:leftは、それ以降の文が右に回りこむのを許可しているんだ。
ドコモ提供ふむふむ
モバQそして、ここが重要!clear:bothは右と左の回りこみを解除してるんだ。つまり通常の状態にリセットしている。これが無いとこの記事どころか、ブログ全体で回り込みが有効になってしまって、大変なことになってしまう可能性があるよ!
ドコモ提供きゃー
by stormy | 13:18 | Comment(0) | TrackBack(0)
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。