ベストアンサー

ヘッダー画像がサイドバーまで伸びる

2013/12/14 01:07

http://www.bungyjapan.com/ja/index.php/sites/locations/C9/ このサイトのように、ヘッダー画像がサイドバーまで伸びているのはどのように作られているのでしょうか？HTMLをみてはみましたが、いまいちわかりません。

satisfied999
お礼率34% (214/620)

CSS
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/12/14 11:05 回答No.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">  ＿</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>

質問者

お礼 2013/12/14 12:51

めっちゃこまかい説明ありがとうございます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2013/12/14 07:55 回答No.1

背景がぴったり合うようなサイズで画像を作り、それぞれの要素の背景に指定してください。 <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> コンテンツとサイドバーに背景を指定しなければ、ラッパーの背景が透けて見えます。

ログインすると、全ての回答が全文表示されます。