- ベストアンサー
ヘッダーのみを横幅いっぱいに表示する方法
只今ホームページを作成中です。ヘッダーをどのブラウザで見ても横幅いっぱいに表示されるようにしたいのですが、うまくいきません。最近全画面表示で画像を使ったサイトをよく見かけるのですが、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をどうにか設定変更したら、これをヘッダーのみに適応することが出来るのではないかと思うのですが、いかがなのでしょうか？ もう少し、お付き合い頂けませんでしょうか。どうぞ宜しくお願い致します。
関連するQ&A
- 横幅100%指定でも崩れないボックスを作りたい
簡単に書きますが、このようなボックスがあったとします。 <style> .box { width: 100%; height: 150px; } </style> <div class="box"> テスト </div> このような例ですと、ウインドウサイズを変えるとボックスの中が崩れてしまうことがあります。 どうにかして横幅100%指定のボックスでも崩れないようなものを作りたいです。 試行錯誤しましたが、私の未熟な知識ではわかりませんでした。 どうかご回答願います。
- 締切済み
- CSS
- 画面100％表示のトップページ用ヘッダーがうまくできません
body{height:100%; width:100%; margin:0; padding:0;} として、フッターまでの表示が画面１００％になるように作っているのですが・・。 ヘッダーのスタイルシートを↓↓ #header{width:100%;height:100px:"} として(フォント・背景色等、質問に関係ないと思われるタグは抜いております。）、幅１００％、高さ１００pixにしているのですが・・ 中に記載したい文字を配置しようと、 この#header に上、左、パディングを設定すると、その分下や右にもヘッダーが伸びてしまいます。 センターではなく、左側に余白を設け、下の方に文字を配置したいのですが・・どうすればいいでしょうか？？
- ベストアンサー
- HTML
- ヘッダー画像を幅一杯にすると高さが縮小されてしまう
ホームページを作成しています。ヘッダー用に用意した写真をブラウザの横幅いっぱいに表示し、高さも指定したもので表示したいのですが、思うようにできません。ヘッダーの画像サイズはwidth:1800px height:483pxです。今の状況は横幅は表示サイズをどう変更しても枠いっぱいに表示されてはいるのですが、どういうわけか高さが縮小されて表示されてしまっていて、メイン項目との間が大きく開いてしまっています。 <html> <head> </head> <body> <div class="headbg"><img src="head_bg.jpg" width="100%" border="0" alt=""></div> </div> <div class="main">/* ここからメイン項目が入ります*/ </div> </body> </html> /* CSSは抜粋してこのような状態です*/ html,body { height:100%; } .headbg { /* ヘッダーを幅いっぱいにする為のボックス*/ width: 100%; height:483px; border:0px solid #F00; position:absolute; margin:0px; top:0; left:0; overflow:hidden; } .main { /* メインボックス*/ height:960px; width: 900px; min-width:900px; background color:#FFF; padding: 20px 0px 0px 0px; margin-left:auto; margin-right:auto; text-algn:left; margin-top:290px; border:0px solid #999; } どなた様かどうかご教授頂けませんでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- ネットトラブル
- メニューやヘッダー背景だけをブラウザの横幅いっぱい
下記ＵＲＬのように、メニューやヘッダー背景だけをブラウザの横幅画面いっぱいに表示して、拡大や縮小しても、延々と表示されるようにしたいのですが、どのようにしたらよいか分かりません。 ＵＲＬ：http://j-sen.jp/ どなたかご教授頂けたら幸いです。 よろしくお願い致します。
- 締切済み
- HTML
- 本文を、縦幅いっぱいに表示させるには？
本文を、縦幅いっぱいに表示させるには？ Tableタグを使い、画面いっぱいに内容を表示させるHTMLを作りたいと思っています。 横幅は、画面いっぱいに表示できました。 しかし縦幅が画面いっぱいに表示できず、困っています。 内容は、「ヘッダ部・本文・フッダ部」という、3段構成のHTMLです。 ヘッダ部は、画面上部に50ドット。 フッダ部を、画面下部に50ドット。 そして、残りの全領域を、本文の表示に充てたいのです。 つまり、↓こんな感じにしたいのです。 ―――――――――――― ヘッダ部 ―――――――――――― 本文 （以下、余白） ・ ・ ・ ・ ・ ・ ―――――――――――― フッダ部 ―――――――――――― しかし、実際には、↓こんな感じに表示されてしまいます。 ―――――――――――― ヘッダ部 ―――――――――――― 本文 ―――――――――――― フッダ部 ―――――――――――― （以下、余白） ・ ・ ・ ・ ・ ・ TableタグのHeight属性を100%にすればうまくいきそうな気がするのですが…何がいけないのでしょう？ また、テーブルの上下左右に、若干の余白が表示されてしまいますが、この余白もできればなくしたいと思っています。 方法をご教授いただけないでしょうか。よろしくお願いします。 以下、HTMLコードです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head><title>てすと</title></head> <body> <table width="100%" height="100%" border="1"> <tr height="50"><td>ヘッダ部</td></tr> <tr><td>本文</td></tr> <tr height="50"><td>フッダ部</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの横幅を常にブラウザ一いっぱいに表示するに
テーブルの横幅を常にブラウザ一いっぱいに表示するには？ たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が １０cmなら画面いっぱいテーブルを表示させて、 ２０ｃｍなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか？
- ベストアンサー
- HTML
- レスポンシブwebデザインで横幅を変更せずに文字を
よくレスポンシブwebデザインで横幅に合わせて基本的には、横幅を320pxにしてサイトを設計するという記事をよく見ますが、横幅が640pxのRetinaディスプレイで見ると画像やyoutubeの動画の画質が悪くなってしまいます。 なので、サイトの横幅を640pxにして、PCで見るときはfont-sizeを12px、line-heightを16pxにして、スマートフォンで見る際には、倍のfont-sizeを24px、line-heightを32pxにというように、横幅を変更するのではなく文字サイズの変更だけをしてサイトを制作するつもりなのですが問題ないですよね？
- ベストアンサー
- CSS
- html ヘッダーを固定し
海外サイトのテンプレートを元にホームページを作っています。 出来上がったホームページを改良したいと思っています。 ヘッダーとフッターを固定し、 ヘッダーの中にはcssを使ったhtmlを入れ、 中央部分にリンク先が表示されるようにしたいです。 検索しながら試行錯誤していますが、全然うまくいきません。 素人が手を出す領域ではないかもしれませんが、 お知恵を貸して頂けるとありがたいです。 よろしくお願いします。
- 締切済み
- CSS
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
お礼
ご回答ありがとうございます。 結局naokita様に教えて頂いた通り、CSSのみで希望の設定を実現しました。 jQueryはまだ早かったみたいです。 教えて頂いた内容、とってもよくわかりました。 本当にありがとうございました！！