Q&A
なぜHTMLやCSSの一部分だけを見せて問題が解決すると思うのかわかりませんが、flexレイアウトで横並びにした画像の間隔は現在どのようになっているのでしょうか。
.gazo-boxのスタイルに「justify-content: center;」を追加するとどう変わりますか?
前提・実現したいこと
画像同士の空白を縮めたい
発生している問題・エラーメッセージ
該当のソースコード
CSS 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 <div class="desk"> 14 <h1>デイトラとは</h1> 15 <section> 16 <div class="pic"> 17 <img src="img/about.png"> 18 </div> 19 20 <div class="desk"> 21 <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎月設定された課題をこなしていくだけで、未経験から30日でプログラミングが身に付きます。 22 1日1題30日でプロのWebエンジニアを目指しましょう。 23 </div> 24 </p> 25 </div> 26 </section> 27 28 <div> 29 <h1>コース一覧</h1> 30 31 <div class="gazo-box"> 32 <img src="img/web_first.png" alt="" width="400px"height="200px"> 33 <img src="img/web_second.png" alt="" width="400px"height="200px"> 34 <img src="img/web_third.png" alt="" width="400px"height="200px"> 35 </div> 36 <h1>お問い合わせ</h1> 37 <h2>さあ今日から始めよう</h2> 38 <button>無料で始める</button> 39 </body> 40</html> 41} 42 43div { 44 text-align: center; 45} 46 47img { 48 padding-right: 400px; 49 /* padding-bottom: 300px; */ 50} 51 52h1 { 53 color:darkslategray; 54} 55 56.section{ 57 display:flex; 58} 59 60.pic{ 61 width: 30%; 62 height: 30%; 63} 64 65.desk{ 66 flex: 1; 67 margin: 100px; 68} 69 70.h2{ 71 text-align:center; 72 padding-top:100px; 73} 74 75/* .pic{ 76 max-width:100%; 77 height:auto; 78} */ 79 80.gazo-box{ 81 display:flex; 82 padding:0; 83 justify-content:center; 84} 85 86button{ 87 text-decoration: none; 88 background: red; 89 width:100px; 90 height:50px; 91}
試したこと
空白を縮めるためpaddingを入れたのですが、何も変わりませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
提示のコードでは画像間に空白はできません。症状の再現できるコード全体を提示してください。
また、padding:20; は何からかの単位がないと無意味です。例えば、padding:20px; とか。
さらに、こうしたとしても画像間の空白とは 無関係です。
justify-content:center;にしても変化がなかったです。
回答1件
0
ベストアンサー
imgに対するスタイルにpadding-right: 400px;が指定されているため、各画像の右側に400pxのパディングが作られます。問題の部分だけパディングを無くすのであれば、
CSS
1.gazo-box img { 2 padding: 0; 3 border: 1px red solid; /* 確認用 */ 4}
とでもしてください。そうすれば、flexレイアウトに対するjustify-content: center;によって中央に隙間無く並んで表示されます。
また、HTMLのimg要素でwidthやheightにpx付きの数値を指定してはいけません。pxを抜いて数値だけを指定するか、まるごと削除してから↑のスタイルにwidth: 400px;とheight: 200px;を追加してください。
投稿2020/12/30 02:51
総合スコア11990
あなたの回答
tips
プレビュー
