![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
只今ホームページを作成中です。ヘッダーをどのブラウザで見ても横幅いっぱいに表示されるようにしたいのですが、うまくいきません。最近全画面表示で画像を使ったサイトをよく見かけるのですが、jacascriptをヘッダーに適用させて実現できないものかと試行錯誤しているところです。こちらのサイトを参考にさせて頂いたのですが、ヘッダーをwidth:1024pxでheight:485pxnに設定して、全画面ではなく、ヘッダーのみに適応させたいのです。どなた様かお詳しい方、どうかご教授の程宜しくお願い致します。
※下記参考サイトです
http://puzzel.jp/blog/webdesign/1929
No.2ベストアンサー
- 回答日時:
NO.1回答者です。
(補足拝見済み)例のサイトは未検証
(当方、jQueryはコピペ利用者で、修正する程のスキルは無いw)
という事で、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で最小幅を設定するかな。
ご回答ありがとうございます。
結局naokita様に教えて頂いた通り、CSSのみで希望の設定を実現しました。
jQueryはまだ早かったみたいです。
教えて頂いた内容、とってもよくわかりました。
本当にありがとうございました!!
No.1
- 回答日時:
今、例えば、
<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をどうにか設定変更したら、これをヘッダーのみに適応することが出来るのではないかと思うのですが、いかがなのでしょうか?
もう少し、お付き合い頂けませんでしょうか。どうぞ宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- Visual Basic(VBA) マクロについて教えてください 2 2023/06/09 16:01
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Visual Basic(VBA) マクロについて教えてください。 3 2023/06/09 17:37
- ノートパソコン 教えて下さい。過去のエクセルのファイルデータの中に、ヘッダーのところに図形を登録しています。 今回新 4 2023/04/11 15:16
- Excel(エクセル) 教えて下さい。 ●過去のエクセルのファイルデータの中に、ヘッダーのところに図形を登録しています。 ● 2 2023/04/11 17:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Microsoft Edgeでページが開け...
-
有線LAN のセキュリティについて
-
インストールしようとしている...
-
iiyama ProLite XUB2390HSの起...
-
「このページは動作していませ...
-
オリックス
-
URLが開けずホームページが見る...
-
ウェブページへのアクセス不可 ...
-
httpをhttpsにしたい
-
ゲーミングノートパソコンはダメ?
-
ネットワーク構築について
-
パソコンページダウン
-
特定のサイトが開けません
-
Webサーバ(yuzu.uja.or.jp)に...
-
三井住友カードについて質問です。
-
セキュリティが軟弱過ぎてる件
-
ホームページをSSL化するのに、...
-
お願いいたします。ホームペー...
-
URLのhttps://☓☓☓☓、、と http:...
-
ホームページのHTTPS化
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLで、何故か左右のfloatの高...
-
CSSのborderが実際の領域より上...
-
ADOBE DW 5.5 ヘッダとコンテ...
-
html+cssでフレーム落ちしてし...
-
CSSのdivで何故かボックスセン...
-
スーマートフォンの用のHP作成...
-
ホームページ作成 画像の回り込み
-
opacityとbackground-color
-
ロールオーバーで吹き出しをつ...
-
CSSを使った全体の配置
-
CSSについて教えてください
-
自作HPのレイアウトがセンタ...
-
ロールオーバーの上にz-index
-
div内の classのリンクのつけ方
-
cssについて教えてください.3
-
同じピクセル、解像度のPC表示...
-
flexboxでフッターが、本文に重...
-
ホームページビルダー14で作成...
-
ヘッダーのみを横幅いっぱいに...
-
ホームページビルダー16 ペー...
おすすめ情報