WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:画像の特殊な並べ方

0:[投稿] とんび [2007/03/16 16:00 ] [環境:WinXP 不明]

●背景説明

imgタグを二つ連続して、これを一定の幅のDivブロックの中央に配置しました。

┌──────────┐
│          │
│          │
│          │
│          │┌──┐
│          ││  │
│          ││  │
└──────────┘└──┘
      コメント


このときのHTMLコードは以下の通りです。

<p align="center">
<img width="400" height="300"  src="xxx1.jpg" >
<img width="160" height="120"  src="xxx2.jpg" >
<br>
コメント
</p>

●質問

さて今度は、次のように小さな画像を右に二つ縦に並べたいのですが。HTMLのコードをどのように書いたらいいでしょうか。二つの小さい画像の大きさは同じです。

┌──────────┐┌──┐
│          ││  │
│          ││  │
│          │└──┘
│          │┌──┐
│          ││  │
│          ││  │
└──────────┘└──┘
      コメント


1:[質問] とんび [2007/03/16 16:09 ]

質問者のとんびです。

質問の説明図のスペースが縮んでしまい、よく分からなくなってしまったので文字で説明します。

背景説明の方の図は、大きい画像の右に小さい画像が続いています。両方合わせてセンタリングされています。

質問の方の画像は、大きい画像の右に小さい画像が上下に二つ配置します。結果として、全体の幅は上記の背景説明の場合と同じになります。このように画像を配置するためのHTMLの書き方を教えて欲しいのです。

よろしくお願いします。


2:[質問] とんび [2007/03/16 16:21 ]

質問者のとんびです。

質問の説明図が崩れないように修正しました。
もう一度質問を投稿します。同じ内容を何度も読むことになり、もうしわけありません。

●背景説明

imgタグを二つ連続して、これを一定の幅のDivブロックの中央に配置しました。

┌──────────┐
│・・・・・・・・・・│
│・・・・・・・・・・│
│・・・・・・・・・・│
│・・・・・・・・・・│┌──┐
│・・・・・・・・・・││・・│
│・・・・・・・・・・││・・│
└──────────┘└──┘
        コメント


このときのHTMLコードは以下の通りです。

<p align="center">
<img width="400" height="300"  src="xxx1.jpg" >
<img width="160" height="120"  src="xxx2.jpg" >
<br>
コメント
</p>

●質問

さて今度は、次のように小さな画像を右に二つ縦に並べたいのですが。HTMLのコードをどのように書いたらいいでしょうか。二つの小さい画像の大きさは同じです。

┌──────────┐┌──┐
│・・・・・・・・・・││・・│
│・・・・・・・・・・││・・│
│・・・・・・・・・・│└──┘
│・・・・・・・・・・│┌──┐
│・・・・・・・・・・││・・│
│・・・・・・・・・・││・・│
└──────────┘└──┘
         コメント


3:[回答]   [2007/03/16 16:32 ]

特殊ですかね?
tableをあえて使わない理由は何ですか?


4:[回答] とんび [2007/03/16 17:41 ]

不定個数のいくつものトピックを縦に列挙します。

トピック毎に大画像1の場合、大画像1+小画像1の場合、大画像1+小画像2の場合があります。これを全てセンタリングしたいです。

少なくも、大画像1と、大画像1+小画像1の場合はtableを使うようよりもはるかに簡単にできたと思います。小画像2になるのは例外的な場合ですので、このときに限って少し複雑になっても、それ以外の場合の単純さを保ちたいというのが希望です。


5:[質問] とんび [2007/03/16 19:29 ]

すみませんね。結局説明図は、崩れてしまっているんですね。
図中の中黒を全角にしてみてください。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]