質問編集履歴

1

コードを入力しました 試してできなかったことを入力しました

2022/02/27 08:51

投稿

kamaken
kamaken

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1 +1,174 @@
1
1
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-27/7d02835a-3f51-4c5c-ac1d-f4ece1de0966.png)
2
+
3
+
4
+ html scssでホームページを作っています。
5
+
6
+ ### 該当のソースコード
7
+ ```html
8
+ <!DOCTYPE html>
9
+ <html lang="ja">
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
+ <title>Document</title>
15
+ <link rel="stylesheet" href="css/style.css">
16
+ </head>
17
+ <body>
18
+ <header class="header">
19
+ <div class="header__inner inner">
20
+ <h1 class="header__logo"><a href="/"><img src="img/logo.svg" alt=""></a></h1>
21
+ <ul class="header__nav">
22
+ <li><a href=""><img src="img/icon-01.svg" alt="">ホーム</a></li>
23
+ <li><a href=""><img src="img/icon-02.svg" alt="">当院について</a></li>
24
+ <li><a href=""><img src="img/icon-03.svg" alt="">診療案内</a></li>
25
+ <li><a href=""><img src="img/icon-04.svg" alt="">スタッフ紹介</a></li>
26
+ <li><a href=""><img src="img/icon-05.svg" alt="">スタッフブログ</a></li>
27
+ <li><a href=""><img src="img/icon-07.svg" alt="">お問い合わせ</a></li>
28
+ </ul>
29
+ <div class="header__right">〒166-0001 東京都杉並区阿佐谷北7-3-1</div>
30
+ <a href="/"><img src="img/icon_tel-1.svg" alt="">03-1234-5678</a></div>
31
+
32
+
33
+ </div>
34
+ </header>
35
+ </body>
36
+ </html>
37
+ ```
38
+ ```scss
39
+ $color-main: #1391E6;
40
+ $color-sub01: #0060A0;
41
+ $color-sub02: #DFF1FD;
42
+ $color-accent: #EE5A6D;
43
+ $color-text: #333333;
44
+
45
+ $layout-width-inner: 1200px;
46
+
47
+ //ブレークポイント
48
+ $breakpoints: (
49
+ "sp": "(max-width: 767px)",
50
+ "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner -1px})",
51
+ "pc": "(min-width: #{$layout-width-inner})",
52
+ ) !default;
53
+
54
+ //メディアクエリー
55
+ @mixin mq($breakpoint: sp) {
56
+ @media #{map-get($breakpoints, $breakpoint)} {
57
+ @content;
58
+ }
59
+ }
60
+
61
+ *,
62
+ *::before,
63
+ *::after {
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ html,
68
+ body {
69
+ padding: 0;
70
+ margin: 0;
71
+ }
72
+ body {
73
+ font-family: "M PLUS Rounded 1c";
74
+ font-size: 14px;
75
+ line-height: 1.6;
76
+ background: #fff;
77
+ }
78
+
79
+ img {
80
+ height: auto;
81
+
82
+ }
83
+
84
+ ul,
85
+ ol {
86
+ list-style: none;
87
+ padding: 0;
88
+ margin: 0;
89
+ }
90
+
91
+
92
+ h1,
93
+ h2,
94
+ h3,
95
+ h4,
96
+ h5,
97
+ h6 {
98
+ margin: 0;
99
+ padding: 0;
100
+ }
101
+
102
+ a {
103
+ color: inherit;
104
+ }
105
+
106
+ .inner {
107
+ width: $layout-width-inner;
108
+ max-width: 100%;
109
+ margin: 0 auto;
110
+
111
+ }
112
+
113
+ .header {
114
+ background: #FFFFFF;
115
+ height: 80px;
116
+
117
+ }
118
+
119
+ .header__inner {
120
+ display: flex;
121
+ align-items: center;
122
+ height: inherit;
123
+
124
+ }
125
+
126
+ .header__logo {
127
+ width: 270px;
128
+ margin-right: 166px;
129
+
130
+
131
+ img {
132
+ display: block;
133
+ }
134
+ }
135
+
136
+ .header__nav {
137
+ display: flex;
138
+ align-items: center;
139
+ margin-left: auto;
140
+
141
+ li {
142
+ &:not(:first-child) {
143
+ margin-left: 40px;
144
+ white-space: nowrap;
145
+ width: 11px;
146
+ }
147
+
148
+ a {
149
+ color: $color-text;
150
+ text-decoration: none;
151
+ }
152
+ img {
153
+ width: 24px;
154
+ }
155
+ }
156
+ }
157
+
158
+ .header__right {
159
+ align-items: center;
160
+ }
161
+
162
+
163
+
164
+
165
+
166
+
167
+
168
+ ```
169
+
170
+ ### 試したこと
171
+ youtubeなどでalign-itemsやflex-boxをキーワードに動画を
172
+ 見て解決しようとしたが無理でした。
173
+
174
+