No.3ベストアンサー
- 回答日時:
画像のサイズが分かっているなら、(例えば、高さ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>
テーブルの背景にすればよかったんですね!これで思ってた通りに並べることが出来ました。
背景じゃないと、おっしゃる通り100%で並べるのは無理ですね。
ありがとうございました。
No.8
- 回答日時:
>ただ、画面が大きく出来る方(解像度の大きい方)はページ自体の内容が少なかっ>た場合、下のほうに余白が見えてしまわないかと思ったのです。
。。そういうことでしたら、<TABLE>タグにスタイルシートで位置を指定するというのはどうでしょうか?
<DIV STYLE="position:relative; top:80%;">
<TABLE>中略</TABLE>
</DIV>
な感じで。
top:80%の部分で、上から80%の位置にテーブルを置くと言う指示になります。
下からいくつと言う指定は出来ませんので、完全に一番下というのは難しいかもしれませんが、ある程度は可能かなぁと思いますので……
No.7
- 回答日時:
横レス失礼致します。
>でも、一番下に配置する方法が分かりません。画面の一番下にではなくて、そのペ>ージの一番下にしたいのです。
>背景にすると上に文字や画像が重なってしまいます。それを避けたいので、テーブ>ルという形で表示するのがとても良いのですが…。
>常に背景のように画面上に見えなくても良いんです。あくまでそのページの最下部>に表示したいのです。
>(早く言えば並べた画像より下へ行けなくしたいのです。)
ソースの最後にそのテーブルタグをおけば問題ないと思いますが。
<TABLE>中略(イメージ)</TABLE></BODY></HTML>
と言う風に。
もし、coolなどのページの下に広告が挿入されるサーバーでしたら無理ですが…
そうですね。一番下にすれば、とりあえずは大丈夫そうです。
ただ、画面が大きく出来る方(解像度の大きい方)はページ自体の内容が少なかった場合、下のほうに余白が見えてしまわないかと思ったのです。。。
やっぱり背景にしちゃうか、その方法が一番いいんでしょうね。
どうもありがとうございました!!
No.6
- 回答日時:
> 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
- 回答日時:
画面の一番下に並べるだけでいいのでしたら(右端が切れたりしてもいいのなら)、スタイルシートを使って背景にする方法もあります。
その場合は、ヘッダーに以下のタグを入れてください。
<STYLE TYPE="text/css">
BODY {
background: url(u.gif) repeat-x 0% bottom;
background-attachment: fixed;
}
</STYLE>
ちなみに、NN4,0だとこれじゃダメだったかもしれないです…
スタイルで背景にするのは良い方法ですね。
でも、上に文字などを重ねたくないんです。(-_-;わがままですみません。
背景だと画面を小さくした時に、上に重なってしまうので…。
NN4.0だとだめなんですか!初めて知りました。
ありがとうございました。
No.4
- 回答日時:
こんにちは、「一番下に」というのが、ちょっと掴めません。
ビッシリ繰り返し並べるということですか?
一番下にぴったり。という意味でしょうか?
それともスクロールしても常に一番下に表示。ということですか?
■隙間なくビッシリ並べるのであれば、
繰り返し、同じ画像を並べる(パターンの壁紙のように使う)のであれば、
「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>
============================================
長々と失礼しました。ちょっと見当違いかも。。
色々な方法を教えて頂きありがとうございました。
下と左右をピッタリにするのは
<STYLE type="text/css">
<!--
body{margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;}
-->
</STYLE>
っていうスタイルしか知らなかったので、違う方法が分かって良かったです!
一番下に表示させたい理由は、上に文字や絵が重なるのがいやだからなんです。
それを避けるにはフレームを使うのも一つの手ですね。
No.2
- 回答日時:
タグを次のように書いてください。
<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%に一列に並べたいのです。
あと、絵の様なものなので、絵が伸びてしまわないような方法をお願いします。
テーブルのタグは知ってるんですが、これだと絵が伸びてしまうんですよね。
同じ大きさのままで並べる方法ってないんでしょうかね…?
早い回答ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- 数学 高一数学 場合の数 画像あり 〔 チャート 254ページ 問題練習13番 〕 なぜ各々の女子の並び方 2 2023/08/19 20:04
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- HTML・CSS HTMLのフォームについてお尋ねします 1 2022/12/03 21:47
- iPhone(アイフォーン) iPhoneで写真アプリを立ち上げて画像を見てると、画面左上の電波・キャリア・4Gと並んでいる表示の 1 2023/05/23 13:06
- Word(ワード) wordでセクションを区切っているのに、ページ番号の設定が連動してしまいます。対応を教えてください! 2 2022/05/25 12:36
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
同じクラス名はつけないほうが...
-
特殊文字の検索方法
-
テーブルの一部分のセルだけに...
-
IE6で見ると文字の下半分が隠れる
-
セルの高さを固定するには?
-
ie8のcssでcol要素のwidthがき...
-
cssで、テーブルのtdの中の文字...
-
テーブルの線を点線にする
-
テーブルのセル内の隙間を取れ...
-
Tableタグで作成した表の縮小
-
同じwidth=200でもセル内の文字...
-
file_get_contentsで抽出後の処理
-
テーブルタグの横のスペース
-
divで囲んだ文字が消える
-
HTMLのテーブルでそれぞれの大...
-
商品詳細を横並びに表示する方法
-
td要素内のdiv要素をセンタリン...
-
テーブル内のテーブルの高さを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
XHTMLに関する質問 順序が逆に...
-
td width="180" と固定してるの...
-
テーブル内のテーブルの高さを...
-
表とリスト(ulとtable)の違い...
-
td要素内のdiv要素をセンタリン...
-
divで囲んだ文字が消える
-
ブラウザによってテーブルのセ...
-
firefoxで「height: 100%;」と...
-
formのinputなどの幅100%指定
-
cssで、テーブルのtdの中の文字...
-
センタリングしたページの印刷
-
vbscriptで時計を作りたい
-
HTMLのテーブルでそれぞれの大...
-
Dreamweaver デザインビューの...
おすすめ情報