- ベストアンサー
背景画像をブラウザサイズに合わせる方法。
初心者です。 HPの背景画像を、閲覧者のブラウザサイズに合わせて拡大縮小させる方法を教えてください。 いろいろ調べてやってみたのですがうまくいきません…。 よろしくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ついさっき別の質問で似たようなケースがあったが、 その参照サイトが jQueryで、 http://puzzel.jp/blog/sample/s15/ 文法とか気にしなければ、最単な方法で、 <body style="margin:0; padding:0;"> <img src="***" width="100%" alt="*" style="position:absolute; top:0; z-index:-1;"> 最小幅 min-width: ; も必要かな。高さをどうするのか・・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 私は、最初のウェブページを作成して１４年になりますが、最も、際立ってアクセスが多いのは、HTML2で、参考書を見ながら率直に書かれたページなのです。3.2の時代に一時期TABLEで凝ったデザインのページを作成していましたがまったく訪問者もなく、HTML4.01が登場して５年たってから、率直なHTMLに戻しました。 文書構造に逆らってまで見栄えをこだわっても逆効果なことを何度も何度も経験しています。ユーザーはデザインを見るために訪問してくるんじゃない、内容こそ目的だと思っています。ですから、正しく文書の内容に沿ってマークアップされているかと、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などでのチェックは欠かしません。 背景はあくまで文書に関係ない背景ですから画像としてマークアップするのは薦めません。それだけは忘れないでくださいね。
お礼
ありがとうございます。 私もそう思うのですが…クライアントからの要望でやむなく手を出している次第です。 ご意見、肝に銘じておきます。 ありがとうございました！
- naokita
- ベストアンサー率57% (1008/1745)
NO.2回答者 naokitaです（お礼拝見済み） ＞まだまだ勉強が必要ですが… その手の方法は、ほぼ使わないから勉強する意味が薄いでしょう・・・ 正直、不具合もあるからあまり勧めないです。 （自分はまず使わないですね） 背景画像も特大画像なんて使わない方が良い。 ----------- ついでに、 もう数年したらCSS3がメインになるから、 今の内に基礎知識程度（混乱しない程度に）は学んだ方が良いかも。 background関係のCSS3だけでも、かなり便利で簡単にクオリティが高くなりますよ。 拡大縮小は、 background-size: ; だけでOKになるので。 伸縮背景画像は、 今は、jQueryにしろCSS,CSS3にしろデメリットもあるので、 他のCSSのように安易に使わない方が良いって事です。
お礼
ありがとうございます。 やはり基本から外れてしまうことは多用すべきではないんですね。 jQueryを勉強してみようと思っているのですが、それも無駄になるかもしれませんね…。 CSS3のほうを優先してやってみようと思います。 丁寧なアドバイス、ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的には、できません。 HTMLの要素は インライン要素とブロック要素に分けられ、それぞれに置換要素と非置換要素があります。 imgは、非置換インライン要素なのでそのサイズは内容物の大きさによって決まります。ブロック要素はそれが含まれる親コンテナブロックの内寸を参照します ということは、背景画像ではなくオブジェクトとしてHTML内におき、そのオブジェクトに対して display:block; width:100%; height:auto; とするしかありません。 ただし、HTML的には背景ではなく画像としてマークアップされるため好ましくはありません。 例) <body> <div class="header"> <h1><img src="./images/topLogo.jpg" width="480" height="100" alt="ようこそ私のサイトへ"></h1> </div> <div class="section body"> <h1>本文</h1> <p>段落</p> </div> </body> だとすると div.header{width:80%;max-width:760px;margin:0,auto;border:solid 1px white;} div.header h1 img{display:block;width:100%;height:auto;}
お礼
ご丁寧にありがとうございます。 簡単にはいかないんですね…。 早速やってみます。 ありがとうございました。
お礼
ありがとうございました！ とりあえず目的は達成できました。 まだまだ勉強が必要ですが… 本当に助かりました！ ありがとうございます。