アプリ版：「スタンプのみでお礼する」機能のリリースについて

htmlやスタイルシートに詳しい方教えてください

解決済

  • 質問者：tamako58
  • 質問日時：
  • 回答数：8件

初めてのHP作りがんばっています
早速行き詰まりました（´～｀)

800×600くらいのサイズの1枚のオリジナルイラストの画像があるのですがそれを背景としたいです
下記のように記述いたしました

<html>
<head>
<title>tamaringo world</title>
<style type="text/css">

body {
background-image: url(img/haikei.jpg);
background-repeat: no-repeat
}

</style>
</head>
<body>

</body>
</html>

背景として画像は表示されますが左上に表示されてしまい右側と下に大幅な余白ができます
画面いっぱいに背景とするにはどうしたらいいでしょうか
横スクロールにはしたくないです
できれば縦スクロールもなしで1枚の画像がポンと出るようにしたいです
初心者で質問の意図が分かりにくいかと思いますがアドバイスいただけると本当にうれしいです
よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： Nine-nine
  • 回答日時：

＃7です。


一番上リンクに変なのが入ったみたいで上手くいきません。
もう一度貼りますので、こっちで飛んでください。
http://www.tagindex.com/kakolog/q3bbs/201/350.html
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます
知識のある周りに全くいないのでとってもありがたいです

一通り読ませていただきました(≧▽≦)ノ

まだ少し知識が足りないようです
今からじっくり読んで理解しながらどうしたらいいかやってみます

また質問するかと思いますのでよろしくお願いします

がんばろぉっとっ

通報する
お礼日時：2007/12/31 00:38

No.7

  • 回答者： Nine-nine
  • 回答日時：

背景に使用すると、背景全体のサイズを決めて確保するか、上に物がのっていないと無理です。



が、背景のように見せかける手でブラウザの大きさに合わせる方法もあります。
1.imgでサイズ指定をheight:100%、width:100%にし、ブラウザの画面サイズにする。imgはimgであって、backgroundではない。
2.1をz-indexとpositionで、1.を通常よりマイナスにすることで背景化する（z-index:-1;以下）
3.ボタンなどを別のブロックにし、2.の上に重ねる。（2.でマイナスにしているので普通に組めば問題ないと思う。）

もうひとつの案
1.は上に同じ
2.3.position:position:relative;で親要素に対して子要素を２つ重ねる。

画像だけなら、1で完成。でも、行き止まりページになってしまいます。ので、2.3.で1.を背景化させてます。真中に持っていきたいなら#5さんのいうwidth:指定した上でmargin:0 autoそして、heightやline-heightを50%でできます。対応する範囲（想定見てもらいたい人）をよく考えて使い分ける必要があると思います。

画面一杯に表示させ
http://www.tagindex.com/kakolog/q3bbs/201/350.html​
重ねる考え方
http://www.k5.dion.ne.jp/~i-araki/css/css-frame. …
http://www.stylish-style.com/csstec/basic/m-kasa …
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： juri_a
  • 回答日時：

「ANo.5」です…


「ANo.1様への回答へのお礼」で良ければ…、を書き忘れました。

最初の質問では、
javascriptで、（IEならば、「document.body.clientWidth」などで）
サイズを得てからでないと難しいと思います。
なので、「ANo.1様への回答へのお礼」で良ければ…、「ANo.5」を試してみてください。
を追記します。

連続でごめんなさい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

いえ　何度もありがとうございます
周りに詳しい人がいないのでみなさまのご回答とてもとてもありがたいです

意外に難しい事なんですね（/□＼*）
簡単にできる事なのかと思っていました

今の時点でみなさまのご回答に私の知識が追いついて行っていません
タグ丸写しでは何がなんだかわからなくなってしまいそうなので教えていただいたタグを解析して理解しながらどうしたらいいか勉強してみたいと思います

また質問すると思いますのでどうかよろしくお願いします

それにしてもみなさん　すごいなぁ

私も教えられるくらいになりたいな

通報する
お礼日時：2007/12/31 00:33

No.5

  • 回答者： juri_a
  • 回答日時：

<html>


<head>
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
#center
{
width:800px; height:600px;
position:absolute;
top:50%; left:50%;
margin-left:-400px; margin-top:-300px;
}
</style>
<title>画像を中央に表示</title>
</head>
<body>
<div id="center"><a href=""><img width="800" height="600" alt="image" src="image.png" /></a></div>
</body>
</html>

「#center」の、
「width」、「height」は、画像サイズと同じ
「margin-left」、「margin-top」は、画像サイズの半分（マイナス）
（「center」なんてＩＤは、嫌ですが説明を簡単にするためです。）

環境によっては（？）、
画像の周りにアンカーを表す枠が付くと思いますが、
消したければ他で調べてください。

余計な御世話ですが…、
「800x600」は大き過ぎると思います。
「320x240」で、テレビの半分の大きさです。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： bari_saku
  • 回答日時：

＞では背景は色のみにして（真っ黒とか真っ白とか）その上に背景にしたかった画像を中央にポンっと表示させてその画像の上にリンクボタンをつける（3段重ねの状態）という事なら誰が見ても同じように見える事が可能でしょうか



難しいように思われます。
＃１さんのおっしゃるとおり、閲覧者のモニター解像度は千差万別ですから、あなたが意図した状態とは異なるケースも多いでしょう。
具体的には、ものすごく広い余白の中央にポツンと画像があったり、またはウィンドウに画像が表示しきれなくて、画像の上下が切れたりなど、考えられる状態は色々です。

（スタイルシートでは限界があるように思いますが、他の方法で可能かどうかはちょっとわかりません）
    • good
    • 0
    • 件
通報する
この回答へのお礼

そうなんですね
ブラウザに寄って千差万別なんですね

中央に画像を置く事は簡単な事だと思っていました
解像度についてまだあまり知識がないので勉強してみます
ありがとうございました

通報する
お礼日時：2007/12/31 00:21

No.3

  • 回答者： torayoshi
  • 回答日時：

#1です。


> 画像を中央にポンっと表示させて…
↑これ、簡単なようで実は難しいんです。
「中央付近」なら出来ますが、「ど真ん中」は出来ないかも…
それにその画像の上にさらにリンクボタンを重ねるとなると…
リンクボタンは一個でしょうか？複数？
レイヤで重ねることになるんでしょうけど、
一個ならなんとかなるけど、
複数表示となると自分から見てうまく表示させたと思っても、
やっぱりずれて見える人は出てくるでしょうね。
いっそのこと、リンクボタン込みの一枚の画像にして、
イメージマップを組み込むってのはどうでしょうか。
これなら誰が見ても同じに見えますから。
    • good
    • 0
    • 件
通報する
この回答へのお礼

2回もご回答いただきありがとうございます♪
ご回答ありがとうございます
周りに詳しい人がいないのですごくありがたいです(ToT)

実はこんな感じのイラストなんですが
http://www.stickam.jp/editMediaComment.do?method …
背景をベースにウサギとお花ちゃんと女の子と月をリンクボタンにしたいです

できればFLASH等で作成してマウスを乗せるとこの子たちが少し反応するような動
きをつけたいです

やっぱり難しぃでしょうか(*_*)

何度もお付き合いいただき本当にありがとうございます

通報する
お礼日時：2007/12/31 00:27

No.2

背景を自動で拡大、縮小するのは難しいと思います。


仮に出来たとしても、人によってブラウザが縦長だったりして、
画像の縦横比が変わるのは気持ち悪いと思います。

背景画像として自分の描いた絵を見せたいという目的なら
画像は少し小さめにして、多くの人のブラウザで1画面に納まるようにして
background-attachment: fixed;
background-position: bottom right;
みたいなのが良いと自分は思います

もしかしたら背景としてではなく通常のimgタグを用い
<html>
<head>
<title>tamaringo world</title>
<style type="text/css">
img#bg {
position: fixed;
z-index: 0;
}
div#contents{
position: fixed;
z-index: 1;
}
</style>
</head>
<body>
<img src="img/haikei.jpg" id="bg"/>
<div id="contents">
前面に表示する文章
</div>
</body>
</html>
みたいな方針を用いると画像サイズを変更したりということが
javascriptでも行いやすくなるので、いろいろ出来るかもしれないなと思います。
自分はブラウザとしてfirefoxを使っているのでIEでの見た目とかは分かりません
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます
そのまんま映してみました(≧▽≦)ノ
文章が画像の上に出て来てなんだかすこし進歩したような感じがしてうれしいです

ブラウザに寄って変わってしまうのですね(*_ _)
私もいつか教えられるようになれるようにがんばります

通報する
お礼日時：2007/12/31 00:18

No.1

  • 回答者： torayoshi
  • 回答日時：

800×600だとSVGAあたりで見ない限り画面いっぱいにはならないでしょう。


それに一つの単体画像を誰が見ても同じように画面いっぱいに表示させるのは無理です。
閲覧環境(モニター解像度)は人によっていろいろですからね。
タイル状に表示させれば画面いっぱいにはなりますが、
一枚の画像ではなくなります。
ってことで、結論は『出来ません！』
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます
周りに知識のある人がいないのでとてもたすかります

そうなんですね＿|￣|○

では背景は色のみにして（真っ黒とか真っ白とか）その上に背景にしたかった画像を中央にポンっと表示させてその画像の上にリンクボタンをつける（3段重ねの状態）という事なら誰が見ても同じように見える事が可能でしょうか

わかりにくいですがご理解いただけましたらご回答いただけるとうれしいです
よろしくお願いします

通報する
お礼日時：2007/12/30 00:52

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報