画像の隣に文章を配置したい

---

ブログの場合は大抵、画像の配置位置はクリックで選択できますが、場合によって細かい設定をしたい時があります。そんな時は手動で直します。

そこで、今回のお題「画像の隣に文章を配置したい」

普通、手動で画像を配置して続けて文章を書くとこんな感じになります。↓

---

商品説明 ： 魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)

---

これは、ふつうに商品リンクコードを貼り付けて、続けて文章を書いた場合です。
画像が上にあって、その下、左寄せで文章になっています。

ではこれを、画像を左、その右に説明文とするにはどうすればよいのでしょうか？

画像と文章のレイアウト

手順は次の通りです。

その１ 商品リンクコードを貼り付ける前に下のとおり書く。

その2 <div style=”float:left”> と &lt/div&gt の間に商品リンクコードを貼り付ける

<div style=”float:left”>
</div>

というのは、

<div style=”float:left”>から
</div>までは左寄せという意味です。

その３ つづけて文章を書く。

この結果は下のようになります。

---

商品説明 ： 魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)

---

ほぼいい感じですね。でも、画像と文字がくっつきすぎな気がします。
そこで、すこし修正。

これで、下と同じようになればＯＫです。

---

商品説明 ： 魔法少女まどか☆マギカ ねんどろいど 鹿目まどか (ノンスケール ABS&PVC塗装済み可動フィギュア)

---

追加した赤文字の最初の ; は区切りです。
float:leftまでが左に寄れという命令。

margin-right:1emというのが、右側にマージンを１文字分あけて。という命令です。
emというのが単位で２文字開けたければ2emになります。

で、これで終わると、表示してみたときのレイアウトがぐちゃぐちゃになることがあります。
それは、float:leftの終了を指示していないからです。
終了を指示するまで、ずっと左寄せが有効になってレイアウトがメチャメチャになります。

floatの終了合図

上の原稿を打ち終わったら、これを追加してください。

clear:leftをもって、特殊レイアウトの区間は終了と言う意味です。

ただしbrというのは改行ですから、これでは下の空白が１行分余計に出来てしまいます。
見た目に問題がなければ、今回はそれでよしとしておきましょう。

空きすぎだと思うのなら、というか本来はfloat を終了させたい場所からみて一番最初に出てくる開始タグに clear:left を指定しなくてはいけません。そのタグが何になるかは毎回変わるので、ここではわかりません。それで、あえて無意味な改行タグを入れて説明したわけです。

「では、画像を右に、文字を左にしたい場合はどうすればよかですか？」
「いい質問ですね！leftだったところをrightにして、試してみてください！」

ここで、やってもいいんですが、長くなるので、ここまで。ごきげんよう！

---