display:flexがききません

前提・実現したいこと

display:flex　がききません。なぜでしょうかは？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>クリスタ　初級</title>
11</head>
12
13<body>
14 <header>
15  
16   <div class="header-menu">
17    <h1 class="header-left">クリ★スタ</h1>
18    <ul class="header-top">
19     <li><a href="#">About</a></li>
20     <li><a href="#">Service</a></li>
21     <li><a href="#">Contents</a></li>
22    </ul>
23   </div>
24   <div class="header-image">
25    <div class="kv-copy">
26     <h1>Cresta Design.</h1>
27    </div>
28   </div>
29 </header>
30
31 <main>
32  <section>
33   <div class="container">
34
35    <h2 class="section-title">About</h2>
36    <div class="top-text">
37     <h3>ミニマルで<br>洗練されたデザインを。</h3>
38     <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
39    </div>
40   </div>
41  </section>
42  <section>
43   <div class="container">
44    <h2 class="section-title">Service</h2>
45    <ul class="service-list">
46     <li class="service-item">
47      <img src="img/service-image@2x.jpg">
48      <div class="service-text left">
49
50       <h3>リリース時のサポートで<br>サービスのブランディングを</h3>
51       <p>弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
52      </div>
53
54     </li>
55     <li class="service-item">
56
57      <div class="service-text right">
58       <h3>リリース後のサポートで<br>効果を最大化させる</h3>
59       <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
60      </div>
61      <img src="img/service-image02@2x.jpg">
62     </li>
63    </ul>
64   </div>
65  </section>
66
67  <section>
68   <div class="container">
69    <h2 class="section-title">News</h2>
70    <ul div="card-list">
71     <li class="card-item">
72      <a href="#!">
73       <div class="card-image">
74        <img src="img/card-image1@2x.jpg">
75       </div>
76       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
77      </a>
78     </li>
79     <li class="card-item">
80      <a href="#!">
81       <div class="card-image">
82        <img src="img/card-image2@2x.jpg">
83       </div>
84       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
85      </a>
86     </li>
87
88     <li class="card-item">
89      <a href="#!">
90       <div class="card-image">
91        <img src="img/card-image3@2x.jpg">
92       </div>
93       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
94      </a>
95     </li>
96    </ul>
97   </div>
98  </section>
99
100  <section>
101   <div class="container">
102
103    <h3 class="section-contact">お問い合わせ</h3>
104    <ul class="contact-list">
105     <li class="contact-item">
106      <p>担当者名</p>
107      <input type="text">
108     </li>
109     <li class="contact-item">
110      <p>電話番号</p>
111      <input type="text">
112     </li>
113     <li class="contact-item">
114      <p>メールアドレス</p>
115      <input type="text">
116     </li>
117     <li class="contact-item">
118      <p>お問い合わせ内容</p>
119      <textarea></textarea>
120     </li>
121
122
123    </ul>
124   </div>
125   <div class="form-send">
126    <input class="form-btn" type="送信" value="送信">
127   </div>
128  </section>
129 </main>
130
131
132
133
134
135
136 <footer>
137
138  <p>©︎crest.design all rights reserved</p>
139
140 </footer>
141</body>
142
143</html>
144

外套のソースコード（スタイル）

CSS
1
2@charset "UTF-8";
3/*共通レイアウト*/
4html {
5  font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
6  /*フォント書き方*/
7  font-size: 0.875rem;
8  /*font-size: 14px;*/
9  /* width: 100%;*/
10  line-height: 1.8;
11  /*line-height: 48;*/
12  letter-spacing: 0.05em;
13  /*h3だけでまとめておく*/
14}
15html img {
16  width: 100%;
17  vertical-align: bottom;
18}
19html h3 {
20  font-size: 1.4rem;
21  font-weight: bold;
22  line-height: 2;
23  letter-spacing: 0.1em;
24  margin-bottom: 40px;
25}
26html .container {
27  /*width: 100%;*/
28  /*text-align: center;*/
29  /*padding: 0 120px;*/
30  /*↑これがあってキャッチコピーはど真ん中だが全体がずれてたために*/
31  padding: 100px 10% 50px;
32}
33html .container .section-title {
34  /* width: 100%;*/
35  font-size: 3.6rem;
36  /* padding-top: 100px;*/
37  padding-bottom: 70px;
38  font-weight: bold;
39  /* line-height: 1.5rem;*/
40  letter-spacing: 0.05em;
41  text-align: center;
42  /*.list {
43   width: 64.3rem;*/
44}
45
46/*ヘッダー*/
47header {
48  color: #FFFFFF;
49  background-color: #141414;
50  line-height: 1.3rem;
51  /*padding: 0 10% 0;*/
52}
53header .header-menu {
54  display: flex;
55  padding: 0 120px;
56  justify-content: space-between;
57  /*リスト欄が端による*/
58}
59header .header-menu .header-left {
60  font-size: 26px;
61  line-height: 20px;
62  text-align: left;
63  padding: 20px 0;
64}
65header .header-menu .header-top {
66  display: flex;
67  text-align: right;
68}
69header .header-menu .header-top li {
70  padding-top: 1.56rem;
71  padding-right: 55px;
72  align-items: end;
73}
74header .header-menu .header-top li a {
75  text-decoration: none;
76  color: #FFFFFF;
77}
78
79.header-image {
80  background-image: url(../img/fv-bgi@2x.jpg);
81  background-size: cover;
82  width: 100%;
83}
84.header-image .kv-copy {
85  padding: 302px 0;
86  font-size: 36px;
87  text-align: center;
88}
89.header-image .kv-copy img {
90  width: 100%;
91}
92.header-image .kv-copy h1 {
93  border: 2px solid #FFFFFF;
94  margin: 0 auto;
95  width: 449px;
96  line-height: 136px;
97  text-align: center;
98  width: 1005;
99}
100
101/*アバウト*/
102.top-text {
103  text-align: left;
104  font-weight: bold;
105}
106.top-text p {
107  line-height: 38px;
108  width: 1030px;
109}
110
111/*サービス*/
112.service-list {
113  text-align: center;
114  margin: 0 auto;
115  width: 64.3rem;
116}
117.service-list .service-item {
118  padding-bottom: 50px;
119  display: flex;
120  /* flex-direction: row-reverse;*/
121  font-weight: bold;
122  /*justify-content: space-between;*/
123  /* align-items: center;*/
124  /* text-align: center;*/
125  margin: 0 auto;
126}
127.service-list .service-item img {
128  width: 480px;
129  height: 240px;
130}
131.service-list .service-item p {
132  line-height: 30px;
133  width: 480px;
134}
135.service-list .service-item .left {
136  text-align: left;
137  margin-left: 70px;
138}
139.service-list .service-item .left p {
140  width: 480px;
141}
142.service-list .service-item .right {
143  text-align: left;
144  padding-right: 70px;
145}
146.service-list .service-item .right p {
147  width: 480px;
148}
149
150/*ニュース*/
151/*.card-list {
152
153 .card-item {
154  margin: 50px 0 0;
155
156  .card-image {
157   width: 100%;
158  }
159
160  .card-text {
161   width: 240px;
162
163  }
164 }
165}*/
166.card-list {
167  text-align: center;
168  /*display: flex;*/
169}
170.card-list .card-item {
171  margin: 50px 0 0;
172}
173.card-list .card-item .card-image {
174  widht: 50%;
175}
176.card-list .card-item .card-text {
177  text-decoration: none;
178  color: red;
179}
180
181/*お問い合わせ*/
182.section-contact {
183  font-size: 1.5rem;
184  padding-bottom: 93px;
185  padding-top: 152px;
186  font-weight: bold;
187  text-align: center;
188}
189
190.contact-list {
191  width: 700px;
192  margin: 0 auto;
193}
194.contact-list p {
195  text-align: left;
196  padding-bottom: 3px;
197  width: 700px;
198}
199.contact-list input {
200  width: 700px;
201  margin-bottom: 20px;
202}
203.contact-list textarea {
204  width: 700px;
205  height: 171px;
206}
207
208/*ボタン*/
209.form-send {
210  text-align: center;
211  margin-top: 50px;
212}
213.form-send .form-btn {
214  /*display: inline-block;
215  */
216  text-align: center;
217  color: #FFFFFF;
218  background-color: #141414;
219  border-radius: 3.18em;
220  padding: 1rem 6rem;
221  font-size: 1.25rem;
222  margin-bottom: 3.12rem;
223  /**/
224}
225
226/*.btn {
227 display: inline-block;
228 background-color: $black;
229 color: $white;
230 line-height: 30;
231 text-decoration: none;
232 border-radius: 51px;
233 margin: 0 auto;
234 padding: 1rem 6rem;
235 width: 235px;
236
237
238 a {
239  font-size: 1.25rem;
240  display: inline-block;
241  text-align: center;
242
243 }
244}
245*/
246/*フッター*/
247footer {
248  color: #FFFFFF;
249  background-color: #141414;
250  padding: 1.81rem;
251  text-align: center;
252}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

行動規範の内容に同意します

回答1件

ベストアンサー

display:flexが指定されている箇所は複数ありましたが、コメントアウトされていた下記の部分でしょうか？（responsive.cssは無視/他は効いていたように見えたので）

css
1.card-list {
2  text-align: center;
3  /*display: flex;*/
4}

HTML側のミスではないかと思います。

html
1<ul div="card-list"><!-- 誤 -->
2<ul class="card-list"><!-- 正 -->

もし他の部分であれば、「display:flexが効かない箇所」がわかるように提示してください。

投稿2021/02/03 04:29

dit.

総合スコア3235

mitrasi

2021/02/03 05:02

ご回答ありがとうございます！クラス名自体はものすごく確認したのですが、classがdivになっていたのは気づけませんでした???? 無事ききました。ありがとうございます！（こんな単純なミスで申し訳ないです????）

dit.

2021/02/03 05:39

解決できたようで何よりです。コメントアウトされた箇所ではなく残りの3か所のどこかが効いていないといわれたらキャッシュの削除などをお願いしようとしていました。今回は記述ミスでしたが、HTMLの文法チェックをしてくれるサービスやプラグイン等もありますのでご参考まで。 Another HTML Lint http://www.htmllint.net/html-lint/htmllint.html Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方|超初心者ホームページ作成ナビ https://creating-homepage.com/archives/4583 コードを見つめるだけだと脳内補正してしまうのでなかなかミスに気が付けないんですよね。デベロッパーツールや文法チェックをうまく活用してください。

mitrasi

2021/02/04 02:20

>dit.様アドバイスありがとうございます。確認しても気づけないの私ぐらいかと思っていました???? 今また詰まっていたので、さっそく教えていただいたツールを利用してみます

行動規範の内容に同意します