Q&A
デイトラとは、無料で・迷わずとか謳って実際の質問者迷ってて草。
これで私もプロのWebエンジニアになれると錯覚しちゃうな。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
発生している問題・エラーメッセージ
デイトラとは、無料で・・・の文章の配置が画像のような配置にならないです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <link rel="stylesheet" href="css/style.css"> 5 <meta charset="UTF-8"> 6 <title>練習</title> 7 </head> 8 <body> 9 <header> 10 <img src="img/main-vsual.png"> 11 </header> 12 13 <h1>デイトラとは</h1> 14 <section> 15 <div class="pic"> 16 <img src="img/about.png" alt="" width="700" height="500"> 17 </div> 18 19 <div class="desk"> 20 <p class="deitora">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br> 21 習アプリです。毎月設定された課題をこなしていくだけで、未経<br> 22 験から30日でプログラミングが身に付きます。<br> 23 1日1題30日でプロのWebエンジニアを目指しましょう！ 24 </p> 25 </div> 26 </div> 27 </section> 28 29 <div class="iti"> 30 <h1>コース一覧</h1> 31 32 <div class="gazo-box"> 33 <img src="img/web_first.png" alt="" width="400"height="200"> 34 <p>HTML/CSS/BootStrap</p> 35 <img src="img/web_second.png" alt="" width="400"height="200"> 36 <p>HTML/CSS/JavaScript/jQuery</p> 37 <img src="img/web_third.png" alt="" width="400"height="200"> 38 <p>PHP/WordPress</p> 39 </div> 40 <h1>お問い合わせ</h1> 41 <h2>さあ今日から始めよう</h2> 42 <div class="btn">無料ではじめる</div> 43 </body> 44</html> 45 46```css 47div.iti { 48 text-align: center; 49} 50 51h1 { 52 color:darkslategray; 53 text-align:center; 54} 55 56section{ 57 display:flex; 58} 59 60.pic{ 61 margin-right:30px; 62 padding-left: 190px; 63 display: inline-block; 64 /* width: 70px; 65 height: ; */ 66} 67 68.desk{ 69 flex: 1; 70 margin: 100px; 71} 72 73p.deitora{ 74 color:#3399CC; 75 padding-bottom: 100px; 76} 77 78.h2{ 79 text-align:center; 80 padding-top:100px; 81} 82 83.gazo-box img{ 84 justify-content:space-between; 85 border:1px; 86 padding-right:20px; 87 padding-left:20px; 88 display:inline; 89} 90 91.btn{ 92 text-decoration: none; 93 font-weight:bold; 94 font-size: large; 95 display:inline-block; 96 background: #ff6666; 97 width:300px; 98 line-height:3; 99 padding:5px; 100 border-radius:5px; 101 color:white; 102}
試したこと
文に対してPadding-bottomを配置したのですが位置が変わりませんでした。
補足情報（FW/ツールのバージョンなど）
画像の挿入を使ってスクリーンショットを挿入したのですが、なぜか表示されなかったためコードのみの表示です。
回答2件
0
ベストアンサー
こんにちは。
css
1.desk{ 2flex: 1; 3/* margin: 100px; ←削除*/ 4}
投稿2021/01/08 01:52
総合スコア36960
あなたの回答
tips
プレビュー
