• ベストアンサー

イメージ周りのレイアウトがうまくいきません

お世話になります。 イメージの右側にコメントの文章を載せたいのですが、イメージに回り込んだり、イメージの下に配置してしまったりとうまく行きません。 http://www.hotpegasus.com/test/test.html 私のイメージの画像を貼りますのでアドバイスをお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

floatについて考えていきます。 今のところfloatを指定する時には一緒にwidthを指定することが定石になっています。 ブラウザごとの挙動を理解せずにfloat単体で使うのは難しいと思います。 見たところfloatが必要なのは.imglefatだけで、他のfloatは全て必要ありません。 floatは後続する要素の配置に影響は出ますが、それより前にある要素には影響がありません。 なので.commentにfloatを指定しても、一段改行された後に配置されてしまいます。 さらにfloatをを指定された要素は通常の配置方法とは別の法則で配置されます。 そして、通常の配置の中で、その高さは無いものとして考えられてしまいます。 つまり今のソースは.commentが右に寄っているが高さが0なので下のボックスにかぶっているという状態です。 前のほうにも書いていますが、floatはそれ自身より前にある要素には影響が出ません。 なので.imglefatにfloatを指定してしまえばいいのです。(余白の取り方などは後に書きます) それだけで.comment内の文章は自然と右によってくれます。 ここで一つやっておかないといけないことがあります。 floatは特殊な配置方法なので、それを終えるためにclearというプロパティが用意されています。 これを使わないと文章が少ないときに.imglefatが次の.commentに重なってしまうことがあります。 ただし、clearはfloatを指定した兄弟要素に指定しなくてはならないので.commentの次にある要素に指定しなくてはいけません。 今回の場合それがないので、特殊な対処法を利用します。 .entryにoverflow:hidden;を指定してください。一番簡単な対処法です。 これを指定すれば文章が少なくてもはみ出さないはずです。 いままでで基本的に大まかなレイアウトは出来ていると思うのですが、細かい部分でちょっとテクニックが必要になってきます。 floatを指定した.imglefatにはwidthも一緒に指定しなくてはいけません。 ですが、widthを指定した要素にはpaddingを一緒に指定しないほうがレイアウトの崩れを起こしにくいのです。 現状ではpadding利用されているのでこれにひっかかってしまいます。 そこでwidthには画像の幅を指定し、paddingの代わりにmarginを使ってください。 そして一緒にdisplay:inline;を指定してください。 floatした要素にmarginを指定する時はdisplay:inline;を一緒に指定するとブラウザごとの表示の差を吸収してくれます。 これで画像の右のようなレイアウトになっていると思います。

nkmyr
質問者

お礼

細かなアドバイスをありがとうございました。 width指定することで解決出来ました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • htmlでの画像とコメントのレイアウト

    初心者で申し訳ありません。 よろしくお願いします。 htmlでの記述で、左側に画像、画像の右側にコメントを書きたいと思っています。 下のようなイメージになります。 自分なりに調べてみたのですが、なかなかできないでいます。 よろしくお願いします。 ******** ********コメント ********コメント *画像***コメント ********コメント ********

  • HTML:区画のレイアウトについて

    HTMLで区画のレイアウトをするとき、通常基本的なものから複雑なものまで、<table>や<div>を使うのが一般的なんでしょうか? 下の図は、■が境界線で、□が画像や文章を配置する区画です。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■ ■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■ ■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■ ■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■ ■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 連続で印刷すると画像が更新されない(Excelのイメージコントロール)

    いつもお世話になります。 エクセルのイメージコントロールを使用しているのですが、 なかなかうまく行かないので、アドバイスをお願いします。 シートにイメージコントロールをいくつか(8個)配置しました。 マクロで LoadPicture を使用し画像を読み込ませました。 Rangeで範囲を指定して印刷しました。 一旦、Sheet1.Image1.Picture = Nothing と開放しました。 そのイメージコントロールに別画像を LoadPicture させました。 同様に印刷させましたが、画像は最初に読み込ませたもののままです。 マクロが終了して見ると、最新の画像に更新されているのですが、 印刷したものでは(プリビューでも)更新されません。 Redraw させたり Refresh させるコマンドはないかと思いましたが見つかりません。 同じマクロで画像のコメントをセルに表示させているのですが、 こちにはどんどん更新しています。 画像だけが、最初に読み込んだ画像のままで印刷されてしまいます。 印刷範囲は常に同じです。 原因なり対処法なりをお教え下さいますようお願いします。

  • ホームページのレイアウトが上手く出来ません

    お世話になります。ブログを開いているのですが、画像と文字のレイアウトが、したいように上手くできません。 画像を2個横に並べて、そのさらに横に文字を配置したいのですが。画像を■で表すと、このような感じです。↓ ■■文字 テーブルを使ってやってみると、文字が何故か大きくなってしまって、フォントサイズを小さくしてみても小さくならず。 画像を2個ともにalign="left"を加えてみたら、配置は一応なったのですが、綺麗に揃わずガタガタになってしまいます。 何かいい方法があれば教えていただけないでしょうか。よろしくお願いいたします。

  • 部屋のレイアウト

    この間取りの部屋に、冷蔵庫、レンジ台、テレビ、机、ベッド、デスクを置くとしたら、どのように配置するのが良いでしょうか? 今の配置がしっくり来なく、模様替えをしたいのですが、どのように配置したらいいか分かりません。 文章で書いて頂いても構いませんし、画像に書いて頂いても構いません。 ご回答宜しくお願い致します。

  • イメージズームを大きくしたい

    カテゴリ違いだったらすいません。 某サイトを参考に、こんな感じで画像がズームするようにしてみました。 http://kinnosuzuki.gouketu.com/sample.html 下に並んでいる小さい画像をクリックすると、左上に画像が少し拡大して表示され、更にその画像にマウスを合わせると右側に拡大して表示されるようになっています。 左上の画像に合わせた時、画像の一部がグレーになるのですが(拡大して右に表示される部分) これを大きくしたい(右側に表示される範囲を大きくしたいという事です)のですが、どのようにしたら良いのかわかりません。 この範囲を大きくするにはどうしたら良いのでしょうか??? どなたかご教授ください。お願いします。 具体的にどの部分の数字を・・・とか教えていただけると助かります。

  • pictureboxのイメージ出力処理で

    VB.NETを使用しています。 Form上にpicturebox1~picturebox10まで配置しています。 下記の関数の引数aにきた値により1~10のどのpictureboxに画像を出力するか処理をわける方法をどなたかアドバイスお願いします。 現在はselect文を使用して処理しています。 for文などでまとめることはできませんでしょうか? Private Sub Test(ByVal a As String) ※この中でaに1がくるとpiturebox1.Image = 画像 aに10がくるとpicturebox10.image = 画像 という処理をしたい。 このように→picturebox & "a" & ".image" = 画像 End Sub 宜しくお願いします。

  • CSSでイメージ配置について

    こんにちわ。 同じ <div></div> 内に二つのイメージ画像を別々のルールーで配置したいのですがどのようにしたら良いのかわかりません。 (1)のイメージにはfloat: left; (2)のイメージにはfloat: right; としたいのですがどのようにしたらいいのかアドバイスください。 ちなみにCSSはすべて外部リンクになっています。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • このレイアウトを組むには?

    サイズの異なる正方形バナーを下記の画像のように配置したいのですが、 上手くいきません。 2列構成にしないといけないのでしょうか? アドバイス頂ければ幸いです。 宜しくお願い致します。

    • 締切済み
    • CSS
  • ホームページのレイアウトが崩れてしまいます。

    初心者がHPを作っているのですが、このページhttp://medakahonpo.com/で看板画像の下の枠内のすべてがネットスケープナビゲーターで見ると飛び出してしまいます。どこを直せばいいのだかまったくわかりません。賢い方、アドバイスいただけましたら幸いです。

このQ&Aのポイント
  • タブレットのWi-Fiが試しても繋がらず、原因が分からない状況です。
  • スマホやパソコンはWi-Fiに接続できるが、タブレットだけが繋がらないです。
  • ヨドバシカメラのWi-Fiには繋がるので、タブレット自体に問題がある可能性があります。
回答を見る