質問編集履歴
5
SASSの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -98,6 +98,31 @@
|
|
|
98
98
|
position: absolute;
|
|
99
99
|
right: 21px;
|
|
100
100
|
}
|
|
101
|
+
|
|
102
|
+
.vertical-middle{
|
|
103
|
+
position: absolute;
|
|
104
|
+
top: 50%;
|
|
105
|
+
transform: translateY(-50%);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.flex-row {
|
|
109
|
+
display: flex;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.btn {
|
|
113
|
+
display: inline-block;
|
|
114
|
+
text-align: center;
|
|
115
|
+
width: 155px;
|
|
116
|
+
height: 37px;
|
|
117
|
+
padding: 7px 35px 10px 35px;
|
|
118
|
+
background: transparent linear-gradient(90deg, #FA41CC 0%, #6020B0 100%) 0% 0% no-repeat padding-box;
|
|
119
|
+
border-radius: 10px;
|
|
120
|
+
box-shadow: 0px 3px 6px #00000029;
|
|
121
|
+
font-size: 14px;
|
|
122
|
+
font-weight: bold;
|
|
123
|
+
color: $white;
|
|
124
|
+
line-height: 20px;
|
|
125
|
+
}
|
|
101
126
|
```
|
|
102
127
|
|
|
103
128
|
ヘッダーの画像
|
4
タイトル変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
検証ツールを開くと、ヘッダー幅が画面サイズより広くなる
|
test
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
デザインカンプからのコーディングを行っています。
|
|
3
|
-
|
|
3
|
+
通常の画面では問題ないのですが、検証ツールを開くと、画面サイズ＜ヘッダー幅となってしまいます。
|
|
4
|
-
|
|
4
|
+
headerにwidth:100%は指定しています。
|
|
5
5
|
|
|
6
6
|
header内の要素の幅
|
|
7
7
|
・インナー幅→max-widthで1020px
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
で合計が693pxとなっています。
|
|
13
13
|
|
|
14
14
|
### 実現したいこと
|
|
15
|
-
- [ ] ヘッダーを画面幅に収める
|
|
15
|
+
- [ ] ヘッダーを画面幅に収める(検証ツール使用時)
|
|
16
16
|
|
|
17
17
|
### 発生している問題
|
|
18
18
|
|
3
header幅情報の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
デザインカンプからのコーディングを行っています。
|
|
3
3
|
headerにwidth:100%を指定しているものの、画面サイズ＜ヘッダー幅となってしまいます。
|
|
4
4
|
Bootstrapは使っていません。
|
|
5
|
+
|
|
6
|
+
header内の要素の幅
|
|
7
|
+
・インナー幅→max-widthで1020px
|
|
8
|
+
インナーの中を①left②middle③rightの3つに分けており、
|
|
9
|
+
・left→240px
|
|
10
|
+
・middle→298px
|
|
11
|
+
・right→155px
|
|
12
|
+
で合計が693pxとなっています。
|
|
5
13
|
|
|
6
14
|
### 実現したいこと
|
|
7
15
|
- [ ] ヘッダーを画面幅に収める
|
2
補足情報追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -107,4 +107,5 @@
|
|
|
107
107
|
一定の規則性はあるが、途中から変化する数値に変化がある。
|
|
108
108
|
|
|
109
109
|
### 補足情報
|
|
110
|
-
|
|
110
|
+
PCでページを開いた際は、ヘッダーは正しく表示されるのですが、
|
|
111
|
+
検証ツールを開いた瞬間に上記現象が起きます。
|
1
コードの追加（2行）
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
デザインカンプからのコーディングを行っています。
|
|
3
3
|
headerにwidth:100%を指定しているものの、画面サイズ＜ヘッダー幅となってしまいます。
|
|
4
|
+
Bootstrapは使っていません。
|
|
4
5
|
|
|
5
6
|
### 実現したいこと
|
|
6
7
|
- [ ] ヘッダーを画面幅に収める
|
|
@@ -57,6 +58,9 @@
|
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.header-left {
|
|
61
|
+
display: inline-block;
|
|
62
|
+
width: 240px;
|
|
63
|
+
|
|
60
64
|
a {
|
|
61
65
|
height: 94px;
|
|
62
66
|
position: relative;
|