teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問ヘッダーのリストを均等に揃えたい

編集履歴

回答編集履歴

2

修正

2020/04/19 06:22

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  <li><a href="">NEWS</a></li>
34
34
 
35
- <li><a href="">SERVICE & PRODUCT</a href=""></li>
35
+ <li><a href="">SERVICE & PRODUCT</a></li>
36
36
 
37
37
  <li><a href="">CONTACT</a></li>
38
38
 

1

ソースコードにコメントを追記

2020/04/19 06:22

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -18,11 +18,15 @@
18
18
 
19
19
  <div class="logo">
20
20
 
21
+ <!-- レスポンシブを考えると、あらかじめロゴは<ul>の外に出していたほうが楽 -->
22
+
21
23
  <a href=""><img src="img/header.png"></a>
22
24
 
23
25
  </div>
24
26
 
25
27
  <ul>
28
+
29
+ <!-- 最終的には<a>を追加するはずなので、最初に追加しておきます。 -->
26
30
 
27
31
  <li><a href="">ABOUT</a></li>
28
32
 
@@ -74,6 +78,8 @@
74
78
 
75
79
 
76
80
 
81
+ /* 左側に配置するロゴ */
82
+
77
83
  header .logo {
78
84
 
79
85
  display: flex;
@@ -92,9 +98,11 @@
92
98
 
93
99
 
94
100
 
101
+ /* 右側に配置するナビゲーション */
102
+
95
103
  header ul {
96
104
 
97
- margin-left: auto; /* 右側に配置 */
105
+ margin-left: auto; /* 右側に配置するための記述 */
98
106
 
99
107
  display: flex;
100
108
 
@@ -103,8 +111,6 @@
103
111
  align-items: center;
104
112
 
105
113
  }
106
-
107
-
108
114
 
109
115
  header ul li {
110
116
 
@@ -124,15 +130,37 @@
124
130
 
125
131
  white-space: nowrap;
126
132
 
127
- padding: 0 40px; /* 左右の余白 */
133
+ padding: 0 40px; /* 左右の余白。好きなように調整してください。 */
128
134
 
129
135
  }
130
136
 
131
- header ul li:not(:last-child) {
132
137
 
138
+
139
+ /* 最後の<li>以外の右側に区切り線を表示 */
140
+
141
+ header ul li:not(:last-child)::after {
142
+
143
+ content: "";
144
+
145
+ width: 1px;
146
+
147
+ height: 10px;
148
+
133
- border-right: 1px solid #000000;
149
+ background: #000000;
150
+
151
+ margin: auto 0;
152
+
153
+ position: absolute;
154
+
155
+ top: 0;
156
+
157
+ bottom: 0;
158
+
159
+ right: 0;
134
160
 
135
161
  }
162
+
163
+
136
164
 
137
165
  header ul li a {
138
166