スポンサーサイト

--/--/-- --:-- | カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の文字回り込み②

2006/09/04 21:27 | カテゴリ:htmlタグ | コメント (0) | トラックバック (0)

400pxの枠に200pxの画像、こんな時、記事の余白が気になりませんか? そこで、「文字を回り込ませる」という方法が有効です。

②ではfloatを用いた方法です。

回り込みをさせるスタイルに float があります。
こちらは、align の代替となるスタイルシートです。
【floatの特徴】
・良い点
  画像下への回り込みを実現できる
  回り込みの順序を指定できる(文字先・画像後記入 → 画像右・左文字表示)
  tableよりもタグが簡潔になる。
  画像以外も回り込みができる
・悪い点
  複雑な表示をさせるとコードが複雑になる
  解除タグ<br claer="all">の記入漏れによるスタイルくずれ。
 
SEO、ユーザービリティを考えるとfloatがtableよりも優位なようです。

【サンプルコード】
<div style="float:left;">画像タグ</div>
回り込み文章<br clear="all">
left 右に回り込み、right 左に回りこみ
(サンプルは画像を左、回り込み文章を右に表示)
文字との余白を空けたい場合は、margin、paddingを使用。
 ⇒ margin、padding についてはこちら

 ①を見る<< | >>③へ続く
スポンサーサイト

<< 画像の文字回り込み③ | ホーム | 画像の文字回り込み① >>


コメント

コメントの投稿


管理者にだけ表示を許可する

 BLOG TOP 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。