スポンサーサイト

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

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

画像の文字回り込み③

2006/09/05 23:38 | カテゴリ:htmlタグ | コメント (0) | トラックバック (0)

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

③はスタイルシートを用いた一括指定の方法です。

表示する画像全てに回り込みを指定する方法があります。
スタイルシートをうまく設定するとタグの簡潔化・管理の便利さがあります。
【一括指定の特徴】
・良い点
  タグが簡潔化になる
  タグの書き込みの手間が省ける
・悪い点
  複雑な表示ができない
  解除タグ<:br claer="all">の記入漏れによるスタイルくずれ。
 
SEOとしてはこの方法が一番優位そうです。
指定ブロックの画像タグだけ適用する方法もあります。

【サンプルコード】
スタイルシート
  img { float:left; }

本文部分はそのまま記入
left 右に回り込み、right 左に回りこみ
指定ブロックのみに適用する場合は、スタイルシートコードの前方にclass属性などを与えることで実現できます。
(例) .ali img { float:left; }
クラス名 ali の中にある画像のみfloatを適用。(詳細は専門書籍・サイトで)
文字との余白を空けたい場合は、margin、paddingを使用。
 ⇒ margin、padding についてはこちら

 >>②を見る

追加コンテンツ:HTML応用編 文字の回り込み

スポンサーサイト

<< SEOにも必要 ページ情報タグ | ホーム | 画像の文字回り込み② >>


コメント

コメントの投稿


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

 BLOG TOP 

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