OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

画像を並べて配置したい

  • すぐに回答を!
  • 質問No.167124
  • 閲覧数882
  • ありがとう数9
  • 気になる数0
  • 回答数8
  • コメント数0

お礼率 92% (175/189)

ページの一番下に、ある画像を連続して並べて表示したいのですが、
その様にする方法は有るのでしょうか?
いろんな本を見たりしたのですが、見つからないんです。
教えて下さい。
通報する
  • 回答数8
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.3
レベル13

ベストアンサー率 61% (647/1050)

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

お礼率 92% (175/189)

テーブルの背景にすればよかったんですね!これで思ってた通りに並べることが出来ました。
背景じゃないと、おっしゃる通り100%で並べるのは無理ですね。
ありがとうございました。
投稿日時 - 2001-11-12 23:05:35
-PR-
-PR-

その他の回答 (全7件)

  • 回答No.2
レベル13

ベストアンサー率 61% (647/1050)

    タグを次のように書いてください。   <img src="abc1.jpg" border=0 align="left"><img src="abc2.jpg" border=0 align=left><img src="abc3.jpg" border=0 align=left&g ...続きを読む
 
  タグを次のように書いてください。
 
<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>
 
  これは、幅100%のテーブルですが、この値を、80%とか、60%などにすることで、画像の配置を色々と調整できます。
  また、もっと微調整したい場合は
 
<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の%の値は、合計100%にならなければなりません。また、width は、ピクセルでも指定できます。単に数字を入れるとピクセル指定です)。
 
補足コメント
koro5

お礼率 92% (175/189)

すいません、説明不足でした。
複数の画像ではなくて、一種類の画像なんです。それを横100%に一列に並べたいのです。
あと、絵の様なものなので、絵が伸びてしまわないような方法をお願いします。
投稿日時 - 2001-11-12 02:12:29
お礼コメント
koro5

お礼率 92% (175/189)

テーブルのタグは知ってるんですが、これだと絵が伸びてしまうんですよね。
同じ大きさのままで並べる方法ってないんでしょうかね…?
早い回答ありがとうございました!
投稿日時 - 2001-11-12 02:33:52


  • 回答No.1
レベル14

ベストアンサー率 50% (5405/10617)

テーブルを作成して、そのセルの中に表示したい画像を入れて、テーブルの罫線を消してしまえば出来ます。 こんな答えで、いいのでしょうか? ...続きを読む
テーブルを作成して、そのセルの中に表示したい画像を入れて、テーブルの罫線を消してしまえば出来ます。

こんな答えで、いいのでしょうか?
お礼コメント
koro5

お礼率 92% (175/189)

テーブルを使うと限られた数しか表示できないんですよね;
でも、ありがとうございました。
投稿日時 - 2001-11-12 02:26:18
  • 回答No.4
レベル7

ベストアンサー率 41% (10/24)

こんにちは、「一番下に」というのが、ちょっと掴めません。 ビッシリ繰り返し並べるということですか? 一番下にぴったり。という意味でしょうか? それともスクロールしても常に一番下に表示。ということですか? ■隙間なくビッシリ並べるのであれば、 繰り返し、同じ画像を並べる(パターンの壁紙のように使う)のであれば、 「starflora」さんの回答にもあるように、 tableの背景に使 ...続きを読む
こんにちは、「一番下に」というのが、ちょっと掴めません。

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

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

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

<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>

============================================
長々と失礼しました。ちょっと見当違いかも。。
お礼コメント
koro5

お礼率 92% (175/189)

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

ベストアンサー率 31% (76/239)

画面の一番下に並べるだけでいいのでしたら(右端が切れたりしてもいいのなら)、スタイルシートを使って背景にする方法もあります。 その場合は、ヘッダーに以下のタグを入れてください。 <STYLE TYPE="text/css"> BODY { background: url(u.gif) repeat-x 0% bottom; background-att ...続きを読む
画面の一番下に並べるだけでいいのでしたら(右端が切れたりしてもいいのなら)、スタイルシートを使って背景にする方法もあります。
その場合は、ヘッダーに以下のタグを入れてください。

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

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

お礼率 92% (175/189)

スタイルで背景にするのは良い方法ですね。
でも、上に文字などを重ねたくないんです。(-_-;わがままですみません。
背景だと画面を小さくした時に、上に重なってしまうので…。
NN4.0だとだめなんですか!初めて知りました。
ありがとうございました。
投稿日時 - 2001-11-12 23:29:46
  • 回答No.7
レベル11

ベストアンサー率 31% (76/239)

横レス失礼致します。 >でも、一番下に配置する方法が分かりません。画面の一番下にではなくて、そのペ>ージの一番下にしたいのです。 >背景にすると上に文字や画像が重なってしまいます。それを避けたいので、テーブ>ルという形で表示するのがとても良いのですが…。 >常に背景のように画面上に見えなくても良いんです。あくまでそのページの最下部>に表示したいのです。 ...続きを読む
横レス失礼致します。

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

お礼率 92% (175/189)

そうですね。一番下にすれば、とりあえずは大丈夫そうです。
ただ、画面が大きく出来る方(解像度の大きい方)はページ自体の内容が少なかった場合、下のほうに余白が見えてしまわないかと思ったのです。。。
やっぱり背景にしちゃうか、その方法が一番いいんでしょうね。
どうもありがとうございました!!
投稿日時 - 2001-11-14 01:04:58
  • 回答No.6
レベル13

ベストアンサー率 61% (647/1050)

    > koro5 さん     >> テーブルのタグは知ってるんですが、これだと絵が伸びてしまうんですよね。   >> 同じ大きさのままで並べる方法ってないんでしょうかね…?     実は、この「延びる」のは、わたしがスクリプトをあわてて書き間違えたためです。   <table border=0 width="100%" align ...続きを読む
 
  > 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>
 
  これで延びないはずです。どうも申し訳ありません。
 
補足コメント
koro5

お礼率 92% (175/189)

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

お礼率 92% (175/189)

伸びませんでした(^-^
わざわざ補足して頂いてありがとうございました!
気付かなかった私もいけませんでしたね…;
まだまだ勉強不足です。
投稿日時 - 2001-11-12 23:37:32
  • 回答No.8
レベル11

ベストアンサー率 31% (76/239)

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

お礼率 92% (175/189)

また教えて頂いてありがとうございました。
このスタイルシートも使ってみたいと思います!
ある程度問題が解決しました★
投稿日時 - 2001-11-15 15:36:41
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ