回答編集履歴

1

疑似要素を使うよう修正

2020/09/17 01:51

投稿

Daregada
Daregada

スコア11990

test CHANGED
@@ -20,13 +20,17 @@
20
20
 
21
21
 
22
22
 
23
+ どうやら、「項目の先頭に画像を表示しつつ、リスト項目の中央に内容を表示したい」らしいので、`list-style-image`を使わず、before疑似要素で画像を表示するよう修正しました。dit.さん、ありがとうございます。
24
+
25
+
26
+
23
- そのほか、menu要素の中にul要素は入れられないし、対応しているブラウザーも少ないので、`<div class="menu"></div>`で替すべきでしょう。
27
+ そのほか、menu要素の中にul要素は入れられないし、対応しているブラウザーも少ないので、ナビゲーションにするならばnav要素にえるべきでしょう。
24
28
 
25
29
 
26
30
 
27
31
  ```HTML
28
32
 
29
- <div class="menu">
33
+ <nav>
30
34
 
31
35
  <ul>
32
36
 
@@ -42,7 +46,7 @@
42
46
 
43
47
  </ul>
44
48
 
45
- </div>
49
+ </nav>
46
50
 
47
51
  ```
48
52
 
@@ -50,7 +54,7 @@
50
54
 
51
55
  ```CSS
52
56
 
53
- .menu {
57
+ nav {
54
58
 
55
59
  height: 62px;
56
60
 
@@ -58,29 +62,55 @@
58
62
 
59
63
 
60
64
 
61
- .menu ul {
65
+ nav ul {
62
66
 
63
67
  display: flex;
64
68
 
65
- list-style-image: url(../images/740ver2.png);
69
+ height: 62px;
66
70
 
67
- height: 62px;
71
+ padding-left: 0;
68
72
 
69
73
  }
70
74
 
71
75
 
72
76
 
73
- .menu ul li {
77
+ nav ul li {
78
+
79
+ border: 1px solid red; /* 確認用 */
74
80
 
75
81
  flex: auto;
76
82
 
83
+ display: flex;
84
+
85
+ align-items: center;
86
+
77
- border: 1px solid red; /* 確認用 */
87
+ justify-content: center;
78
88
 
79
89
  }
80
90
 
81
91
 
82
92
 
93
+ nav ul li:before {
94
+
95
+ content: "";
96
+
97
+ display: inline-block;
98
+
99
+ width: 55px; /* 画像のサイズに合わせる */
100
+
101
+ height: 62px; /* 画像のサイズに合わせる */
102
+
103
+ background-image: url(../images/740ver2.png);
104
+
105
+ background-size: contain;
106
+
107
+ vertical-align: middle;
108
+
109
+ }
110
+
111
+
112
+
83
- .menu ul li:hover {
113
+ nav ul li:hover {
84
114
 
85
115
  background-color: #ebe5ff;
86
116