- ベストアンサー
ヘッダー画像がサイドバーまで伸びる
http://www.bungyjapan.com/ja/index.php/sites/locations/C9/ このサイトのように、ヘッダー画像がサイドバーまで伸びているのはどのように作られているのでしょうか？HTMLをみてはみましたが、いまいちわかりません。
- satisfied999
- お礼率34% (214/620)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ヘッダー画像、サイドバーの意味が分かりませんが、そのサイトでは背景画像をコンテンツの表示幅に合わせてありますね。 ソースを見られたらお分かりのようにシンプルです。 ★DIVをデザイン目的で使用されていますが、これはHTML4.01で否定され、HTML5では否定されますから、このような使い方は間違いですが・・ それを除けばまずまず・・かな HTML5未満では、「DIV要素はid属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )に使うとされていました。」 <body> <div class="header"> <h1>ページ見出し</h1> <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> ・・・・・ </div> <div class="section"> <p>本文</p> </div> <div class="footer"> </div> </body> HTML5だとDIVは原則使えません、代わりに文書構造を明確にする要素が追加されました( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) <body> <header> <h1>ページ見出し</h1> <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> ・・・・・ </header> <section> ・・・本文・・・ </section> <footer> </footer> </body> というHTMLになるはずです。 それに対して、スタイルシートで div.header{ background-image:url(); background-size:cover;/* CSS3 */ } と背景画像と表示サイズを指定します。 [サンプル]★HTML4.01strict + CSS2.1 HTMLには、このように文書構造しか書きませんから、極めてシンプルです。とっても楽です。 ※タブは＿に置換してあるので戻す。 ※一部:は：(全角）に置換してあるので戻す。 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATAでチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto：oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:900px;margin:0 auto;} div.header{ background:url(http：//www.bungyjapan.com/assets/elements/header_wrap.jpg); width:880px; height:190px;padding:50px 10px 0 10px; } div.header h1{margin:10px;} div.header h1 a{text-decoration:none;} div.header #nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;font-size:0.9em;} div.header #nav ul{height:20px;line-height:20px;} div.header #nav ul li{display:inline-block;text-align:center;padding:0 5px;} div.header #nav ul li+li:before{content:" | ";color:white;} div.header #nav ul li a{color:white;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><a title="バンジージャパン" href="http：//www.bungyjapan.com/ja/index.php"> <img id="logo" alt="バンジージャパン" src="http：//www.bungyjapan.com/assets/logo.jpg"></a> <img alt="日本唯一" src="http：//www.bungyjapan.com/assets/tagline_ja.jpg" width="276" height="66"></h1> ＿＿<div id="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">ホーム</a></li> ＿＿＿＿<li><a href="/sites/">インフォ</a></li> ＿＿＿＿<li><a href="/booking/">予約</a></li> ＿＿＿＿<li><a href="/about/">バンジージャパン</a></li> ＿＿＿＿<li><a href="/gallery/">ギャラリー</a></li> ＿＿＿＿<li><a href="/bungy/">バンジーの話</a></li> ＿＿＿＿<li><a href="/blog/">ブログ</a></li> ＿＿＿＿<li><a href="/links/">リンク</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
背景がぴったり合うようなサイズで画像を作り、それぞれの要素の背景に指定してください。 <div style="background: black url(画像) 0 0 no-repeat;">コンテンツ</div> <div style="background: black url(画像) 0 0 no-repeat;">サイドバー</div> または 全部を囲むラッパーを作って、ラッパーに背景画像を指定してください。 <div style=" background: black url(画像) 0 0 no-repeat;> <div>コンテンツ</div> <div>サイドバー</div> </div> コンテンツとサイドバーに背景を指定しなければ、ラッパーの背景が透けて見えます。
お礼
めっちゃこまかい説明ありがとうございます。