重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

DIVなどに、複数の画像を定義できますか？

解決済

  • 質問者：404not_found
  • 質問日時：
  • 回答数：3件

画像の表示で悩んでいます。

添付の画像のように、メインコンテナ（グレー）の幅が決まっている状況で、赤色で示した部分の画像だけをリピート掛けて、延々に横表示したいです。

ただし、bodyには別の背景画像を使用している前提です。
なので、bodyにはもう指定が出来ないですよね・・・。

そうした場合、body上に乗っかっている別のdivなどに背景を指定したいのですが、メインのコンテナ幅が決まっているので、それを飛びぬけての横リピートは出来ないですよね。

こういった場合、何か特殊な回避方や定義方がありますでしょうか？
どなたかお詳しい方アドバイス、宜しくお願いします。

なお、こんかい前提として挙げた条件は変更できないという中でお願いします。
「幅を変えたら？」、「bodyの背景やめたら？」系のアドバイスはお控え願います。


宜しくお願いします。

「DIVなどに、複数の画像を定義できますか」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： DrFell
  • 回答日時：

文書宣言にもよるのですが、htmlとbodyに背景を指定できます。


http://www.stylish-style.com/csstec/hi-level/dou …

この回答への補足

有難う御座います。

今回は、htmlとbodyへの定義という裏技？で対応いたしました。有難う御座いました。

補足日時：2013/05/25 15:09
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございます。

なるほどです、これもアリかも知れません！
もう少し自分でも調べてみたいと思います。

情報感謝いたします。

通報する
お礼日時：2013/05/19 17:15

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞この部分を、親コンテナの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-html4 … )』
　これが理解されなかったため、新しい要素が追加されます。

★HTMLを書くときは、文書構造だけをマークアップする。HTML5では強く指摘されています。それに逆らわなければ樂です。将来どのようにもデザインできます。
★HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )の名称と用途は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_ … )
で検証済み!! 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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿＿</div>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しい情報有難う御座います。
大変助かりました！

出来ること出来ないことへの理解が深まりました。有難う御座いました！

通報する
お礼日時：2013/05/25 15:08

No.1

  • 回答者： ORUKA1951
  • 回答日時：

なにか、根本的な部分で間違えているような？？


文書構造上、ありえる構造でしたら、そのようにデザインできるはずです。
ひょっとして、デザイン目的でHTML(やDIV)書いてませんか？構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )がされていない。
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　ブロック要素は、親コンテナブロックのサイズを参照できます。
　サンプルはリキッドです。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;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございます。

すみません、説明不足でした。
全てのコンテンツは、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を無視して、画面いっぱいの表示は可能でしょうか・・・。

よろしくお願いいたします。

通報する
お礼日時：2013/05/19 16:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報