画像を乗っけたいのですが、うまくいかない。

質問

下記サイトのコンテンツのライトボックスの上にキラキラした画像を乗っけたいのですが、乗っけたところ画像の下に入ってしまいます。

z-indexなどを使ったのですがそれでも下になります。上に重ねる方法があれば教えてください。

http://sample1.digi2.jp/yufu/index.html

回答No.3

balloon23 · ベストアンサー

うーん、なればこちらも力技ですｗ

lightbox.jsを開き、「lb-image」を検索してみてください。
<div class='lb-container'><img class='lb-image' src='' />～と、
htmlそのまんまなやつがあります。

imgの直後に空タグを入れ、
<div class='lb-container'><img class='lb-image' src='' /><span></span>

cssでposition:absolute;height:100%;width:100%;を指定。
imgのちょうど全部を覆う形にしたうえで、背景画像としてキラキラを入れる感じです。

やや敷居が高く感じますが、視認性が悪いだけで編集はわりかし簡単です。
ちょっとジャンル変わってしまいますが、参考までにどうぞ。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

dl {
position: relative;
}

img.brilliantimg {
position: absolute;
display: block;
top: -105px;
right: -60px;
left: auto;
z-index: 999;
}

上記でイメージ通りにいきました。

ただ今度はページを更新したときにぶれる現象が発生しました。
ポジションを使いすぎたからでしょうか？
無理のあるコーディングなのですかね？

補足

ありがとうございます。お忙しい中大変ありがとうございました。

難しいですね。
ここまでくるとやるべきか考え直す必要もあるかもしれませんね。

回答No.8

ORUKA1951

煩雑ですか？？
HTMLは、今後のHTML5を念頭において作成してあります。
・class名はそのまま要素に置き換えられること
　<div class="header">→<header>
・文書構造しか書かない
　<div class="section"><div class="nav"
・sectionはhn見出しとセットで検索エンジンは文書のアウトラインを形づくる(目次を作る)
　ためdlではなくsectinに組み合わせてあります。
・後日のメンテナンスを重視してあります。顧客の担当者でも手が入れられるように
CSSは、
・後方互換のため子供セレクタではなく子孫セレクタにしてある。
　　body>div.section{} body>div.section>section{}のほうが楽ですがIE7は認識しません。

・他の場所に登場したときは適用されないように文書構造がセレクタに書いてある。
　　headerに登場するnavとsectionやfooterに登場したときが区別されるように
この二点のため、CSSはちょっと冗長な部分があります。セレクタや詳細度が計算できるまで慣れれば楽になるでしょう。
　そのかわり、デザインを全く変える場合もHTMLには手を加えなくてよいようになっています。

＞dlは使わないのですね。タイトルが無いからなんでしょうね。
　内容的に、文書のアウトラインが作られるとき、HTML5では(HTML4.01でも)、sectionはひとつの見出し(h1～h6)とセットで使用されます。
　内容的にアウトラインに含まれるべき内容ですのでsection+h3とマークアップしました。
ルート
|-- header
|　　┗h1
|-- section
　　　|┗ h2
　　　|-- section
　　　|　　　┗ h3
　　　|-- section
　　　　　　┗ h3
　⇒The section element | HTML5 Doctor( http://html5doctor.com/the-section-element/ )
　⇒4.4.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )

　他者へのアドバイスですから、可能な限り仕様に沿った形にせざるを得ないのです。

　なお、示したサンプルではリンクがキラキラ画像にも効いてきますが、それを避けたければa要素の:afrer擬似クラスにではなくdiv.figure:afterにして、a:afterはその上に置くと良いでしょう。

お礼

なお、示したサンプルではリンクがキラキラ画像にも効いてきますが、それを避けたければa要素の:afrer擬似クラスにではなくdiv.figure:afterにして、a:afterはその上に置くと良いでしょう。

参考になります。

回答No.7

ORUKA1951

スタイルシートです。
★同じくhttp:の:は全角に置換してあります。

html,body{margin:0;padding:0;width:100%;height:100%;}
div.header,div.section,div.footer{width:100%;/* min-width:640px;max-width:1000px;margin:0 auto;*/}
p{margin:0;text-indent:1em;line-height:1.6em;}
body{
background:black url(http：//sample1.digi2.jp/yufu/img/base/lakenight.png) 50% 50% fixed;
color:white;
background-size:cover;
}
div.header,div.section{
width:60%;min-width:630px;
margin:5px 5px 5px auto;
padding:5px;
}
div.header{
height:100%;
}
div.header h1{
background:url(http：//sample1.digi2.jp/yufu/img/base/kyoukaitel.png);
width:210px;height:205px;
overflow:hidden;
text-indent:-200em;
position:relative;
left:50%;
}
div.header div.nav{
width:600px;
position:absolute;
bottom:300px;right:0;
}
div.header div.nav ol,div.header div.nav ol li{margin:0;padding:0;}
div.header div.nav ol{list-style:none;}
div.header div.nav ol li a{
display:block;height:100px;width:100px;
position:absolute;
overflow:hidden;
text-indent:-100em;
}
div.header div.nav ol li a[href="/yufu"]{
background:url(http：//sample1.digi2.jp/yufu/img/base/TOPLED.png);
left:0;top:0;
}
div.header div.nav ol li a[href="/yufu/restaurant.html"]{
background:url(http：//sample1.digi2.jp/yufu/img/base/TOPLED.png);
left:100px;top:100px;
}
div.header div.nav ol li a[href="/yufu/event.html"]{
background:url(http：//sample1.digi2.jp/yufu/img/base/TOPLED.png);
left:200px;top:150px;
}
div.header div.nav ol li a[href="/yufu/acsess.html"]{
background:url(http：//sample1.digi2.jp/yufu/img/base/TOPLED.png);
left:300px;top:150px;
}
div.header div.nav ol li a[href="/yufu/inquiry.html"]{
background:url(http：//sample1.digi2.jp/yufu/img/base/TOPLED.png);
left:400px;top:50px;
}

/* img/base/TOPLED.png*/

div.section{
background-color:rgba(0,0,0,0.7);
}
div.section div.section{
width:auto;min-width:480px;
margin:10px 5px;
background:url(http：//sample1.digi2.jp/yufu/img/base/imgbacktransparent.png);
padding:5px;
position:relative;
}

div.section div.section h3{
}
div.section div.section div.figure{
width:90%;margin:10px auto;
background-color:white;
padding:5px;
position:relative;
}
div.section div.section div.figure a{
display:block;position:relatove;
}
div.section div.section div.figure a:after{
content:url(http：//sample1.digi2.jp/yufu/img/base/brilliant.png);
position:absolute;
top:-60px;right:-10px;
}
div.section div.section div.figure img{
display:block;
width:100%;height:auto;
opacity:0.8;
}
div.section div.section div.figure:hover img{
opacity:1.0;
}
div.section div.section div.figure:hover a:after{
opacity:0.5;
}

div.section h2{
overflow:hidden;
text-indent:-100em;
}
#What{
background-image:url(http：//sample1.digi2.jp/yufu/img/index/aboutyufu.png);
height:60px;width:182px;
}
#View{
background-image:url(http：//sample1.digi2.jp/yufu/img/index/yufusite.png);
height:60px;width:215px;
}

お礼

dlは使わないのですね。
タイトルが無いからなんでしょうね。

回答No.6

ORUKA1951

きれいなデザインなので・・私もちょっと真似てみました。(^^)
★タブは＿に置換してあるので戻す。
★http：は全角http：に置換してあるので戻す。

<!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>由布観光協会</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/yufu">TOP</a></li>
＿＿＿＿<li><a href="/yufu/restaurant.html">レストラン</a></li>
＿＿＿＿<li><a href="/yufu/event.html">イベント</a></li>
＿＿＿＿<li><a href="/yufu/acsess.html">アクセス</a></li>
＿＿＿＿<li><a href="/yufu/inquiry.html"">問合せ</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2 id="What">由布とは</h2>
＿＿<p>
＿＿＿豊かな自然と、近代的な観光スポット、一流旅館に有名シェフのレストランがあり、自然と高級が両方味わえる観光です。
＿＿</p>
＿＿<div class="section">
＿＿＿<div class="figure">
＿＿＿＿<a href="http：//sample1.digi2.jp/yufu/img/base/street.jpg"><img src="http：//sample1.digi2.jp/yufu/img/base/street.jpg" alt="由布の全体の写真" height="290" width="550"></a>
＿＿＿</div>
＿＿＿<h3>【由布の全体の写真】</h3>
＿＿＿<p>
＿＿＿ ＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う光の美しい景観を見ることが出来ます。
＿＿＿</p>
＿＿＿<p>
＿＿ ＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う綺麗な景観を見ることが出来ます。
＿＿＿</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<div class="figure">
＿＿＿＿<a href="http：//sample1.digi2.jp/yufu/img/base/shopping.jpg"><img src="http：//sample1.digi2.jp/yufu/img/base/shopping.jpg" alt="由布の景観" height="290" width="550"></a>
＿＿＿</div>
＿＿＿<h3>【由布の夜の街並み】</h3>
＿＿＿<p>
＿＿＿＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う光の美しい景観を見ることが出来ます。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う綺麗な景観を見ることが出来ます。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2 id="View">由布の景観</h2>
＿＿<div class="section">
＿＿＿<div class="figure">
＿＿＿＿<a href="http：//sample1.digi2.jp/yufu/img/base/shopping.jpg"><img src="http：//sample1.digi2.jp/yufu/img/base/shopping.jpg" alt="由布の景観" height="290" width="550"></a>
＿＿＿</div>
＿＿＿<h3>【由布の全体の写真】</h3>
＿＿＿<p>
＿＿＿＿山、森、湖由布には様々な素晴らしい景観があります。当サイトの背景に使われている夜景などが、大変美しい由布の景観です。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿私は大体どうも漠然たる運動院というのの日へ過ぎないた。
＿＿＿</p>
＿＿＿<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>
</body>
</html>

お礼

dlは使わないのですね。
タイトルが無いからなんでしょうね。

回答No.5

ORUKA1951

No.4です。
　z-indexは、position:relatveになっている要素には利くはずです。strticのままじゃないの？？

　私はそもそも、後日のメンテナンスやSEOを考慮するので、そのような煩雑なHTML書きませんので・・・

難しい話じゃないので、簡単な解決方法を示しておきましょう。ただ、余りに複雑なHTMLなので私流に・・・

とりあえず私がHTML書くなら、本文分だけだと、たぶんこんだけ↓(^^)
後々のメンテナンスやデザイン変更で困るのが目に見えているから・・徹底的に文書構造しか書きません。
これだけシンプルだったら、あなたの期待通りは無論、どんなデザイン変更にも対応できますからね。

HTML5にする場合は、
<div class="section"></div>⇒<section></section>
<div class="figure"></div>⇒<figure></figure>

＿<div class="section">
＿＿<h2>由布とは</h2>
＿＿<p>
＿＿＿豊かな自然と、近代的な観光スポット、一流旅館に有名シェフのレストランがあり、自然と高級が両方味わえる観光です。
＿＿</p>
＿＿<div class="section">
＿＿＿<h3>【由布の全体の写真】</h3>
＿＿＿<div class="figure">
＿＿＿＿<a href="/yufu/img/base/street.jpg"><img src="/yufu/img/base/street.jpg" alt="由布の全体の写真" height="290" width="550"></a>
＿＿＿</figure>
＿＿＿<p>
＿＿＿ ＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う光の美しい景観を見ることが出来ます。
＿＿＿</p>
＿＿＿<p>
＿＿ ＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う綺麗な景観を見ることが出来ます。
＿＿＿</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>【由布の夜の街並み】</h3>
＿＿＿<div class="figure">
＿＿＿＿<a href="/yufu/img/base/shopping.jpg"><img src="/yufu/img/base/shopping.jpg" alt="由布の景観" height="290" width="550"></a>
＿＿＿</div>
＿＿＿<p>
＿＿＿＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う光の美しい景観を見ることが出来ます。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿寒空の中綺麗にライトアップされた由布の夜の街並みです。昼間とは違う綺麗な景観を見ることが出来ます。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>由布の景観</h2>
＿＿<div class="section">
＿＿＿<h3>【由布の全体の写真】</h3>
＿＿＿<div class="figure">
＿＿＿＿<a href="/yufu/img/base/shopping.jpg"><img src="/yufu/img/base/shopping.jpg" alt="由布の景観" height="290" width="550"></a>
＿＿＿</div>
＿＿＿<p>
＿＿＿＿山、森、湖由布には様々な素晴らしい景観があります。当サイトの背景に使われている夜景などが、大変美しい由布の景観です。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿私は大体どうも漠然たる運動院というのの日へ過ぎないた。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿近頃先刻が修養院もけっしてその活動ますらしくなどに読まばおかでしょがは話帰っないたて、わざわざにはすまでたたでしょ。
＿＿＿</p>
＿＿</section
＿</div>

お礼

dlは使わないのですね。
タイトルが無いからなんでしょうね。

＞煩雑なHTML書きませんので・・・

あなたのものいいもいつも煩雑ですがね。他人から言われません？
中○人じゃないんだから。

回答No.4

ORUKA1951

理由は単純に画像が先に登場しているからです。
そして、z-indexはstaticな要素以外でないと・・

　HTMLが煩雑で、内容に関係ない・・・本来アクセサリーである画像が文書内に置かれていたり・・余りなので細かいことは省きます。
　あんな複雑なHTMLだと将来メンテナンスができなくなりますよ。

お礼

<dd>
<img class="brilliantimg" src="img/base/brilliant.png" alt="由布の全体の写真" width="575" height="337" />
</dd>

を下に持っていっても駄目でした。

回答No.2

balloon23

ふと思いついたので補足です。
ブラウザ互換とかは未検証すみません＞＜

#lightbox .lb-container:after {
content:",";
text-indent:-9999px;
display:block;
background:url(//sample1.digi2.jp/yufu/img/base/brilliant.png);
position:absolute;
left:0;top:0;
width:100%;
height:100%;
}

お礼

色々お考えいただき大変ありがとうございます。

両方base.cssに入れてみましたが残念ながら変わりませんでした。
難しいですね。

補足

ありがとうございます。お忙しい中大変ありがとうございました。

一様出来ました。
ただ当然ですが画像がのっかっている部分がクリック出来なくなりました。

これはどうしようもないですよね。
これでは商用では使えないでしょうか？

回答No.1

balloon23

javascriptが絡むと難しいですね。
強制的に書き換えられちゃうし。。。

使うには調整が必要かもしれませんが、試しにcssに以下の記述を入れてみてください。

#lightbox .lb-container:after {
content:",";
display:block;
background-color:#ffffff;
position:absolute;
left:0;top:0;
width:500px;
height:500px;
}

お礼

色々お考えいただき大変ありがとうございます。

両方base.cssに入れてみましたが残念ながら変わりませんでした。
難しいですね。