• ベストアンサー

画像の横に回りこみして並べるには?

syagainの回答

  • ベストアンサー
  • syagain
  • ベストアンサー率54% (42/77)
回答No.3

<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <br clear="left"> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> CSS(スタイルシート)でfloat:leftを指定すると、左から順番に詰められます。 *<img>のalignでコメントを回り込みさせる *<div>のfloatで、[画像とコメントの一式]を左寄せに流し込みます。 *一括指定できるならば、そうした方がいいかもしれません。 <head> <style type="text/css"> <!-- div{ float:left; width:◯◯;} --> </style> </head> ※参考URL:floatの仕組み

参考URL:
http://airrat.blog103.fc2.com/blog-entry-392.html
princess00
質問者

お礼

とても参考になりました。 ありがとうございました。

関連するQ&A

  • ホームページで画像を横に並べるには?

    ホームページ作成超初心者です。 初歩的な質問で恐縮です。 ホームページに画像を横に並べて(左→右)表示させたいと思っています。 <img src="画像ファイルのURL"> というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。 ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像を縦に並べてそれぞれの画像の横にコメント

    gooブログを使っています。 一つのタイトルに三枚の画像を縦ならびに載せ それぞれの画像の右側にコメントを入れたいのですが やり方を教えて下さい。 ↓のようにしたいです(■が画像で---がコメント) ■------- ■-------   ■-------   ブログ初心者なので色々調べてやてみたのですが 今のところIMGで画像を三枚載せる事はできたのですが コメントが画像の下に付いてしまってます。 分かりやすく教えていただけたら嬉しいです。 よろしくお願いします。

  • 画像の横にテキスト表示

    <dl> <dt>画像</dt> <dd>テキスト1</dd> <dd>テキスト2</dd> <dd>テキスト3</dd> </dl> 上記のhtmlで画像とテキストの表示をしたく思っております。画像を基準にテキストは全て 画像の右側に表示させたいのですがどのようなcssをかけば実現できるでしょうか? ********** テキスト1 *      * テキスト2 * 画像  * テキスト3 *      * ********** のようなイメージを想定しております。 ddが1つであればfloatで問題ないのですがddが複数ありddのみは縦に続けたいのですが方法がわからず つまずいている状態です。詳しい方いらっしゃいましたら宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 画像に矢印乗せてたら出てくる

    私は自分のサイトを持っており、そこに画像を載せたいのですが、写真などの画像を他の人に保存されたくありません。なので、右クリック禁止やショートカット禁止など、ソースをいじくってみました。 これで一応右クリック等に関しては「禁止」と出るようにはなったのですが、タイトルにありますように矢印を載せてたらしばらくしたらツールバー?のようなものが出てきて、それで保存することが出来てしまいました。これが表示されないようにする方法はあるのでしょうか? 上記のように専門用語もあまり分からないHP制作初心者です。右クリック禁止も独学で見つけてどうにかしましたが、これ以上のことはわかりませんでした。どなたかご教授ください。

  • テーブル内の画像を横並べにしたい

    HTMLテーブルの学習中の初心者です、よろしくお願いいたします。 テーブル内に画像を配置すると縦並びになってしまいます。 これを横並びにしたいのですが、(添付画像参照ください) 同じテーブルの上段には既に列を分けてある1行目があります。 問題の2行目、列を分けてそれぞれのセルに画像を当て横幅を指定 という方法ですと上段の横幅に揃ってしまうのか、幅が大きく広がり過ぎてしまいうまくいきません。 テーブル以外にも方法はあるようなのですが 現在テーブルの学習をしているためテーブルでのやり方を調べています。 初心者ですので解りやすいもっともシンプルなやり方ございましたら ぜひご指導お願いいたします。

  • jQueryで画像を重ねる

    javascript初心者です。 複数の画像を少しずらして重ねて表示させ、下層の画像をクリックするとその画像が一番上に来るようにしたいのですが、そのようなことはjQueryでできるでしょうか?(画像でなくても何でもいいのですが・・・) 選択したものを一番上に表示させれればOKで、移動できる必要はありません。 お詳しい方が居られましたらご教授願います。

  • 画像を横に無限スクロールする件で

    Flash CS4 ActionScript3.0の初心者です。 皆さんの投稿を参考にさせて頂き、自分なりに置き換えて試行錯誤しながら勉強しています。  http://www.freestitch.jp/ 以前、上記のHPで質問された「ページ移動時の表示動作に関する」ご回答は、とても参考になりました。 そこで上記のHPで"ITEM"をクリックすると左から順に画像が配置され左方向に無限スクロールする方法。 次のカテゴリーをクリックすると左から順に閉じていき、新しい画像が左から順に配置され左方向に無限スクロールする方法。 どうか此の2点の方法をご教示頂きますよう宜しくお願い致します。

  • VBA 縦のデータを横にするコード

    VBA初心者です。 縦に複数の顧客が存在して、その顧客の出荷日をセル一つにまとめたいのですが、全くがやり方が わかりません。すいませんが、教えて頂けると幸いです。 【例】 ■シート1    A列   B列 1  番号  出荷日 2  005   2014/5/1 3  001   2014/5/5 4  003   2014/5/23 5  003   2014/5/14 6  001   2014/5/3 7  005   2014/5/8 8  001   2014/5/16 9  001   2014/5/4 ↓↓↓↓↓↓↓↓↓↓ ■シート2    A列   B列 1  001    2014/5/5、2014/5/3、2014/5/16、2014/5/4 2  003    2014/5/23、2014/5/14 3  005    2014/5/1、2014/5/8 上記のように処理することは可能でしょうか。 宜しくお願い致します。

  • Pshop 7 で2枚の画像を横(縦)にして1枚の画像にするにはどうするのでしょうか

    Photoshop 7 で二枚又は複数の画像(写真)を、横もしくは縦に並べて結果1枚の画像(写真)にする にはどうすれば良いのでしょうか、だれかお教え下さいませ。 ちなみに私はパソコン歴6ヶ月の初心者なので、出来ましたら出来るだけ詳しくお教え頂けると幸いです。

  • 画像を横に並べたい

    スタイルシートでマウスオーバーする http://www.auone-net.jp/netguide/hp/mkhp/045/04501.html こちらを参考にCSS等を記述したのですが画像が縦に並んでしまいます。 横に2つ、縦に3列並べたいのですが方法は有りますでしょうか? 是非とも宜しくお願い致します。