質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

603閲覧

display:flexがききません

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/02/03 04:09

前提・実現したいこと

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
ブラウザ:クローム

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問