【HTML・CSS】写真と説明文のレイアウト調整で、うまく間隔を詰めたいです。

HTML・CSSの初心者です。
HTMLとCSSの練習をしているのですが、レイアウトの調整がうまくいかず困っています。

やりたいことは、写真3枚と各々の説明文を、
PC画面では、画面左に写真、右に説明文を、
モバイル画面では、写真→説明文→写真→・・・と上下に表示させたいと思っています。

PC画面
写真1　　　説明文1（複数行）
写真2　　　説明文2（複数行）
写真3　　　説明文3（複数行）

モバイル画面
写真1
説明文1（複数行）

写真2
説明文2（複数行）

写真3
説明文3（複数行）

というような形です。

一応こちらのサイト（https://web-bruno.com/flexbox-css3/）を参考にしてみまして、
ある程度は表示できるようになったのですが、写真1・説明文1（合わせて内容1とします）と写真2・説明文2（合わせて内容2）との間隔が空きすぎていて、特にモバイルだと不自然な印象となっています。

うまく間隔を詰めて、見栄えの良いサイトを作りたいのですが、どこをどうすれば良いのかがよくわかりません。
以下にソースコードを掲載します。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6  <meta property='og:type' content='website'>
7  <meta property='og:title' content='HTML PRACTICE'>
8  <title>私の趣味紹介コーナー</title>
9（中略）
10</head>
11
12<body>
13<div class="contents-wrap">
14  <div class="contents-img">
15    <img src="karate.jpg" alt="">
16  </div>
17  <div class="contents-text">
18    <h2>空手道</h2>
19    <p>空手が好きです。回し蹴りが得意技です。</p>
20  </div>
21</div>
22
23<div class="contents-wrap">
24  <div class="contents-img">
25    <img src="futsal.jpg" alt="">
26  </div>
27  <div class="contents-text">
28    <h2>フットサル</h2>
29    <p>フットサルを始めました。蹴る対象が人からボールに変わりました。</p>
30  </div>
31</div>
32
33<div class="contents-wrap">
34  <div class="contents-img">
35    <img src="music.jpg" alt="">
36  </div>
37  <div class="contents-text">
38    <h2>音楽鑑賞</h2>
39    <p>音楽を聴くことも好きです。歌うことも好きですよ。</p>
40  </div>
41</div>
42
43</body>
44</html>
45

CSS
1body {
2  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
3  font-size: 15px;
4  line-height: 1.8;
5  letter-spacing: .8px;
6  word-break: break-all;
7  color: #333;
8}
9
10.contents-wrap {
11  display: flex;
12  justify-content: space-between;
13  margin-bottom: 7rem;
14}
15
16.contents-wrap: nth-child(odd) {
17  flex-direction: row-reverse;
18}
19
20.contents-img {
21  width: 35%;
22}
23
24.contents-text {
25  width: 60%;
26}
27
28.contents-text h2 {
29  margin-bottom: 2.2rem;
30  font-size: 2.2rem;
31  line-height: 1;
32  font-family: sans-serif;
33}
34
35.contents-img img {
36  display: block;
37  width: 100%;
38  height: auto;
39}
40
41/*-----------------------------------
42  MOBILE
43------------------------------------*/
44
45@media screen and (max-width: 768px){
46    .contents-wrap,
47    .contents-wrap:nth-child(odd) {
48        flex-direction: column;
49    }
50
51    .contents-img {
52        width: 100%;
53        text-align: center;
54    }
55    
56    .contents-text {
57        width: 100%;
58        padding: 3rem;
59    }
60}

どなたか、詳しい方ご教示をお願い致します。

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

回答1件

ベストアンサー

「内容１」「内容2」「内容3」のそれぞれのブロックがHTMLソースコードの
どのdivに該当するのかを考えてみましょう。

各内容を囲んでいるのは.contents-wrap ですよね？
そのセレクタを確認してみると、PCレイアウトの方でmargin-bottom: 7rem;と指定しています。
また、SPレイアウトの方ではmargin-bottomの指定はされていません。
ということは、PCレイアウトの方で指定したmargin-bottom: 7rem;が、
そのままSPレイアウトでも有効となっている状態であると言えます。

SPレイアウトで「内容１と内容2の間の余白が広すぎる」と感じるのであれば、
該当箇所のmargin-bottomをもっと小さく設定してあげればよいかと思いますので
やってみてください。

投稿2019/09/15 20:45