- ベストアンサー
ヘッダー画像固定のもう一枚画像を重ねる
- ヘッダー画像にリンク用の画像を重ねる方法を知っていますか？
- ヘッダー上部固定でセンタリングを効かせつつ、リンク用の小さい画像を重ねる方法はありますか？
- ヘッダー画像の固定と中央寄せに加えて、リンク用の画像をヘッダーに重ねる方法を教えてください。
- shanks8532
- お礼率44% (4/9)
- ホームページ作成ソフト
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞ズームアウトすると１枚目の画像がメニューバーに対して左にずれてしまいます。 ずれを無くすにはどうやったら治せるのでしょうか？ ⇒HP 画像の一部にリンクでその部分のみ画像変化 - ホームページ作成ソフト - 教えて！goo( http://okwave.jp/qa/q8326352.html ) で、概略は分かると思います。 そのHTML(CSSじゃない)と比較して、検索エンジンや将来のメンテナンスも考えると、HTML本文が如何に簡潔で分かりやすいか一目瞭然だと思います。あのようにHTMLに文書構造しか書かないことによって、デザインを全く異なるものへの変更もできます。 「HP 画像の一部にリンクでその部分のみ画像変化」は、固定サイズでしたが、現在主流のリキッドデザインにすることも、できるのです。サイズや位置の指定がpxから%に変更します。(ちょっとしたテクニックが必要ですが・・) ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) をOpera以外のブラウザで訪問して、メニューの[表示]→[スタイル(シート)]で、色々なスタイルを選択すると、デザインが劇的に変化しますし、印刷プレビューだとリンク先URMLまで表示される・・・。 スタイルシートを使うと言うことは ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ・文書構造(HTML)とプレゼンテーションを分離する のが最大の目的なのです。それによって、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」のです。 デザインのためにHTMLを書かないこと。これを最初のスタートにしなければならないと言う事です。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
プレゼンテーションはスタイルシートの導入で格段に自由度はましましたが、あくまでプレゼンテーションは文書構造と一体の物です。 ある要素を配置するときは、その文書構造に逆らってということはないはずです。逆に言うと良いプレゼンテーションは文書構造にも従っているはずです。 この基本がありますから、ふたつの要素を重ねると言うことは、そのふたつの要素は必ずひとつの親ブロックに属するか、一方がもうひとつに属しているはずです。 うまく行かないのは、その原則を外れてしまっているからです。 ＞ヘッダー画像上部固定をしていまして、さらにセンタリングもして全体を中央寄せしてます。 これは背景ではなく画像ですよね。 ＞そのヘッダー画像にもう一枚リンク用の画像をヘッダー画像右側に重ねたいのですが、 両方共通のブロックに属するか、一方に属さないとうまく行きません。 [例] <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; } /*▲メニューバー-------------------------------------------------------------------▲*/
お礼
ORUKA1951さん、リンクを読み返してなんとか希望のデザインにすることが出来ました。有難うございました。