前提・実現したいこと

理想
画像のような感じにしたいです。
帯上の３つの画像は均等配置
帯下の１０つの画像はセンター中央で３段目は２段目の５枚目と６枚目の下にしたいです。

現状
帯上は均等配置はできている(?)
ブラウザに依存しない形がいいとは思っています。
ブラウザの横幅が変わると帯上が動きます。。
帯下の３段目ですがtext-align:でcenter,leftでやってみても上手くいきません。

分かる方、どこを直せばいいか教えていただきたいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7</head>
8<style type="text/css">
9    .content {
10        text-align: center;
11        margin-top: 70px;
12    }
13
14    .submenu {
15        display: flex;
16        text-align: center;
17        justify-content: space-evenly;
18
19    }
20
21    .sample {
22        font-size: 40px;
23        margin-top: 100px;
24        background-color: #98fb98;
25        width: 100%;
26    }
27
28    .item_1,
29    .item_2,
30    .item_3 {
31        margin-left: 10%;
32    }
33
34    .horizontal_image {
35        margin-top: 40px;
36        text-align: center;
37    }
38
39    div.row_spot1,
40    .row_spot2,
41    .row_spot3 {
42        width: 1540px;
43        margin: 0 auto;
44    }
45
46    .row_spot3 {
47        text-align: left;
48        padding-left: 207px;
49    }
50
51    .row_spot1>div,
52    .row_spot2>div,
53    .row_spot3>div {
54        display: inline-block;
55    }
56
57</style>
58
59<body>
60    <div class="content">
61        <div class="submenu">
62            <div class="item_1">
63                <img src="star.jpg" width="200" height="200" alt="gazou">
64            </div>
65            <div class="item_2">
66                <img src="star.jpg" width="200" height="200" alt="gazou">
67            </div>
68            <div class="item_3">
69                <img src="star.jpg" width="200" height="200" alt="gazou">
70            </div>
71        </div>
72    </div>
73    <div class="sample">メイン</div>
74    <div class="horizontal_image">
75        <div class="row_spot1">
76            <div>
77                <img src="star.jpg" width="200" height="200" alt="gazou">
78            </div>
79            <div>
80                <img src="star.jpg" width="200" height="200" alt="gazou">
81            </div>
82            <div>
83                <img src="star.jpg" width="200" height="200" alt="gazou">
84            </div>
85            <div>
86                <img src="star.jpg" width="200" height="200" alt="gazou">
87            </div>
88        </div>
89        <div class="row_spot2">
90            <div>
91                <img src="star.jpg" width="200" height="200" alt="gazou">
92            </div>
93            <div>
94                <img src="star.jpg" width="200" height="200" alt="gazou">
95            </div>
96            <div>
97                <img src="star.jpg" width="200" height="200" alt="gazou">
98            </div>
99            <div>
100                <img src="star.jpg" width="200" height="200" alt="gazou">
101            </div>
102        </div>
103        <div class="row_spot3">
104            <div>
105                <img src="star.jpg" width="200" height="200" alt="gazou">
106            </div>
107            <div>
108                <img src="star.jpg" width="200" height="200" alt="gazou">
109            </div>
110        </div>
111    </div>
112</body>
113
114</html>
115

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

回答1件

こんばんは。

グリッドレイアウトをお勧めします。
以下を追加してみてください。

css
1    .horizontal_image {
2        display: grid;
3        grid-template-columns: repeat(4, min-content);
4        justify-content: center;
5    }
6
7    div.row_spot1,
8    .row_spot2,
9    .row_spot3 {
10        display: contents;
11    }

グリッド - ウェブ開発を学ぶ | MDN

コメントを受けて追記

__ちなみになんですが、gridはIE対応しておらず、レイアウトが崩れてしまうのですが、

他の書き方はないでしょうか。。。__

IE11+という条件になってしまいますが、フレックスレイアウトではどうでしょうか。
ただし、画像のサイズが一定であることが条件です。

css
1    div.row_spot1,
2    .row_spot2,
3    .row_spot3 {
4        display: flex; /* 追加 */
5        /*width: 1540px; 変更*/
6        width: 800px;
7        margin: 0 auto;
8    }
9
10    .row_spot3 {
11        text-align: left;
12        /*padding-left: 207px; 削除*/
13    }

投稿2021/02/03 14:30

編集2021/02/05 01:28

Lhankor_Mhy

総合スコア36928

rakkikkk

2021/02/03 15:50

ありがとうございます！ >>grid-template-columns: repeat(4, min-content); 何をしている処理なんでしょうか。。。

m.ts10806

2021/02/03 21:36

MDNとか確認してみては。 https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns

Lhankor_Mhy

2021/02/04 01:25 編集

> m.ts10806さん補足ありがとうございます。 --- > rakkikkkさん上記ページの通りですが、簡単に説明すると、・min-content は、最小コンテンツ幅（画像の横幅）・repeat(4,__) は、__を4回繰り返す・grid-template-columns は、列の設定です。つまり、「中身の幅に合わせたセルを4つ作って折り返し」みたいな効果があります。なお、display: contents は、「その要素を表示上はなかったことにする」というものです。.row_spot1 などはレイアウトの邪魔だったので、消えていただきました。

rakkikkk

2021/02/04 11:46 編集

ありがとうございます。ちなみになんですが、gridはIE対応しておらず、レイアウトが崩れてしまうのですが、他の書き方はないでしょうか。。。

Lhankor_Mhy

2021/02/05 01:24

IE条件があるなら、先に言って欲しかったですね…… IEのバージョンは11でいいのですか？

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