質問編集履歴

2

cssの追記

2022/01/24 14:24

投稿

shin
shin

score10

test CHANGED
File without changes
test CHANGED
@@ -43,3 +43,93 @@
43
43
  </div>
44
44
  </header>
45
45
  ```
46
+ ```css
47
+ .container-jg{
48
+ width: 100%;
49
+ width: 1146px;
50
+ margin-left: auto;
51
+ margin-right: auto;
52
+ }
53
+
54
+ header{
55
+ background-color: #000000;
56
+ width: 1920px; /* or max-widht */
57
+ height: 80px;
58
+ }
59
+
60
+ .d-flex{
61
+ display: flex;
62
+ flex-wrap: wrap;
63
+ justify-content: center;
64
+ align-items:center;
65
+ }
66
+
67
+ .header-logo img{
68
+ padding-top: 27.3px;
69
+ padding-bottom: 27.3px;
70
+ padding-right: 100px;
71
+ }
72
+
73
+ .header-list {
74
+ float: left;
75
+ list-style: none;
76
+ }
77
+ .header-list ul{
78
+ display:flex;
79
+ }
80
+ .header-list li{
81
+ font-family: "Adobe Garamond Pro";
82
+ font-weight: normal;
83
+ font-size: 18px;
84
+ letter-spacing: 0.05em;
85
+ line-height: 25px;
86
+ text-align: left;
87
+ color: #fff;
88
+ }
89
+
90
+ ul{ /*ulの余白を消す*/
91
+ margin:0;
92
+ padding:0;
93
+ }
94
+
95
+ ul li{
96
+ list-style:none; /*リスト装飾消す*/
97
+ }
98
+ .header-list li{
99
+ display:inline-block; /*リストを縦に横並び*/
100
+ }
101
+ .margin-l-r {
102
+ margin:0 60px; /*下のリストの左右に余白*/
103
+ }
104
+
105
+ .header-list li+li{ /*隣合う場所に余白*/
106
+ margin-left:20px;
107
+ }
108
+
109
+ .header-list span{
110
+ font-family: YuMincho;
111
+ font-weight: 500;
112
+ font-size: 11px;
113
+ letter-spacing: 0.05em;
114
+ line-height: 14px;
115
+ text-align: left;
116
+ color: #fff;
117
+ }
118
+ .header-item ul{ /* 追加*/
119
+ display:flex; /*追加*/
120
+ display:space-between;
121
+ }
122
+ .header-item ul li{
123
+ margin-left:20px; /*左に余白*/
124
+ }
125
+
126
+ .mark{
127
+ font-family: "Adobe Garamond Pro";
128
+ font-weight: normal;
129
+ font-size: 18px;
130
+ line-height: 34px;
131
+ text-align: left;
132
+ color: #fff;
133
+ }
134
+
135
+ ```

1

htmlの編集

2022/01/24 14:23

投稿

shin
shin

score10

test CHANGED
File without changes
test CHANGED
@@ -6,5 +6,40 @@
6
6
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-24/5f5aea7c-fddb-42a0-b0d6-acfbb9a8a59c.jpeg)
7
7
 
8
8
  ```html
9
+ <header>
10
+ <div class="container-jg d-flex">
11
+ <div class="header-logo">
12
+ <img src="..." alt="ロゴ">
13
+ </div>
14
+ <div class="header-block">
15
+ <ul class="header-list">
16
+ <li>リスト1</li>
17
+ <li>リスト2</li>
18
+ <li>リスト3</li>
19
+ <li>リスト4</li>
20
+ <li>リスト5</li>
21
+ <li>リスト6/li>
22
+ </ul>
23
+ <ul class="header-list margin-l-r">
24
+ <li><span>りすと1</span></li>
25
+ <li><span>りすと2</span></li>
26
+ <li><span>りすと3</span></li>
27
+ <li><span>りすと4</span></li>
28
+ <li><span>りすと5</span></li>
29
+ <li><span>りすと6</span></li>
30
+ </ul>
31
+ </div>
32
+ <div class="header-item">
33
+ <ul>
34
+ <li>
35
+ <a class="navbar-brand" href="..."> <img src="アイコン1" alt="" width="29" height="29"></a>
36
+ </li>
9
37
 
38
+ <li><a class="navbar-brand" href="..."> <img src="アイコン2" alt="" width="29" height="29"></a>
39
+ </li>
40
+ <li class="mark">マーク</li>
41
+ </ul>
42
+ </div>
43
+ </div>
44
+ </header>
10
45
  ```