- ベストアンサー
ヘッダーのみを横幅いっぱいに表示する方法
只今ホームページを作成中です。ヘッダーをどのブラウザで見ても横幅いっぱいに表示されるようにしたいのですが、うまくいきません。最近全画面表示で画像を使ったサイトをよく見かけるのですが、jacascriptをヘッダーに適用させて実現できないものかと試行錯誤しているところです。こちらのサイトを参考にさせて頂いたのですが、ヘッダーをwidth:1024pxでheight:485pxnに設定して、全画面ではなく、ヘッダーのみに適応させたいのです。どなた様かお詳しい方、どうかご教授の程宜しくお願い致します。 ※下記参考サイトです http://puzzel.jp/blog/webdesign/1929
- momoeolive
- お礼率50% (4/8)
- ネットトラブル
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
NO.1回答者です。（補足拝見済み） 例のサイトは未検証 （当方、jQueryはコピペ利用者で、修正する程のスキルは無いｗ） という事で、jQueryでの編集なら次の回答者に期待して下さい。 以下の様に、CSSだけで再現できるのでは？ <html> <head> <title>NEW Head</title> </head> <body style="margin: 0; padding:0; color:red;"> <div style="position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100px;"> <img src="hoge.jpg" width="100%" alt="*"> <h1 style="position: absolute; top:20px; left:20px;">ヘッダー</h1> </div> <div id="wrap" style="position:absolute; top:100px;"> <div><h2>ここからメインコンテンツ</h2></div> <div><h3>TEST.TEST.TEST.TEST</h3></div> </div> </body> </html> ヘッダー内外のコンテンツをどうなっているのかにもよる・・・ 画像の高さによって、ヘッダーの高さを適当に調整。 普通は、min-widthで最小幅を設定するかな。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
今、例えば、 <body> <div id="wrap"> <div id="head"> ～～～ IDとか例として、こんな感じのソースだと思うけど、 それの<body>直下に新たにヘッダーを作ればあとは簡単。 <body> <div id="new-head"> <h1>新ヘッダー</h1> <p>新ヘッダーを追加しました！</p> </div> <div id="wrap"> <div id="head"> CSSに以下を div#new-head{ width:1024px; height:485px; background:url(ヘッダーのみ画像パス.jpg);} div#new-head h1{ margin:0; padding:1em 0 1em 2em;} 実際の元ソースや希望イメージが無いから詳しくは無理。 質問だけでの条件で一番簡単なソースならこんな感じになる。 めいっぱいと幅1024pxは意味が違うよね・・・ 最後に、旧ヘッダー内コンテンツを新ヘーダー内に放り込む。
補足
ご回答ありがとうございます。 ヘッダーの1024pxというのは参考ページで指定されているものなので、あえて、この大きさにしています。ただ、教えて頂いた方法だと、単なる幅1024pxの画像にしかならないと思うのですが、表示方法を縮小や拡大したとしても、伸び縮みするだけで、画面上は横幅いっぱいに表示するようにしたいのです。参考ページはhttp://puzzel.jp/blog/webdesign/1929で、全画面に画像が表示されていますが、私の場合はこれをヘッダー部分のみに適応したいのです。 <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.fullscreenr.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var FullscreenrOptions = { width: 1024, height: 485, bgID: '#bgimg' }; jQuery.fn.fullscreenr(FullscreenrOptions); //--> </script> </head> <body> <img src="ヘッダー画像.jpg" alt="画像" id="bgimg">/* ヘッダー画像 */ <div id="wrap"> /* ここからメインコンテンツ */ </div> </body> </html> 現在の構成はこんな感じです。参考サイトにあるjQueryをダウンロードして、それを適用させています。 なので、javascriptをどうにか設定変更したら、これをヘッダーのみに適応することが出来るのではないかと思うのですが、いかがなのでしょうか？ もう少し、お付き合い頂けませんでしょうか。どうぞ宜しくお願い致します。
お礼
ご回答ありがとうございます。 結局naokita様に教えて頂いた通り、CSSのみで希望の設定を実現しました。 jQueryはまだ早かったみたいです。 教えて頂いた内容、とってもよくわかりました。 本当にありがとうございました！！