回答編集履歴
2
修正
answer
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<!-- 最終的には<a>を追加するはずなので、最初に追加しておきます。 -->
|
|
16
16
|
<li><a href="">ABOUT</a></li>
|
|
17
17
|
<li><a href="">NEWS</a></li>
|
|
18
|
-
<li><a href="">SERVICE & PRODUCT</a
|
|
18
|
+
<li><a href="">SERVICE & PRODUCT</a></li>
|
|
19
19
|
<li><a href="">CONTACT</a></li>
|
|
20
20
|
</ul>
|
|
21
21
|
</header>
|
1
ソースコードにコメントを追記
answer
CHANGED
|
@@ -8,9 +8,11 @@
|
|
|
8
8
|
```HTML
|
|
9
9
|
<header>
|
|
10
10
|
<div class="logo">
|
|
11
|
+
<!-- レスポンシブを考えると、あらかじめロゴは<ul>の外に出していたほうが楽 -->
|
|
11
12
|
<a href=""><img src="img/header.png"></a>
|
|
12
13
|
</div>
|
|
13
14
|
<ul>
|
|
15
|
+
<!-- 最終的には<a>を追加するはずなので、最初に追加しておきます。 -->
|
|
14
16
|
<li><a href="">ABOUT</a></li>
|
|
15
17
|
<li><a href="">NEWS</a></li>
|
|
16
18
|
<li><a href="">SERVICE & PRODUCT</a href=""></li>
|
|
@@ -36,6 +38,7 @@
|
|
|
36
38
|
display: flex;
|
|
37
39
|
}
|
|
38
40
|
|
|
41
|
+
/* 左側に配置するロゴ */
|
|
39
42
|
header .logo {
|
|
40
43
|
display: flex;
|
|
41
44
|
align-items: center;
|
|
@@ -45,13 +48,13 @@
|
|
|
45
48
|
display: block;
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
/* 右側に配置するナビゲーション */
|
|
48
52
|
header ul {
|
|
49
|
-
margin-left: auto; /* 右側に配置 */
|
|
53
|
+
margin-left: auto; /* 右側に配置するための記述 */
|
|
50
54
|
display: flex;
|
|
51
55
|
/* justify-content: space-between; */
|
|
52
56
|
align-items: center;
|
|
53
57
|
}
|
|
54
|
-
|
|
55
58
|
header ul li {
|
|
56
59
|
/* display: inline-block; */
|
|
57
60
|
list-style-type: none;
|
|
@@ -61,11 +64,22 @@
|
|
|
61
64
|
/* line-height: 77px; */
|
|
62
65
|
line-height: 1;
|
|
63
66
|
white-space: nowrap;
|
|
64
|
-
padding: 0 40px; /* 左右の余白 */
|
|
67
|
+
padding: 0 40px; /* 左右の余白。好きなように調整してください。 */
|
|
65
68
|
}
|
|
69
|
+
|
|
70
|
+
/* 最後の<li>以外の右側に区切り線を表示 */
|
|
66
|
-
header ul li:not(:last-child) {
|
|
71
|
+
header ul li:not(:last-child)::after {
|
|
72
|
+
content: "";
|
|
73
|
+
width: 1px;
|
|
74
|
+
height: 10px;
|
|
67
|
-
|
|
75
|
+
background: #000000;
|
|
76
|
+
margin: auto 0;
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: 0;
|
|
79
|
+
bottom: 0;
|
|
80
|
+
right: 0;
|
|
68
81
|
}
|
|
82
|
+
|
|
69
83
|
header ul li a {
|
|
70
84
|
color: #000000;
|
|
71
85
|
text-decoration: none;
|