画像を並べて配置したい

質問

ページの一番下に、ある画像を連続して並べて表示したいのですが、
その様にする方法は有るのでしょうか？
いろんな本を見たりしたのですが、見つからないんです。
教えて下さい。

回答No.3

starflora · ベストアンサー

画像のサイズが分かっているなら、（例えば、高さ１００ピクセル、幅１２０ピクセルなら）、height と width を指定すれば、正規の大きさで表示されます。その場合、横幅が合計して、画面の幅に一致しないと、左右に開きができるでしょう。幅１２０ピクセルで、横幅８００ピクセルの画面だと、７枚は入りません。６枚入って、左右に開きができるか、または左右は端にして、画像のあいだにスペースを造って均等に並べるかです。（以下だと、左右に隙間ができます。<td width=130> などとして、また、<img src=""……align=left ……）などとして、位置や大きさを調整します。具体的に、どういう大きさの画像なのかによって、数字を工夫しなければなりません。画像サイズが分かっていれば、それに応じた近似的なスクリプトを書けますが、分からない段階では、一般的な話にしかなりません。画像をきっちりと１００％で並べるのは、画像の大きさにより、無理だというのは分かりますね？　どこかに隙間を造って、それらしく並べる必要があるのです。それは、テーブル・タグについて学んで、それらしく並ぶように調整してください）。

<table border=0 width="100%" align=center><tr>
<td width="16%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
<td width="17%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
<td width="17%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
<td width="17%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
<td width="17%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
<td width="16%"><img src="abc1.jpg" border=0 width="120" height=100 align=center></td>
</tr></table>

　　なお、背景として表示することもできます。次のようにします（色々な方法があります）：

<table border="0" width=100% height=100 align=center background="abc.jpg"><tr>
<td>　</td>
</tr></table>

お礼

テーブルの背景にすればよかったんですね！これで思ってた通りに並べることが出来ました。
背景じゃないと、おっしゃる通り100％で並べるのは無理ですね。
ありがとうございました。

回答No.8

usawing

>ただ、画面が大きく出来る方（解像度の大きい方）はページ自体の内容が少なかっ>た場合、下のほうに余白が見えてしまわないかと思ったのです。。。
そういうことでしたら、<TABLE>タグにスタイルシートで位置を指定するというのはどうでしょうか？
<DIV STYLE="position:relative; top:80%;">
<TABLE>中略</TABLE>
</DIV>
な感じで。
top:80%の部分で、上から８０％の位置にテーブルを置くと言う指示になります。
下からいくつと言う指定は出来ませんので、完全に一番下というのは難しいかもしれませんが、ある程度は可能かなぁと思いますので……

お礼

また教えて頂いてありがとうございました。
このスタイルシートも使ってみたいと思います！
ある程度問題が解決しました★

回答No.7

usawing

横レス失礼致します。

>でも、一番下に配置する方法が分かりません。画面の一番下にではなくて、そのペ>ージの一番下にしたいのです。
>背景にすると上に文字や画像が重なってしまいます。それを避けたいので、テーブ>ルという形で表示するのがとても良いのですが…。
>常に背景のように画面上に見えなくても良いんです。あくまでそのページの最下部>に表示したいのです。
>（早く言えば並べた画像より下へ行けなくしたいのです。）
ソースの最後にそのテーブルタグをおけば問題ないと思いますが。
<TABLE>中略（イメージ）</TABLE></BODY></HTML>
と言う風に。
もし、coolなどのページの下に広告が挿入されるサーバーでしたら無理ですが…

お礼

そうですね。一番下にすれば、とりあえずは大丈夫そうです。
ただ、画面が大きく出来る方（解像度の大きい方）はページ自体の内容が少なかった場合、下のほうに余白が見えてしまわないかと思ったのです。。。
やっぱり背景にしちゃうか、その方法が一番いいんでしょうね。
どうもありがとうございました！！

回答No.6

starflora

＞ koro5 さん

　　>> テーブルのタグは知ってるんですが、これだと絵が伸びてしまうんですよね。
　　>> 同じ大きさのままで並べる方法ってないんでしょうかね…？

　　実は、この「延びる」のは、わたしがスクリプトをあわてて書き間違えたためです。

<table border=0 width="100%" align=center>
<tr><td><img src="abc1.jpg" border=0 width="25%" align=center></td>
<td><img src="abc2.jpg" border=0 width="50%" align=center></td>
<td><img src="abc3.jpg" border=0 width="25%" align=center></td>
</tr></table>

　　これだと、イメージの幅、つまり width を 25%, 59% などと指定しているのです。正しくは <td> のなかで幅指定するのです。また align=center も<td> のなかで指定するのです：

<table border=0 width="100%" align=center>
<tr><td width="25%" align=center><img src="abc1.jpg" border=0></td>
<td width="50%" align=center><img src="abc1.jpg" border=0></td>
<td width="25%" align=center><img src="abc1.jpg" border=0></td>
</tr></table>

　　これで延びないはずです。どうも申し訳ありません。

お礼

伸びませんでした（＾－＾
わざわざ補足して頂いてありがとうございました！
気付かなかった私もいけませんでしたね…；
まだまだ勉強不足です。

補足

皆さんのアドバイスのお陰で思い通りに絵を並べる事が出来るようになりました。
でも、一番下に配置する方法が分かりません。画面の一番下にではなくて、そのページの一番下にしたいのです。
背景にすると上に文字や画像が重なってしまいます。それを避けたいので、テーブルという形で表示するのがとても良いのですが…。
常に背景のように画面上に見えなくても良いんです。あくまでそのページの最下部に表示したいのです。（早く言えば並べた画像より下へ行けなくしたいのです。）
ワガママだとは思うのですが、知っていらっしゃる方いましたら教えて頂きたいです。
そんな方法は存在しないとか、私には無理とかいうのでしたら、その旨も教えて頂きたいです。
宜しくお願い致します<( _ _ )>

回答No.5

usawing

画面の一番下に並べるだけでいいのでしたら（右端が切れたりしてもいいのなら）、スタイルシートを使って背景にする方法もあります。
その場合は、ヘッダーに以下のタグを入れてください。

<STYLE TYPE="text/css">
BODY {
background: url(u.gif) repeat-x 0% bottom;
background-attachment: fixed;
}
</STYLE>

ちなみに、NN4,0だとこれじゃダメだったかもしれないです…

お礼

スタイルで背景にするのは良い方法ですね。
でも、上に文字などを重ねたくないんです。（－＿－；わがままですみません。
背景だと画面を小さくした時に、上に重なってしまうので…。
NN4.0だとだめなんですか！初めて知りました。
ありがとうございました。

回答No.4

shiba1

こんにちは、「一番下に」というのが、ちょっと掴めません。

ビッシリ繰り返し並べるということですか？
一番下にぴったり。という意味でしょうか？
それともスクロールしても常に一番下に表示。ということですか？

■隙間なくビッシリ並べるのであれば、

繰り返し、同じ画像を並べる（パターンの壁紙のように使う）のであれば、
「starflora」さんの回答にもあるように、
tableの背景に使うのが一番イイと思います。
背景に使った場合は、
オリジナルのサイズで繰り返し表示されます。
当然、繰り返しで表示されるので、ちょんぎれます。
ちょんぎれさせたくないのであれば、widthを画像の幅の整数倍にすれば何とかなります。
heightを画像の高さの整数倍にすれば、２列、３列とかできますね。

<table width="画像の幅×整数" height="画像の高さ" cellpadding="0" cellspacing="0" border="0" background="画像" align="center">
<tr>
<td><br></td>
</tr>
</table>

のようにcellpadding,cellspacingを「0」にしておいた方がいいです。
tableだけではなく、tdにbackgroundも指定できますよ。。

■下と左右ピッタリにしたい・・・だったら。。

上下左右には、少しマージンがあるので、100%でもピッタリになりません。
ピッタリにしたいのであれば、
<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
にしておく必要があります。
これで、width="100%"にすればピッタリ行きます。

■もしかしてスクロールしても一番下という意味だったら。

フレームでページを上下に割って、
下の部分に読み込むページの背景を
並べたい画像にすればよいのでは、。。

<html>
<head>
<title></title>
</head>
<frameset rows="*,画像の高さ" frameborder="0" framespacing="0" border="0">
<frame src=".html" name="main" scrolling="auto" noresize>
<frame src=".html" name="gazou" scrolling="no" noresize>
</frameset>
</html>

============================================
長々と失礼しました。ちょっと見当違いかも。。

お礼

色々な方法を教えて頂きありがとうございました。
下と左右をピッタリにするのは
<STYLE type="text/css">
<!--
body{margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;}
-->
</STYLE>
っていうスタイルしか知らなかったので、違う方法が分かって良かったです！
一番下に表示させたい理由は、上に文字や絵が重なるのがいやだからなんです。
それを避けるにはフレームを使うのも一つの手ですね。

回答No.2

starflora

タグを次のように書いてください。

<img src="abc1.jpg" border=0 align="left"><img src="abc2.jpg" border=0 align=left><img src="abc3.jpg" border=0 align=left>

　　これだと少しうまくいかないことがあります。
　　わたしは普通、テーブルを使います。

<table border=0 width="100%" align=center>
<tr><td><img src="abc1.jpg" border=0></td>
<td><img src="abc2.jpg" border=0></td>
<td><img src="abc3.jpg" border=0></td>
</tr></table>

　　これは、幅１００％のテーブルですが、この値を、８０％とか、６０％などにすることで、画像の配置を色々と調整できます。
　　また、もっと微調整したい場合は

<table border=0 width="100%" align=center>
<tr><td><img src="abc1.jpg" border=0 width="25%" align=center></td>
<td><img src="abc2.jpg" border=0 width="50%" align=center></td>
<td><img src="abc3.jpg" border=0 width="25%" align=center></td>
</tr></table>

　　などにして、<td>で指定される、セルの大きさを指定すると、色々に配置できます。table タグの使い方を学ぶと、或る程度自由な位置に画像を配置できるようになります。（<td>のなかの widthの％の値は、合計１００％にならなければなりません。また、width は、ピクセルでも指定できます。単に数字を入れるとピクセル指定です）。

お礼

テーブルのタグは知ってるんですが、これだと絵が伸びてしまうんですよね。
同じ大きさのままで並べる方法ってないんでしょうかね…？
早い回答ありがとうございました！

補足

すいません、説明不足でした。
複数の画像ではなくて、一種類の画像なんです。それを横100％に一列に並べたいのです。
あと、絵の様なものなので、絵が伸びてしまわないような方法をお願いします。

回答No.1

Rikos

テーブルを作成して、そのセルの中に表示したい画像を入れて、テーブルの罫線を消してしまえば出来ます。

こんな答えで、いいのでしょうか？

お礼

テーブルを使うと限られた数しか表示できないんですよね；
でも、ありがとうございました。