回答編集履歴

4

修正

2020/04/10 23:14

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  画面上部の右側に配置された「お問い合わせ / 資料請求はこちら」ボタンが、
34
34
 
35
- ブラウザ内で、画面中央方向 (左方向) にズレて表示されてしまっているということだと理解しました。
35
+ ブラウザ内で、画面の内側 (左方向) にズレて表示されてしまっているということだと理解しました。
36
36
 
37
37
 
38
38
 

3

修正

2020/04/10 23:14

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  画面上部の右側に配置された「お問い合わせ / 資料請求はこちら」ボタンが、
34
34
 
35
- ブラウザ内で、左右の中央方向に寄って表示されてしまっているということだと理解しました。
35
+ ブラウザ内で、画面中央方向 (左方向) ズレて表示されてしまっているということだと理解しました。
36
36
 
37
37
 
38
38
 
@@ -88,7 +88,7 @@
88
88
 
89
89
  width: calc(100% - 15px - 15px); /* 15pxは左右の余白。調整してください。 */
90
90
 
91
- max-width: 1170px; /* コンテンツエリアの最大幅 */
91
+ max-width: 1200px; /* コンテンツエリアの最大幅。左右の余白が均等になります。 */
92
92
 
93
93
  height: 100%;
94
94
 

2

修正

2020/04/10 22:36

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  画面上部の右側に配置された「お問い合わせ / 資料請求はこちら」ボタンが、
34
34
 
35
- ブラウザの左側に表示されてしまっているということだと理解しました。
35
+ ブラウザ内で、左右中央方向寄って表示されてしまっているということだと理解しました。
36
36
 
37
37
 
38
38
 

1

問題が何か理解できたので、回答に追記しました。

2020/04/10 16:03

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,3 +1,155 @@
1
1
  こちら、参考になりますか?
2
2
 
3
3
  [画像(img)にbox-sizing:border-boxでサイズ100%+ボーダーでもコンテンツからはみ出さない]( https://securavita.net/blog-img-box-sizing/)
4
+
5
+
6
+
7
+ ---
8
+
9
+ 追記
10
+
11
+
12
+
13
+ コメント内の以下のやりとりから、
14
+
15
+
16
+
17
+ > ああ、画像が分かっていないのですね。了解。
18
+
19
+ > [1] C,Dによる合成です。 いわゆる、ボタンです。
20
+
21
+ > [2] A
22
+
23
+
24
+
25
+ 「画像が内側に入り込んでしまいます。」
26
+
27
+
28
+
29
+ というのは、
30
+
31
+
32
+
33
+ 画面上部の右側に配置された「お問い合わせ / 資料請求はこちら」ボタンが、
34
+
35
+ ブラウザの左側に表示されてしまっているということだと理解しました。
36
+
37
+
38
+
39
+ ↓↓↓
40
+
41
+ [こちらのように実装してみました](https://codepen.io/new1ro/pen/QWjwENB)
42
+
43
+
44
+
45
+ ---
46
+
47
+
48
+
49
+ left: -350px;といった指定の仕方をすると画面幅によってズレるので使わず、
50
+
51
+ 例えば以下のような形だと実装できると思います。
52
+
53
+
54
+
55
+ ```HTML
56
+
57
+ <header>
58
+
59
+ <div class="container">
60
+
61
+ <div class="left-area">
62
+
63
+ <a href="/"><img src="logo.png" alt="ロゴなど"></a>
64
+
65
+ </div>
66
+
67
+ <div class="right-area">
68
+
69
+ <a class="headerContact">お問い合わせ / 資料請求はこちら</a>
70
+
71
+ </div>
72
+
73
+ </div>
74
+
75
+ </header>
76
+
77
+ ```
78
+
79
+ ```CSS
80
+
81
+ header {
82
+
83
+ height: 75px; /* ヘッダーの高さ。調整してください。 */
84
+
85
+ }
86
+
87
+ .container {
88
+
89
+ width: calc(100% - 15px - 15px); /* 15pxは左右の余白。調整してください。 */
90
+
91
+ max-width: 1170px; /* コンテンツエリアの最大幅 */
92
+
93
+ height: 100%;
94
+
95
+ margin: 0 auto;
96
+
97
+ position: relative;
98
+
99
+
100
+
101
+ display: flex; /* 子要素を横並びにする */
102
+
103
+ align-items: center; /* 子要素を上下中央揃えにする */
104
+
105
+ }
106
+
107
+
108
+
109
+ .left-area {
110
+
111
+
112
+
113
+ }
114
+
115
+ .right-area {
116
+
117
+ margin-left: auto; /* ヘッダー内で右側に寄せる */
118
+
119
+ }
120
+
121
+
122
+
123
+ .headerContact {
124
+
125
+ display: inline-block;
126
+
127
+ font-size: 14px;
128
+
129
+ font-weight: normal;
130
+
131
+ /* float:right; */
132
+
133
+ background-color: #da6b64;
134
+
135
+ color: White;
136
+
137
+ padding :11px 40px;
138
+
139
+ border-radius: 25px;
140
+
141
+ /*
142
+
143
+ position: relative;
144
+
145
+ top: -5px;
146
+
147
+ left:-350px;
148
+
149
+ */
150
+
151
+ cursor:pointer;
152
+
153
+ }
154
+
155
+ ```