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

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

新規登録して質問してみよう
ただいま回答率
85.50%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1226閲覧

display:flex;について教えていただきたいです。

suzuran12

総合スコア2

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/01 03:07

編集2022/01/12 10:55

プログラミングの勉強を初めて2.3日の者です。
CSSの最後の方に入力したdisplay:flexなのですが
横並びにならなく困っています。
スペルミス、親要素の確認しました。

また class about−rightから
class course cectionがfloat rightにならなく困っています。
長めですが回答いただけると助かります。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="icon" href="favicon.ico"> 7 <title>初めてのLP</title> 8 9 <meta name="description" content="30DAYSトライアル初級編の練習用LPです。最後まで頑張っていきましょう"> 10 11 <link rel="stylesheet" href="./css/reset.css"> 12 <link rel="stylesheet" href="./css/style.css"> 13</head> 14<body> 15 16<header> 17<div class="container"> 18 19<div class="header-left"> 20 <h1>30DAYSトライアル</h1> 21</div> 22 23<div class="header-right"><div class="clear"></div> 24<ul class="header-nav" > 25 <li class="header-nav-item"><a href="#">デイトラとは</a></li> 26 <li class="header-nav-item"><a href="#">コース一覧</a></li> 27 <li class="header-nav-item"><a href="#">お問い合わせ</a></li> 28 </ul> 29 </div> 30<div class="clear"> 31</div> 32</div> 33</header> 34 35<section class="top"> 36 <img src="./img/main-vsual.png" alt=""> 37 38</section> 39 40<section class="about section"> 41 <div class="container clear"> 42 </div> 43 <h2 class="section-title">デイトラとは</h2> 44 <div class="about-left"> 45 46 <img src="./img/about.png" alt="デイトラ とは"> 47 </div> 48 <div class="about-right"> 49 </div> 50 <p>デイトラ とは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につき1日一題30日でプロのWEBエンジニアを目指しましょう!</p> 51 </div> 52 </div> 53 54</section> 55 56<section class="course section"> 57 <div class="container"> 58 <h2 class="section-title">コース一覧</h2> 59 <div class="course-wrapper"> 60 <div class="course-item"> 61 </div> 62 <img src="./img/web_first.png" alt="デイトラ初級編"> 63 <p>HTML/CSS/Bootstrap</p> 64 </div> 65 <div class="course-item"> 66 </div> 67 <img src="./img/web_second.png" alt="デイトラ中級編"> 68 <p>HTML/CSS/Javascript/jquery</p> 69 </div> 70 <div class="course-item"></div> 71 <img src="./img/web_third.png" alt="デイトラ上級編"> 72 <p>PHP/WordPress</p> 73 </div> 74 </div> 75</section> 76 77 78<section class="contact section"> 79 <div class="container"> 80 <h2 class="section-title"> お問合せ</h2> 81 <p>さあ今日から30日間始めよう</p> 82<form action="#" method="post"> 83 <input type="email" name="email" id="email"> 84 <button type="submit">無料で始める</button> 85</form> 86</section> 87 88</header> 89 90<footer> 91 92 93</footer> 94</body> 95</html>

CSS

1body{ 2 color:#082B48; 3 font-family: Verdana, Geneva, Tahoma, sans-serif; 4 line-height: 1.5; 5} 6 7img{ 8 width: 100%; 9 height: auto; 10} 11 12a{ 13 text-decoration: none; 14 color:#082B48 15} 16 17a:hover{ 18 opacity: 0.7; 19} 20 21 22.container{ 23 width: 90%; 24 max-width: 980px; 25 margin: auto; 26} 27 28.header-title { 29 font-weight: bold; 30 font-size: 24px; 31} 32 33.clear{ 34 clear: both; 35} 36 37.header{ 38 padding: 20px 0; 39} 40 41.header-left{ 42 float: left; 43} 44 45.clear{ 46 clear: both; 47} 48 49.header-right{ 50 float: right; 51} 52 53.header-nav-item{ 54 float: left; 55 margin-left: 50px; 56} 57 58.header-nav-item a{ 59 font-size: 15px; 60 font-weight: 600px; 61 line-height: 36px; 62} 63 64top{ 65 background-color: lightblue; 66 height: 400px; 67 line-height: 36px; 68} 69 70/* ======= */ 71/* section */ 72/* ======= */ 73.section{ 74 padding: 60px 0; 75} 76 77.section-title{ 78 font-style:32px; 79 font-weight: bold; 80 text-align: center; 81 margin-bottom: 40px; 82} 83 84.about-left{ 85 float: left; 86 width: 48%; 87} 88 89.about-right{ 90 float: right; 91 width: 48%; 92} 93 94.course-wrapper{ 95 display: flex; 96}

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

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

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

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

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

greenleave10000

2020/11/01 06:45

ペイントソフト等で簡単でいいのでどのようなレイアウトか教えていただけないでしょうか?
guest

回答2

0

CSS

1.course-wrapper{ 2 display: flex; 3}

というのは、「couse-wrapperクラスの内部に書いた要素を、flexレイアウトで表示する」という指示です。

ところが、HTMLファイルを見ると、course-wrapperクラスのdiv要素の付近が正しく構成されていません。

HTML

1 <div class="course-wrapper"> 2 <div class="course-item"> 3 </div> 4 <img src="./img/web_first.png" alt="デイトラ初級編"> 5 <p>HTML/CSS/Bootstrap</p> 6 </div> 7 <div class="course-item"> 8 </div> 9 <img src="./img/web_second.png" alt="デイトラ中級編"> 10 <p>HTML/CSS/Javascript/jquery</p> 11 </div> 12 <div class="course-item"></div> 13 <img src="./img/web_third.png" alt="デイトラ上級編"> 14 <p>PHP/WordPress</p> 15 </div>

おそらく、別の回答者の方の回答のように、course-itemクラスのdiv要素を横に並べて表示したいのでしょうが、実際には、

  • 3個あるcourse-itemクラスのdiv要素の内容には何も書かれておらず、画像と段落がその直後に書かれている。
  • ひとつめとみっつめの画像の直後にdiv要素の終了タグ</div>が存在するが、対応する開始タグがない。
  • みっつめのcourse-itemクラスのdiv要素はcourse-wrapperクラスのdiv要素の外側にある。

という状態です。

div要素の役割や、開始タグと終了タグの対応に注意してお書きになるといいかと思います。

投稿2020/11/01 03:57

編集2020/11/01 03:59
Daregada

総合スコア11990

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

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

0

下のようにしてみてうまく行くか試してもらえないでしょうか?

<section class="course section"> <div class="container"> <h2 class="section-title">コース一覧</h2> <div class="course-wrapper"> <div class="course-item"> <img src="./img/web_first.png" alt="デイトラ初級編"> <p>HTML/CSS/Bootstrap</p> </div> <div class="course-item"> <img src="./img/web_second.png" alt="デイトラ中級編"> <p>HTML/CSS/Javascript/jquery</p> </div> <div class="course-item"> <img src="./img/web_third.png" alt="デイトラ上級編"> <p>PHP/WordPress</p> </div> </div> </div> </section>

これはインデント空白4文字なので、空白2文字のほうが良いのであれば、したのようなWEBサービスを使って変更してください。
https://lab.syncer.jp/Tool/HTML-PrettyPrint/

追記:

また class about−rightから

class course cectionがfloat rightにならなく困っています。

こういうイメージでしょうか?
イメージ説明

投稿2020/11/01 03:42

編集2020/11/01 06:55
greenleave10000

総合スコア67

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問