画像をレスポンシブだと二つずつ縦に並べるものを作りたいです。 PC版では横にだんだん並べていくのは

締切済

質問者：ト琶
質問日時：2019/08/21 21:23
回答数：1件

画像をレスポンシブだと
二つずつ縦に並べるものを作りたいです。
PC版では横にだんだん並べていくのは作れたのですが、レスポンシブの時の二つ縦並びを作れません。

HTML
ul
li
img〜
li
img〜
li
img〜
/ul
ul
li
img〜
li
img〜
li
img〜
li
img〜
/ul
という感じで組んでいます。

css
ul{
display: flex;
justify-content: center
というのがPC版です。
これをレスポンシブ対応するとき、
横二つずつ縦に並べるにはどう書いたら良いのでしょうか。
教えてください。
また真ん中に揃えるように作りたいです。

画像の大きさは一つずつ違いますが、
縦幅は揃えたいです。

補足日時：2019/08/21 21:27
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2019/08/22 13:08

こんにちは

＞画像をレスポンシブだと
＞二つずつ縦に並べるものを作りたいです。
意味がわかりませんが、「レスポンシブ」＝「スマホ等で閲覧した際」という意味で使っていますか？

もしそうであるなら、
「PC閲覧時は横並びで、スマホ等では2列でセンタリング」のレイアウトにしたいということでしょうか？
単純に、@media screen　等を利用してCSSを切り替えれば良いだけなのですが…

＞ul{
＞display: flex;
＞justify-content: center
という情報だけからではPC版の方もどうなっているのか不明点が多いので、勝手に想定してあります。
（PC版はできているとのことなので、そちらとの差分をスマホ対応版になるようにすれば宜しいかと）

※ 他にも方法はいろいろあると思いますが、ご提示の　display:flex; をベースにしています。
（flexベースでも方法はいくつもあると思いますので、一例です）
＞縦幅は揃えたいです。
※ どういう揃え方をするのか不明なので、とりあえず一律で固定値指定にしてあります。
※ 画像間のスペースについても、固定値指定にしてあります。
※ 画像サイズがいろいろあるとのことなので、画像同士の揃え方も気になるところですが、中央寄せで更に中央側に寄せています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
body, ul, li, img {
box-sizing: border-box;
padding: 0; margin: 0;
}

ul{
list-style-type: none;
display: flex;
justify-content: center;
}
li{
height: 100px;
padding: 2px;
overflow: hidden;
}
img { height: 100%; }

@media screen and (max-width: 480px){
ul { flex-wrap: wrap; }
li { width: 50%; }
li:nth-child(odd) { text-align: right; }
}
</style>
</head>
<body>

<ul>
<li><img src="./img/photo01.jpg" /></li>
<li><img src="./img/photo02.jpg" /></li>
<li><img src="./img/photo03.jpg" /></li>
<li><img src="./img/photo04.jpg" /></li>
<li><img src="./img/photo05.jpg" /></li>
</ul>

</body>
</html>