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

このQ&Aに関連する最新のQ&A

A 回答 (8件)

 


  画像のサイズが分かっているなら、(例えば、高さ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>
 
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/12 23:05

>ただ、画面が大きく出来る方(解像度の大きい方)はページ自体の内容が少なかっ>た場合、下のほうに余白が見えてしまわないかと思ったのです。

。。
そういうことでしたら、<TABLE>タグにスタイルシートで位置を指定するというのはどうでしょうか?
<DIV STYLE="position:relative; top:80%;">
<TABLE>中略</TABLE>
</DIV>
な感じで。
top:80%の部分で、上から80%の位置にテーブルを置くと言う指示になります。
下からいくつと言う指定は出来ませんので、完全に一番下というのは難しいかもしれませんが、ある程度は可能かなぁと思いますので……
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/15 15:36

横レス失礼致します。



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

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

お礼日時:2001/11/14 01:04

 


  > 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>
 
  これで延びないはずです。どうも申し訳ありません。
 

この回答への補足

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

補足日時:2001/11/12 23:38
    • good
    • 0
この回答へのお礼

伸びませんでした(^-^
わざわざ補足して頂いてありがとうございました!
気付かなかった私もいけませんでしたね…;
まだまだ勉強不足です。

お礼日時:2001/11/12 23:37

画面の一番下に並べるだけでいいのでしたら(右端が切れたりしてもいいのなら)、スタイルシートを使って背景にする方法もあります。


その場合は、ヘッダーに以下のタグを入れてください。

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

ちなみに、NN4,0だとこれじゃダメだったかもしれないです…
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/12 23:29

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



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

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

繰り返し、同じ画像を並べる(パターンの壁紙のように使う)のであれば、
「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>

============================================
長々と失礼しました。ちょっと見当違いかも。。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/12 23:23

 


  タグを次のように書いてください。
 
<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 は、ピクセルでも指定できます。単に数字を入れるとピクセル指定です)。
 

この回答への補足

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

補足日時:2001/11/12 02:12
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/12 02:33

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



こんな答えで、いいのでしょうか?
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/11/12 02:26

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QCSSを使い、ページの一番下に文字列を表示する方法

CSSを使い、ページの一番下に文字列を表示する方法

過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。
よろしければ教えてください。

外部のCSSファイルに

.comment {
position : absolute;bottom:5px;
font-size:11px;
color: black;
width: 740px;
}

と書き込み、
HTML内で

<div class="comment">一番下に表示したい文字</div>

としました。

すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。
必ずページの一番下に表示するにはどうすれば良いでしょうか。
(JavaScriptとテーブルを使わない方法でお願いします)

よろしくお願いします。

Aベストアンサー

ページの一番下とはbody要素ですか?
もしbodyの子に全体をくくるdivがあるなら、そのdivにposition:relativeを追加してみてください。

Qをページの一番下に配置するには

こんにちは。

CSSでサイトを作成しているのですが、ページの最後に著作権情報を入れたいのです。
ただ入れるなら最後に<adress>を挿入するだけなのでできるのですが、ページサイズを指定した場合ページの一番下に入れることができません。
abusoluteでいろいろ試しましたがどうもうまくいきません。

(例)
ページサイズ800pxで統一しています。
しかし内容が400pxしかない為<adress>を最後に入れると400pxのところで挿入になります。

これを常に800pxのところで表示させたいのです。
もっと言えば仮にサイズが900pxになったとしても自動的に最後になるようにできますか?

わかりにくい説明ですがお願いします。

Aベストアンサー

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>himajin</title>
</head>
<body>
<div style="height:800px;">
<!-- body要素内のaddress要素以外をdivで挟んでCSSを使う。なお、外部CSSを作ってmeta要素でインポートするのが面倒なのでstyle属性で許してね-->
<p>あいうえお</p>
</div>
<address>****@****.com</address>


</body>
</html>

とかやったら普通に出来ましたが...Firefox 1.6a1 [2005111403]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>himajin</title>
</head>
<body>
<div style="height:800px;">
<!-- body要素内のaddress要素以外をdivで挟んでCSSを使う。なお、外部CSSを作ってmeta要素でインポートするのが面倒なのでstyle属性で許してね-->
<p>あいうえ...続きを読む

Q3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示される

3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示されるようになりました

色々試しているのですが、全く解決しません

どなたか助けてください

MT4.2を使っています

よろしくお願いします!

Aベストアンサー

構造がおかしい。

本来は、alpha /本文/、beta /左サイドバー/、gamma /右サイド
バー/、が並列に並んでいるはずが、gammaがbetaの中に含まれてい
る。一番簡単なのは、betaの閉じタグを書き忘れる方法かな。

その影響なのか、header、content、footerが常識的には並列にな
るはずが、footerがcontentの中に含まれてる。なんとか-innerな
んて文書構造的に意味のないボックスが多いから、閉じタグを数え
間違ってるのかもしれないですね。古代のIEを切り捨てて、もっと
シンプルに書くようにすれば勝手に解決するかも。

Qcss 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには?

お世話になります。
タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。
なにかいい方法がないか、ご教授いただけると幸いです。

尚、テーブルは使わない方法でお願いします。
以下が途中までのソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#h100 {
height:100%;
background-color:#eeeeee;
}
div#header {
background-color:black;
color:white;
}
div#container {
background-color:#ffffee;
}
div#footer {
background-color:black;
color:white;
}
-->
</style>
</head>
<body>
<div id="h100">
<div id="header">ヘッダー</div>
<div id="container">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

お世話になります。
タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。
なにかいい方法がないか、ご教授いただけると幸いです。

尚、テーブルは使わない方法でお願いします。
以下が途中までのソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
...続きを読む

Aベストアンサー

これでいいかと。
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#h100 {
position:relative; top:0; left:0 ;
height:100%;
background-color:#eeeeee;
}
div#header {
background-color:black;
color:white;
}
div#container {
background-color:#ffffee;
}
div#footer {
position:absolute; bottom:0px; left:0px ;width:100%;
background-color:black;
color:white;
}
-->
</style>

Q上フレームページと下フレームページが共にページのTOP(一番上)の位置

上フレームページと下フレームページが共にページのTOP(一番上)の位置が見えるよなリンクの仕方を教えてください。

HTML初心者です。上下2つに分けたフレームページを作っています。
下フレームページの下の方の位置のリンクボタンをクリックすると上フレームページが見えなくなってしまいます。また下フレームページも下の方の位置へリンクしてしまいます。

下フレームページのどの場所のリンクボタンをクリックしても常に
上フレームページと下フレームページが共にページのTOP(一番上)の位置が見えるよなリンクの仕方をご教授ください。初心者ですのでなるべく簡単で具体的なHTMLの書き方を教えてください。
どうぞよろしくお願い致します。

Aベストアンサー

意味がよくわかりませんが、とりあえずjavascriptを使って

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<tytle>Test</tytle>
<script type="text/javascript">
function movetop(f){
f.contentWindow.scrollTo(0,0);
}
</script>
</head>
<frameset rows="50%,*" frameborder="yes" border="1" framespcing="0">
<frame src="/ue.html" onload="movetop(this);" id="ue" name="ue">
<frame src="/shita.html" onload="movetop(this);" id="shita" name="shita">
</frameset>
</html>

意味がよくわかりませんが、とりあえずjavascriptを使って

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<tytle>Test</tytle>
<script type="text/javascript">
function movetop(f){
f.contentWindow.scrollTo(0,0);
}
</script>
</head>
<frameset rows="50%,*" frameborder="yes" borde...続きを読む


人気Q&Aランキング

おすすめ情報