回答編集履歴
1
疑似要素を使うよう修正
answer
CHANGED
|
@@ -9,10 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
リスト項目を横に並べたいだけなら、ul要素のスタイルに`display: flex;`を指定し、li要素のスタイルには`flex: auto;`を指定するだけです。
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
どうやら、「項目の先頭に画像を表示しつつ、リスト項目の中央に内容を表示したい」らしいので、`list-style-image`を使わず、before疑似要素で画像を表示するよう修正しました。dit.さん、ありがとうございます。
|
|
13
13
|
|
|
14
|
+
そのほか、menu要素の中にul要素は入れられないし、対応しているブラウザーも少ないので、ナビゲーションにするならばnav要素に代えるべきでしょう。
|
|
15
|
+
|
|
14
16
|
```HTML
|
|
15
|
-
<
|
|
17
|
+
<nav>
|
|
16
18
|
<ul>
|
|
17
19
|
<li>1番目</li>
|
|
18
20
|
<li>2番目</li>
|
|
@@ -20,26 +22,39 @@
|
|
|
20
22
|
<li>4番目</li>
|
|
21
23
|
<li>5番目</li>
|
|
22
24
|
</ul>
|
|
23
|
-
</
|
|
25
|
+
</nav>
|
|
24
26
|
```
|
|
25
27
|
|
|
26
28
|
```CSS
|
|
27
|
-
|
|
29
|
+
nav {
|
|
28
30
|
height: 62px;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
nav ul {
|
|
32
34
|
display: flex;
|
|
33
|
-
list-style-image: url(../images/740ver2.png);
|
|
34
35
|
height: 62px;
|
|
36
|
+
padding-left: 0;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
nav ul li {
|
|
40
|
+
border: 1px solid red; /* 確認用 */
|
|
38
41
|
flex: auto;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
39
|
-
|
|
44
|
+
justify-content: center;
|
|
40
45
|
}
|
|
41
46
|
|
|
47
|
+
nav ul li:before {
|
|
48
|
+
content: "";
|
|
49
|
+
display: inline-block;
|
|
50
|
+
width: 55px; /* 画像のサイズに合わせる */
|
|
51
|
+
height: 62px; /* 画像のサイズに合わせる */
|
|
52
|
+
background-image: url(../images/740ver2.png);
|
|
53
|
+
background-size: contain;
|
|
54
|
+
vertical-align: middle;
|
|
55
|
+
}
|
|
56
|
+
|
|
42
|
-
|
|
57
|
+
nav ul li:hover {
|
|
43
58
|
background-color: #ebe5ff;
|
|
44
59
|
}
|
|
45
60
|
```
|