写真の上にメニューを表示させたい。

###質問
最近いろいろ触り始めた初心者です。
写真の上にメニューを表示させる方法がわかりません...
どうしたらうまく表示できますか？
また、画面サイズを変更するとメニューがずれてしまいます。
これの対処法もお願いします。

写真の上にメニューを貼って
http://msgo.bandainamco-ol.jp/member/
ここのようなメニューバーを作りたいです。
飛び出してくるのはまだ理解すらできなさそうなので、
飛び出てこない感じで押したら飛ぶというシンプルな感じで
行きたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<html>
4<head>
5	<meta charset="utf-8" />
6	<title>W-headsnake</title>
7	<link rel="stylesheet" type="text/css" href="../css/main.css">
8</head>
9<body>
10	<div id="bg">
11		<div id="main">
12				<header>
13					<p class="resizeimage">
14						<img src="../img/bar.png">
15					</p>
16					<ul id="nav">
17						<li><a href="">TESTA</a></li>
18						<li><a href="">TESTB</a></li>
19						<li><a href="">TESTC</a></li>
20						<li><a href="">TESTD</a></li>
21					</ul>
22				</header>
23				<div id="side">
24
25				</div>
26				<div id="contents">
27					<h1>新着情報</h1>
28					<p>新宿で新種の恐竜の化石が発見されました。<br>警視庁によれば昨夜17時ごろ、地面から
29					骨が生えていると警察に110番通報があり、調査の結果１００万年前の新種の恐竜<br>あることが分かりました。今後は文部科学省が調査するということです.
30					</p>
31				</div>
32			</div>
33				<footer id="footer">
34					<p id="C">FOOTER
35					</p>
36				</footer>
37			</div>
38		</div>
39	</div>
40</body>
41</html>

css
1#bg {
2background: #00000B;
3height: 100%;
4width: 100%;
5}
6
7header {
8	text-align: center;
9}
10p.resizeimage img { 
11	width: 55%;
12}
13
14#nav{
15	position: absolute; 
16	top: 15px;
17	left: 750px;
18}
19

行動規範の内容に同意します

回答2件

参考サイトは幅固定のレイアウトですが、
つくりたいものは幅可変のレイアウトということでよろしいですか？

まず現在作っているものが、ブラウザの幅を変えるとメニューがズレてしまう根本的な原因は、
コンテナや画像のサイズが%という相対単位で設定されているのに、メニューの座標はpx単位で固定されているからです。
コンテナや画像が%単位で可変であるならば、その上にかぶせる座標位置も同じ相対単位の%で指定してやらねばなりません。

%の場合、何を基準に割合を指定するかといえば、ザックリ言うと親要素のボックスサイズとなります。
（※厳密にはプロパティ毎に基準とするボックスやそのボックスのどの領域を基準とするのかは微妙に異なります）
%で相対的にサイズや位置の指定をするのであれば、CSSで%単位を使用した場合の挙動について少し詳細に調べる必要があります。

kei344さんが使っているvw、vhも相対的な割合を指定することが出来る単位ですが、%と違って基準としているものは常にviewportのサイズです。どこで使用しても常に同じ基準を元にサイズ指定ができるので、おそらく%よりは理解しやすいかと思われます。

さて基本的には全体を相対的な単位を使ってサイズ・位置の指定をすれば可変レイアウトを作ることはできるのですが、そこで問題となるのが「テキスト」です。

今回、メニューはテキストで表示する前提であると思いますが、文字サイズは指定しなければ通常16px相当のサイズで表示され、これは画面サイズと連動しません。
従って、画面幅が狭くなってきて、メニューの文字を全て表示するのに必要なサイズを切ってしまった場合、ボックス内での折り返しが発生することになります。

高さ成り行きの通常のレイアウト部分であればこれは問題になりませんが、今回のように「画像の上に（その中にぴったり収まるように）文字を重ねて配置する」というデザインの場合、大きな問題となります。
文字サイズにvw単位を使えば画面幅に応じて文字サイズも滑らかに拡大縮小する状態を作ることは出来ますが、現状のブラウザ環境ではIEとEdgeが最大値・最小値（vmax,vmin）をサポートしていませんので、そのあたりを考慮して更に一工夫する必要が出てきます。

今回の質門には直接関係ないのでこれ以上は控えますが、まず可変レイアウトで画像の上にちゃんとメニューを重ねられるようになったら、次は文字サイズの制御も考えてみましょう。

投稿2016/09/25 16:45

aKusano

総合スコア3763

ベストアンサー

とりあえず </div> が2個多いです。位置については様々な固定方法がありますが、下記では画面幅を基準に合わせてあります。

CSS
1body {
2	margin: 0;
3}
4#bg {
5	background: #00000B;
6	min-height: 100vh;
7	width: 100vw;
8}
9
10header {
11	text-align: center;
12}
13.resizeimage {
14	margin: 0;
15}
16p.resizeimage img { 
17	width: 55vw;
18}
19
20#nav{
21	position: fixed;
22	top: 15px;
23	right: 22.5vw;
24}

HTML
1<div id="bg">
2	<div id="main">
3		<header>
4			<p class="resizeimage">
5				<img src="https://placehold.jp/24/cc9999/993333/350x150.png">
6			</p>
7			<ul id="nav">
8				<li><a href="">TESTA</a></li>
9				<li><a href="">TESTB</a></li>
10				<li><a href="">TESTC</a></li>
11				<li><a href="">TESTD</a></li>
12			</ul>
13		</header>
14		<div id="side">
15
16		</div>
17		<div id="contents">
18			<h1>新着情報</h1>
19			<p>新宿で新種の恐竜の化石が発見されました。<br>警視庁によれば昨夜17時ごろ、地面から
20			骨が生えていると警察に110番通報があり、調査の結果１００万年前の新種の恐竜<br>あることが分かりました。今後は文部科学省が調査するということです.
21			</p>
22		</div>
23		<footer id="footer">
24			<p id="C">FOOTER
25			</p>
26		</footer>
27	</div>
28</div>
29```**動くサンプル：**[https://jsfiddle.net/qt4v2xgh/](https://jsfiddle.net/qt4v2xgh/)
30
31---
32
33【CSS には vw, vh, vmin, vmax という単位がある ｜ Developers.IO】
34[http://dev.classmethod.jp/ria/html5/css-length-viewport/](http://dev.classmethod.jp/ria/html5/css-length-viewport/)
35
36【[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary】
37[http://phiary.me/css-viewport-units-vw-vh/](http://phiary.me/css-viewport-units-vw-vh/)
38
39【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】
40[http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html](http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html)