HTML、CSSについて、画像の様な配置にしたい

![
この画像のような感じで揃えたいのですが、どのようにコード書けば分かる方いらっしゃいますか？
あと、幅を狭めても位置をずらさないようにしたいです。
お願い致します。

kei344

2018/07/26 07:06

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

aKusano

2018/07/26 07:07

どうとでも作れると思いますが、このようなザックリとしたラフ図でかつ何のコードも無い状態では回答のしようがないですね。このままだと「丸投げ」で規約違反になっちゃうので、もう少しご自分でトライした結果を出してみてはいかがでしょう？

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

回答1件

ベストアンサー

main要素は明示的にdisplay: block;を指定しなければ、ブラウザによってmax-width: 768px;が効かないことがある。

クラス名がmedia-section__imagesの下位階層にimgを包括するmedia-section__imageを追加してます。
これは、img要素に直接スタイルを入れるとブラウザによって比率が保たれずつぶれる問題を回避するためです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="x-ua-compatible" content="ie=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7    <meta name="description" content=""/>
8    <title>HTML、CSSについて、画像の様な配置にしたい</title>
9    <style>
10        /* 最低限、ブラウザの差異を吸収
11        ----------------------------------------------------------------- */
12        * {
13            margin: 0;
14            padding: 0;
15        }
16        html {
17            box-sizing: border-box;
18            font-family: sans-serif;
19            font-size: 62.5%; /* 10px */
20            color: #000;
21            line-height: 1.6;
22            letter-spacing: .1em;
23        }
24        *,
25        *:before,
26        *:after {
27            -webkit-box-sizing: border-box;
28            -moz-box-sizing: border-box;
29            -o-box-sizing: border-box;
30            -ms-box-sizing: border-box;
31            box-sizing: inherit;
32        }
33        img {
34            max-width: 100%;
35            height: auto;
36            vertical-align: middle;
37        }
38
39        /* ここから、オリジナルのスタイルを定義
40        ----------------------------------------------------------------- */
41        main {
42            display: block;
43            margin: 0 auto;
44            padding-top: 24px;
45            padding-right: 4px;
46            padding-bottom: 24px;
47            padding-left: 4px;
48            max-width: 768px;
49        }
50        .media-section {
51            margin-bottom: 24px;
52        }
53        .media-section,
54        .media-section__images {
55            display: flex;
56            align-items: center;
57        }
58        .media-section__content,
59        .media-section__images {
60            padding: 4px;
61            flex: 1;
62            width: calc(100%/2 - 4px);
63        }
64        .media-section__images > .media-section__image {
65            padding: 4px;
66            flex: 1;
67            width: calc(100%/2 - 4px);
68            text-align: center;
69        }
70    </style>
71</head>
72<body>
73<main>
74    <div class="media-section">
75        <div class="media-section__content">
76            <h2 class="media-section__heading">タイトル</h2>
77            <p class="media-section__text">あ・い・う・え・お、か・き・く・け・こ、さ・し・す・せ・そ、た・ち・つ・て・と、な・に・ぬ・ね・の、は・ひ・ふ・へ・ほ、ま・み・む・め・も、や・ゆ・よ、ら・り・る・れ・ろ、わ・を・ん。</p>
78        </div>
79        <div class="media-section__images">
80            <div class="media-section__image">
81                <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
82            </div>
83        </div>
84    </div>
85    <div class="media-section">
86        <div class="media-section__content">
87            <h2 class="media-section__heading">タイトル</h2>
88            <p class="media-section__text">あ・い・う・え・お、か・き・く・け・こ、さ・し・す・せ・そ、た・ち・つ・て・と、な・に・ぬ・ね・の、は・ひ・ふ・へ・ほ、ま・み・む・め・も、や・ゆ・よ、ら・り・る・れ・ろ、わ・を・ん。</p>
89        </div>
90        <div class="media-section__images">
91            <div class="media-section__image">
92                <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
93            </div>
94            <div class="media-section__image">
95                <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
96            </div>
97        </div>
98    </div>
99</main>
100</body>
101</html>