画像を見やすくするブログでスタイルシート
トップ > ブログでスタイルシート
注意事項
現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ(BRタグ)が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。 画像を左にに寄せる
まずは、最も基本的な使い方です。 サンプルHTML
<div style="float:left"><img src="..." alt="..."></div>日本最大級ショッピングサイト!お買い物なら楽天市場<div style="clear:left"></div>
これだとイメージと文字がくっついて見栄えがよくありません。 サンプルHTML
<div style="float:left;margin-right:5px"><img src="..." alt="..."></div>日本最大級ショッピングサイト!お買い物なら楽天市場<div style="clear:left"></div>
画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。 サンプルHTML
<div style="float:left;margin-right:5px;text-align:center;font-size:small"><img src="..." alt="...">
アフィリエイトで ポイントを貯めよう</div>日本最大級ショッピングサイト! お買い物なら楽天市場 楽天スーパーポイントを使って 賢くショッピング<div style="clear:left"></div> 画像を右に寄せる
よく見るとわかると思いますが、「画像を左に寄せる」からleftをrightにrightをleftに変えただけです。 サンプルHTML
<div style="float:right"><img src="..." alt="..."></div>日本最大級ショッピングサイト!お買い物なら楽天市場<br style="clear:right">
右の場合、文字がぴったりこないので、隙間がなくても大丈夫ですが、 サンプルHTML
<div style="float:right;margin-left:5px"><img src="..." alt="..."></div>日本最大級ショッピングサイト!お買い物なら楽天市場<br style="clear:right">
画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。 サンプルHTML
<div style="float:right;margin-left:5px;text-align:center;font-size:small"><img src="..." alt="...">
アフィリエイトで ポイントを貯めよう</div><div style="line-height:1.5">日本最大級ショッピングサイト! お買い物なら楽天市場 楽天スーパーポイントを使って 賢くショッピング</div><div style="clear:right"></div> ワンポイント
スタイルに書かれているfloat:leftとfloat:right、clear:leftとclear:rightですが、floatとclearが表示上どのようになるのかをちゃんと理解するには、スタイルシートについて深く理解する必要があります。
ここでは、画像を位置を変えるスタイルシートでしたが、IMGタグの部分を変えると同じようにレイアウトされます。 [PR]
Copyright© 2006 finky. All Rights Reserved.
ジャンル別一覧
人気のクチコミテーマ
|