回答編集履歴
1
単語をご質問に合わせて調整しました。
answer
CHANGED
|
@@ -4,45 +4,45 @@
|
|
|
4
4
|
まず「メニュバーの高さの分、ヘッダースライダーの画像の位置を下げる方法」ということであればこれで済みます。
|
|
5
5
|
|
|
6
6
|
```CSS
|
|
7
|
-
/* ヘッダー
|
|
7
|
+
/* メニュバーをヘッダースライダーに被せずに上部に固定する */
|
|
8
8
|
#masthead.site-header {
|
|
9
9
|
position: sticky;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
しかしスライ
|
|
14
|
+
しかしヘッダースライダーの高さがメニュバーの分だけ画面より高くなりますし、タイトルもメニュバーの高さの分少し下にずれてしまうという問題が生じます。
|
|
15
15
|
|
|
16
|
-
これは
|
|
16
|
+
これはメニュバーの高さがわからないためにおこる問題です。
|
|
17
17
|
|
|
18
18
|
###２つ目
|
|
19
19
|
|
|
20
|
-
次に
|
|
20
|
+
次にメニュバーの高さをあらかじめ指定する方法です。
|
|
21
21
|
|
|
22
22
|
```CSS
|
|
23
|
-
/*
|
|
23
|
+
/* メニュバーの高さを指定する */
|
|
24
24
|
#masthead {
|
|
25
25
|
height: 100px;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
/*
|
|
28
|
+
/* メニュバーの高さと同じ分だけ、ヘッダースライダーの位置を下に下げる */
|
|
29
29
|
.sydney-hero-area {
|
|
30
30
|
margin-top: 100px;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
/*
|
|
33
|
+
/* メニュバーの高さと同じ分だけ、ヘッダースライダーの高さを低くして画面ぴったりにする */
|
|
34
34
|
.sydney-hero-area {
|
|
35
35
|
height: calc(100vh - 100px) !important;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
/*
|
|
38
|
+
/* メニュバーの高さと同じ分だけ、タイトルを上に移動させる */
|
|
39
39
|
.slide-inner {
|
|
40
40
|
top: calc(50% - 100px);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
こうすれば先述の問題は起こりませんが、ただし
|
|
45
|
+
こうすれば先述の問題は起こりませんが、ただしメニュバーの高さを指定しまっているので、スマホに合わせるときに別の高さを指定してやる必要があったり、またフォントサイズを変更するときにも高さを変更しなければならないなど、少しケアが面倒です。
|
|
46
46
|
|
|
47
47
|
###３つ目
|
|
48
|
-
JavaScripotを使えば、「
|
|
48
|
+
JavaScripotを使えば、「メニュバーの高さを "指定" することなく "計測" して、その分だけ各要素を調整する」ということもできます。
|