プロが教えるわが家の防犯対策術！

ヘッダー画像固定のもう一枚画像を重ねる

解決済

  • 質問者：shanks8532
  • 質問日時：
  • 回答数：2件

ホームページ作成初心者です。（ビルダーでなく手打ちの作成方法です。）ヘッダー画像上部固定をしていまして、さらにセンタリングもして全体を中央寄せしてます。そのヘッダー画像にもう一枚リンク用の画像をヘッダー画像右側に重ねたいのですが、重ねると、重ねた画像に対して、ヘッダー画像で効いている固定、中央寄せが反映されません。ズームアウトするとどんどんその重ねた画像のみ、遠ざかっていきます・・・・・・
原因はDIVのヘッダーの部分が100%のwidthになっているため、重ねる画像のposition:absolute;で場所を指定すると、ズームアウトしていくことにより、ずれが生じてくるのかなと思っています。
かと言ってヘッダー画像を本来の画像の大きさのPXの幅にすると上部で固定はできますが、センタリングが効かなくなります・・・

ヘッダー上部固定センタリング効かせつつ、リンク用の小さい画像をそのヘッダー画像に重ねる方法（そのリンク画像はそのヘッダー画像の決められた位置で固定）を知っておられる方、お知恵を拝借できませんでしょうか。

宜しくお願い申し上げます。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

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

＞ズームアウトすると１枚目の画像がメニューバーに対して左にずれてしまいます。


ずれを無くすにはどうやったら治せるのでしょうか？
　⇒HP　画像の一部にリンクでその部分のみ画像変化 - ホームページ作成ソフト - 教えて！goo( http://oshiete.goo.ne.jp/qa/8326352.html )
　で、概略は分かると思います。
　そのHTML(CSSじゃない)と比較して、検索エンジンや将来のメンテナンスも考えると、HTML本文が如何に簡潔で分かりやすいか一目瞭然だと思います。あのようにHTMLに文書構造しか書かないことによって、デザインを全く異なるものへの変更もできます。

　「HP　画像の一部にリンクでその部分のみ画像変化」は、固定サイズでしたが、現在主流のリキッドデザインにすることも、できるのです。サイズや位置の指定がpxから%に変更します。(ちょっとしたテクニックが必要ですが・・)

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　をOpera以外のブラウザで訪問して、メニューの[表示]→[スタイル(シート)]で、色々なスタイルを選択すると、デザインが劇的に変化しますし、印刷プレビューだとリンク先URMLまで表示される・・・。
スタイルシートを使うと言うことは
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
・文書構造(HTML)とプレゼンテーションを分離する

　のが最大の目的なのです。それによって、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」のです。
　デザインのためにHTMLを書かないこと。これを最初のスタートにしなければならないと言う事です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、リンクを読み返してなんとか希望のデザインにすることが出来ました。有難うございました。

通報する
お礼日時：2013/11/04 19:12

No.1

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

プレゼンテーションはスタイルシートの導入で格段に自由度はましましたが、あくまでプレゼンテーションは文書構造と一体の物です。


　ある要素を配置するときは、その文書構造に逆らってということはないはずです。逆に言うと良いプレゼンテーションは文書構造にも従っているはずです。
　この基本がありますから、ふたつの要素を重ねると言うことは、そのふたつの要素は必ずひとつの親ブロックに属するか、一方がもうひとつに属しているはずです。
　うまく行かないのは、その原則を外れてしまっているからです。

＞ヘッダー画像上部固定をしていまして、さらにセンタリングもして全体を中央寄せしてます。
　これは背景ではなく画像ですよね。
＞そのヘッダー画像にもう一枚リンク用の画像をヘッダー画像右側に重ねたいのですが、
　両方共通のブロックに属するか、一方に属さないとうまく行きません。
[例]
　<div class="header">
　　<h1>画像</h1>
　　<p><a href="">画像</a></p>
　</div>
もしくは
　<div class="header">
　　<h1>画像<a href="">画像</a></h1>
　</div>

＞ヘッダー画像を本来の画像の大きさのPXの幅にすると上部で固定はできますが、センタリングが効かなくなります
　これはありません。中央配置は二通りの方法で出来ます。
・text-align:center
・display:block;width:**,margin:0 auto

　実際の文書構造が分からないのでアドバイスの方法はありませんが、
[例]
<div class="header">
　<h1><img src="" width="" height="" alt=""><a href="">リンク</a></h1>
だと、
div.header h1{width:80%;margin:0 auto;position:relative;}
div.header img{display:block;width:100%;height:auto;}
div.header h1 a{position:absolute;top:5%;right:1%;width:20%;height:20%;border:outset 4px silver;background-color:rgba(255,255,255,0.5);text-align:center;}

だけでよいはずです。

　

この回答への補足

ORUKA1951さん、お返事有難うございます。分かりやすい説明で非常に助かります。
今まで頂いたアドバイスを元にやったら２枚目の画像を上部常時固定、センタリングの１枚目の画像にz-indexを効かせ重ねることが出来ましたが、ズームアウトすると１枚目の画像がメニューバーに対して左にずれてしまいます。
ずれを無くすにはどうやったら治せるのでしょうか？
またお時間の有るときに、お返事頂ければ幸いです。
<link rel="stylesheet" href="../../css/h1.css" type="text/css" />
<body>
<div id="headerArea"><!--headerArea開始-->
<h1>***。</h1>

<div id="header_pic">
<img src="../../img/１枚目の重ねる画像.png"alt="***" width="980" height="130" />
<img border="0" src="../../img/２枚目の重ねる画像.png" alt="***" width="180" height="30" class="head-inquiry" />

</div>

<ul id="menu_bar"><!--menu_bar開始-->
<li class="menu" onMouseOver="this.className='menu_on'"
onmouseout="this.className='menu'"><a href="index.html">トップ</a>
</li>


<li class="menu" onMouseOver="this.className='menu_on'"
onmouseout="this.className='menu'"><a href="#">について</a>

<ul>
<li><a href="../profile/index.html">***</a></li>

</ul>
</li>

<li class="menu" onMouseOver="this.className='menu_on'"
onmouseout="this.className='menu'"><a href="#"></a>

<ul>

</li>

<li class="menu" onMouseOver="this.className='menu_on'"
onmouseout="this.className='menu'"><a href="../contact/index.html">***</a>
</li>

<li class="menu" onMouseOver="this.className='menu_on'"
onmouseout="this.className='menu'"><a href="../access/index.html">***</a>

</li>
</ul> <!--menu＿bar終了-->

【CSS】
/*▼header&footer-------------------------------------------------------------------▲*/
#headerArea { border:1px solid red;
position: fixed !important; /*外すと全体スクロールに */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px; /* 「ヘッダー」+「メニューバー」とかの高さ */
text-align: center;

z-index: 99;
}

#header_pic{
text-align:center;
}

img.head-inquiry{
z-index: 20;
position: relative; top:-100px; right:200px;
}

/*▼menubar-------------------------------------------------------------------▲*/

#menu_bar {
width:940px; /* ヘッダー画像の横サイズに合わせて大きさを変更する。さらになぜか固定センターする際の重要部分 */
margin:0 auto;
font-size: 16px; /* 文字サイズ */
height:25px; /* 高さ */
background: linear-gradient(lightblue,white);
background: gradient(linear,0 0,0 bottom,from(lightblue),to(white));
background: -webkit-gradient(linear,0 0,0 bottom,from(lightblue),to(white)); /* CSS3 PIE独自プレフィックス */
-pie-background: linear-gradient(lightblue,white); /* behaviorスクリプトPIE.htcのパス */
behavior: url(/demo/demo008/PIE.htc);


}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:180px; /* １つのメニューボタンの幅 */
color:black; /* リンク文字の色 */
/*background-color:lightblue;*/ /* メニューボタンの背景 */
background: linear-gradient(lightblue,white);
background: gradient(linear,0 0,0 bottom,from(lightblue),to(white));
background: -webkit-gradient(linear,0 0,0 bottom,from(lightblue),to(white)); /* CSS3 PIE独自プレフィックス */
-pie-background: linear-gradient(lightblue,white); /* behaviorスクリプトPIE.htcのパス */
behavior: url(/demo/demo008/PIE.htc);
text-decoration:none;
}

#menu_bar li a:hover{
color:white; /* マウスが乗ったときのリンク文字の色 */
background: linear-gradient(blue,lightblue);
background: gradient(linear,0 0,0 bottom,from(blue),to(lightblue));
background: -webkit-gradient(linear,0 0,0 bottom,from(blue),to(lightblue)); /* CSS3 PIE独自プレフィックス */
-pie-background: linear-gradient(blue,lightblue); /* behaviorスクリプトPIE.htcのパス */
behavior: url(/demo/demo008/PIE.htc);
text-decoration:none;


}
/*▲メニューバー-------------------------------------------------------------------▲*/

補足日時：2013/11/01 07:34
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報