ヘッダーメニューのレスポンシブ化

現在作成しているWebページのヘッダーを、画面サイズに合わせて子要素(logo,menu1~menu4)の比率を変えずに、かつ、背景画像が見切れることなく縮小したいのですが、どうすればいいでしょうか。

要素headerには幅、高さの指定はなし
headerの子要素のheadermenuのmax-widthは1034px
headermenuの子要素のlogo(サイトロゴ)は幅209px、高さ124px
menu1~menu4(メニューボタン)は幅170px、高さ48px です

ご提示よろしくお願いいたします。

HTML
1	<header id="header">
2		<nav>
3			<ul id="headermenu">
4				<li class="logo"><a href="http://example.co.jp">サイトロゴ</a></li>
5				<li class="buttons menu1"><a href="http://example.co.jp/hoge/">メニュー1</a></li>
6				<li class="buttons menu2"><a href="http://example.co.jp/hoge/">メニュー2</a></li>
7				<li class="buttons menu3"><a href="http://example.co.jp/hoge/">メニュー3</a></li>
8				<li class="buttons menu4"><a href="http://example.co.jp/hoge/">メニュー4</a></li>
9			</ul>
10		</nav>
11	</header>

css
1#header{
2	display:block;
3	margin:0px auto;
4	padding:10px 0px 0px 0px;
5	text-align:center;
6}
7
8#header ul#headermenu{
9	margin:0px auto;
10	padding:0px auto;
11	list-style: none outside;
12	text-align: left;
13	max-width:1034px;
14	background-color:rgba(128,128,128,0.8);
15	border-radius:1rem;
16}
17#header ul#headermenu li{
18	display:inline-block;
19	vertical-align: middle;
20	text-align:left;
21	padding:0px;
22	position:relative;
23	text-indent:-10000px;
24}
25#header ul#headermenu li a{
26	display:block;
27	width:100%;
28	height:100%;
29	overflow:hidden;
30	font-size:0px;
31	line-height:0px;
32	overflow:hidden;
33	background-repeat: no-repeat;
34}
35#header ul#headermenu li.logo{
36	width:209px;
37	height:124px;
38	margin-right:20px;
39}
40#header ul#headermenu li.logo a{
41	background-image:url("img/mainlogo.png");
42	background-position: 0px 0px;
43}
44#header ul#headermenu li.buttons{
45	background-image:url("img/headermenu.png");
46	width:170px;
47	height:48px; 
48	margin:16px 10px 0px 0px;
49	background-position: 0px 0px;
50	margin-bottom:17px;
51}
52#header ul#headermenu li.buttons:last-child{
53	margin-right:0px !important;
54}
55#header ul#headermenu li.buttons.menu1{
56	background-position: 0px 0px;
57}
58#header ul#headermenu li.buttons.menu1:hover{
59	background-position: 0px -48px;
60}
61#header ul#headermenu li.buttons.menu2{
62	background-position: -170px 0px;
63}
64#header ul#headermenu li.buttons.menu2:hover{
65	background-position: -170px -48px;
66}
67#header ul#headermenu li.buttons.menu3{
68	background-position: -340px 0px;
69}
70#header ul#headermenu li.buttons.menu3:hover{
71	background-position: -340px -48px;
72}
73#header ul#headermenu li.buttons.menu4{
74	background-position: -510px 0px;
75}
76#header ul#headermenu li.buttons.menu4:hover{
77	background-position: -510px -48px;
78}

kei344

2017/03/14 02:08

例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html また、「比率を変えずに」はどことどこの比率をどのようにしたいのかを、質問文に具体的に追記してください。

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

回答3件

質問者さんが実現したい動作はこのような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #header {
13            display: block;
14            margin: 0 auto;
15            padding: 10px 0 0 0;
16            text-align: center;
17        }
18
19        #header ul#headermenu {
20            margin: 0 auto;
21            padding: 0 auto;
22            list-style: none outside;
23            text-align: left;
24            max-width: 1034px;
25            background-color: rgba(128, 128, 128, 0.8);
26            border-radius: 1rem;
27        }
28
29        #header ul#headermenu li {
30            display: inline-block;
31            vertical-align: middle;
32            text-align: left;
33            padding: 0;
34            position: relative;
35            text-indent: -10000px;
36        }
37
38        #header ul#headermenu li a {
39            display: block;
40            width: 100%;
41            height: 100%;
42            overflow: hidden;
43            font-size: 0;
44            line-height: 0;
45            background-repeat: no-repeat;
46        }
47
48        #header ul#headermenu li.logo {
49            width: 20%;
50            height: 124px;
51            margin-right: 20px;
52        }
53
54        #header ul#headermenu li.logo a {
55            background-image: url("https://placehold.jp/3d4070/ffffff/150x150.png?text=image");
56            background-position: 0 0;
57        }
58
59        #header ul#headermenu li.buttons {
60            background-image: url("https://placehold.jp/3d4070/ffffff/150x150.png?text=image");
61            width: 16%;
62            height: 48px;
63            margin: 17px 0 0 0;
64            background-position: 0 0;
65            margin-bottom: 17px;
66        }
67
68        #header ul#headermenu li.buttons:last-child {
69            margin-right: 0 !important;
70        }
71
72        #header ul#headermenu li.buttons.menu1 {
73            background-position: 0 0;
74        }
75
76        #header ul#headermenu li.buttons.menu1:hover {
77            background-position: 0 -48px;
78        }
79
80        #header ul#headermenu li.buttons.menu2 {
81            background-position: -170px 0;
82        }
83
84        #header ul#headermenu li.buttons.menu2:hover {
85            background-position: -170px -48px;
86        }
87
88        #header ul#headermenu li.buttons.menu3 {
89            background-position: -340px 0;
90        }
91
92        #header ul#headermenu li.buttons.menu3:hover {
93            background-position: -340px -48px;
94        }
95
96        #header ul#headermenu li.buttons.menu4 {
97            background-position: -510px 0;
98        }
99
100        #header ul#headermenu li.buttons.menu4:hover {
101            background-position: -510px -48px;
102        }
103    </style>
104</head>
105<body>
106<header id="header">
107    <nav>
108        <ul id="headermenu">
109            <li class="logo"><a href="http://hoge.jp">サイトロゴ</a></li>
110            <li class="buttons menu1"><a href="http://hoge.jp/hoge/">メニュー1</a></li>
111            <li class="buttons menu2"><a href="http://hoge.jp/hoge/">メニュー2</a></li>
112            <li class="buttons menu3"><a href="http://hoge.jp/hoge/">メニュー3</a></li>
113            <li class="buttons menu4"><a href="http://hoge.jp/hoge/">メニュー4</a></li>
114        </ul>
115    </nav>
116</header>
117</body>
118</html>

投稿2017/03/13 21:24

s8_chu

総合スコア14731

nosonosolife

2017/03/14 20:48

回答ありがとうございます。このコードでやってみましたところ、画面を縮小した際に要素の背景画像が見切れます...

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

幅を狭くしつつ縦横比を保つのは、案外難しいです。

ひとまず px で指定せず、% で width や background-size や background-position を指定することをしてみてはいかがでしょうか。（ height は % では上手く指定できないと思いますが）

【background-sizeプロパティについてまとめ｜ Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/html_css/post6015.html

【背景画像の位置の設定(background-position) - 背景プロパティ - スタイルシート入門】
http://www.webword.jp/cssguide/ref-back/index5.html

比率という意味では vw が便利です。

【CSS には vw, vh, vmin, vmax という単位がある｜ Developers.IO】
http://dev.classmethod.jp/ria/html5/css-length-viewport/

【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】
http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html

【[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary】
http://phiary.me/css-viewport-units-vw-vh/

投稿2017/03/14 17:41

kei344

総合スコア69400

nosonosolife

2017/03/14 20:51

回答ありがとうございます。 %やvwでの指定はやってみたのですが、特にbackground-positionがなかなか難しいです... 簡単に計算する方法はないでしょうか?

kei344

2017/03/15 02:11

「横並び」で「縦横比が変わらない」なら個別にbackground-positionを指定せずに #headermenu に1枚指定して background-size を横だけ100%指定するとかですかね。

nosonosolife

2017/03/15 13:48

ごめんなさい、その方法はちょっと...

kei344

2017/03/15 13:53

> その方法はちょっと... ちょっと何なのでしょうか。

nosonosolife

2017/03/15 14:08

menu1~menu4の背景画像は、一枚の画像からbackground-positionで割り当てているんですが、そのままでの縮小はできないですか？

kei344

2017/03/15 14:14

「簡単に計算する方法」を聞かれたのでは？ > そのままでの縮小はできないですか？出来なくはないですが、上手くコントロールするのは慣れが必要でしょう。

nosonosolife

2017/03/15 14:21

あの、background-positionの%指定の簡単な計算方法を教えてほしい、ということなんですが...

kei344

2017/03/15 14:29

どういう方法でやって難しいとおっしゃっておられるかわかりませんが、比率がわかっているならそれで出せますよ。

nosonosolife

2017/03/15 16:17

ごめんなさい、具体的に教えてほしいです... あと、logoとmenu1~menu4の高さを%で指定したところ、ブラウザ上では高さが0になってしまうのですが、解決方法をご提示していただけないでしょうか。

kei344

2017/03/15 16:28

「具体的に」と言われても、ご自身でされた方法がわかりませんので･･･。わからないのであれば背景で処理せずにimg要素でやればいいのでは？いまいち私ではどういう質問をされているかを読み解く力が不足しているようなので、すみませんがお役に立てそうもありません。期待させてしまっていたら申し訳ありません。

nosonosolife

2017/03/15 17:20

「比率がわかっているならそれで出せますよ。」って言ったんですから、具体的な計算方法を説明してくださいよ。

nosonosolife

2017/03/15 17:23

「「具体的に」と言われても、ご自身でされた方法がわかりませんので･･･。」まだやってませんよ。

nosonosolife

2017/03/15 17:29

「あと、logoとmenu1~menu4の高さを%で指定したところ、ブラウザ上では高さが0になってしまうのですが、解決方法をご提示していただけないでしょうか。」は、 logoとmenu1~menu4の要素のcssを、 #header ul#headermenu li.logo{ width:20.212%; height:100% } #header ul#headermenu li.buttons{ width:16.441%; height:38.709%; } こうしたところ、ブラウザ上では高さが0になってしまったので、解決方法を提示してほしい、ということを言っていたんです。

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

自己解決