- ベストアンサー
DIVなどに、複数の画像を定義できますか？
- メインコンテナの幅が決まっている状況で、特定の画像を延々に横表示したいです。ただし、bodyには別の背景画像を使用しているため、背景を指定するdivなどにはメインコンテナの幅を飛び出して表示することはできません。
- このような場合、特殊な回避方法や定義方法はありますか？
- 幅を変えたり、bodyの背景を変更することはできない前提でアドバイスをお願いします。
- 404not_found
- お礼率61% (176/285)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞この部分を、親コンテナの500pxを無視して、画面いっぱいの表示は可能でしょうか・・・。 これは仕様上できないのです。 文書構造上、親コンテナブロック内の要素は、DOM上でその配下にありますから、それを外れるためには、absoluteで外さなければなりません。そうすると、その要素は親コンテナブロック内には存在しないことになりますから、それに続く要素は、そのabsoluteされた要素が存在しないように配置されてしまいます。 方法は、article(main_container)に幅を指定しないで、その内容に500pxを指定するしかないでしょう。 結果的に全く同じになります。構造上も不整合ではありません。 ※main_containerではなく、articleが良いでしょう。--class名は文書構造を補完するためのものです。 HTML5では内部にheader,section,footerを持つ、あるいは持つと想定される完結したブロックを示します。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 これが理解されなかったため、新しい要素が追加されます。 ★HTMLを書くときは、文書構造だけをマークアップする。HTML5では強く指摘されています。それに逆らわなければ樂です。将来どのようにもデザインできます。 ★HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の名称と用途はHTMLをマークアップするときのとても良い参考になります。 以下注意事項!!!よく読んでください。 ★タブは＿に置換してあります。 ★HTML5にするときは、そのまま <div class="header"></div>→<header></header> <div class="article"></div>→<article></article> にすること。 ⇒The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み!! nth-child(2n)擬似クラスはCSS3のものです。CSS2.1の範囲で書くならclassにすると良いでしょう。 <!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;background-color:white;} body{width:100%;position:relative;} div.header, div.section div.section, div.footer, div.section h2, div.section p{ width:480px;padding:10px;/* 480+10+10=500 */ margin:0 auto;background-color:silver; } div.section div.section p{ width:auto;padding:0;background-color:transparent; } h1,h2,h3,p{margin:0;height:1.8em;} div.section div.section:nth-child(2n){width:100%;background-color:red;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<p>このページでは・・・・</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文</h2> ＿＿＿<p>記事段落</p> ＿＿＿<div class="section"> ＿＿＿＿<h3>記事タイトル</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>記事</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>記事</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>記事</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>記事</h3> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<dl class="documentHistry"> ＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿＿<dd>2012-08-10</dd> ＿＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿＿</dl> ＿＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿</div> ＿</div> </body> </html>
お礼
詳しい情報有難う御座います。 大変助かりました！ 出来ること出来ないことへの理解が深まりました。有難う御座いました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なにか、根本的な部分で間違えているような？？ 文書構造上、ありえる構造でしたら、そのようにデザインできるはずです。 ひょっとして、デザイン目的でHTML(やDIV)書いてませんか？構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )がされていない。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ブロック要素は、親コンテナブロックのサイズを参照できます。 サンプルはリキッドです。header,section,footerは480px～900pxの間でウィンドウ幅の50%で追随します。 [例]HTML4.01 <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文</h2> <div class="section"> <h3>記事</h2> </div> <div class="section"> <h3>記事</h2> </div> <div class="section"> <h3>記事</h2> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> html,body{margin:0;padding:0;background-color:white;} h1,h2,h3{margin:0;height:1.8em;} div.header,div.section,div.footer{width:60%;margin:0 auto;background-color:silver;min-width:480px;max-width:900px;} div.section div.section{width:auto;} div.section+div.section:before{ display:block; content:"A"; width:200%;height:40px; position:relative; left:-50%; background:red url() repeat-x; } [例]HTML5 <body> <header> <h1>タイトル</h1> </header> <section> <h2>本文</h2> <section> <h3>記事</h2> </section> <section> <h3>記事</h2> </section> <section> <h3>記事</h2> </section> </section> <footer> <h2>文書情報</h2> </footer> </body> html,body{margin:0;padding:0;background-color:white;} h1,h2,h3{margin:0;height:1.8em;} header,section,footer{width:60%;margin:0 auto;background-color:silver;min-width:480px;max-width:900px;} section section{width:auto;} section+section:before{ display:block; content:"A"; width:200%;height:40px; position:relative; left:-50%; background:red url() repeat-x; }
お礼
有難うございます。 すみません、説明不足でした。 全てのコンテンツは、500pxの親コンテナ内にあることを想定しておりました。 ですので、今回頂いたソースで書かせて頂くと <div id="main_container"><!--メイン500pxのコンテナですでに囲まれている--> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文</h2> <div class="section"> <h3>記事</h2> </div> <div class="section"> <h3>記事</h2> </div> <div class="section"> <h3>記事</h2> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </div><!--メイン500px--> といった、感じの状況です。 この状況で <div class="section"> <h3>記事</h2> </div> この部分を、親コンテナの500pxを無視して、画面いっぱいの表示は可能でしょうか・・・。 よろしくお願いいたします。
お礼
有難うございます。 なるほどです、これもアリかも知れません！ もう少し自分でも調べてみたいと思います。 情報感謝いたします。
補足
有難う御座います。 今回は、htmlとbodyへの定義という裏技？で対応いたしました。有難う御座いました。