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

ホームページ作成に必要なスタイルシートのチップスです。
今回は”float”篇。

スポンサーリンク


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

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

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



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


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

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

画像と文章のレイアウト

手順は次の通りです。

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

<div style=”float:left”>

</div>

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

<div style=”float:left”>
商品リンクコード
</div>

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

というのは、

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

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

<div style=”float:left”>
商品リンクコード
</div>

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

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


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


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

<div style=”float:left;margin-right:1em“>
商品リンクコード
</div>

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

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


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


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

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

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

floatの終了合図

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

<br style=”clear:left“/>

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

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

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

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

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


関連コンテンツ

スポンサーリンク

「画像の隣に文章を配置したい」への5件のフィードバック

  1. 初めまして^^tomさんへのコメントでURLが貼れずに。。
    今日やっとできたと。。^^こんなですが これから教えていただきに 通いますので_(._.)_お願いしますです。文字の書き込みにいつも困っていたところでした。これから やってみます^^

  2. 商品画像貼ったとき、真ん中に来ちゃうので
    いらいらしてました。
    めんどくさくて画像貼るのやめてたけど、
    今度やってみます。
    こんな記事もあったのね。Renさんのおかげで気づきました~。
    ありがとうございます!

Ren へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください