Skip to main content
外部サイトに対して不必要なアクセスが発生しないように変更(SO上でアップロードした画像のurlに差し替え)
ソース リンク
harry0000
  • 2,800
  • 4
  • 18
  • 22
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/*全体の大きさを決めるためのdiv*/
.inner{
    margin: 0 auto;/*innerが真ん中に来るようにするコード*/
    width: 100%;/*お好きな大きさで*/
}
/*上段画像::sectionが使われてますがdivみたいなものです*/
.content_top {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
    justify-content: space-between;
}
.content_top div{
    width: 25%;
}
img{
    width: 100%;/*imgの入っているdivの中一杯に表示*/
}
/*下段画像*/
.content_bottom {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap        : wrap;/*折り返す設定*/
    -webkit-flex-wrap: wrap;/*Safariとか*/
    -ms-flex-wrap    : wrap;/*IE10*/
}
.photo{
    width: 25%;
}
</style>
<body>
<div class="inner">
    <section class="content_top">
            <div class="item_1">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="item_2">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="item_3">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
    </section>
    <section class="content_bottom">
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
            <div class="photo">
                <img src="https://wwwi.homepage-tukurikatasstatic.com/imagenet/lionzkVja.jpgpng" alt="">
            </div>
    </section>
</div>
</body>

</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/*全体の大きさを決めるためのdiv*/
.inner{
    margin: 0 auto;/*innerが真ん中に来るようにするコード*/
    width: 100%;/*お好きな大きさで*/
}
/*上段画像::sectionが使われてますがdivみたいなものです*/
.content_top {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
    justify-content: space-between;
}
.content_top div{
    width: 25%;
}
img{
    width: 100%;/*imgの入っているdivの中一杯に表示*/
}
/*下段画像*/
.content_bottom {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap        : wrap;/*折り返す設定*/
    -webkit-flex-wrap: wrap;/*Safariとか*/
    -ms-flex-wrap    : wrap;/*IE10*/
}
.photo{
    width: 25%;
}
</style>
<body>
<div class="inner">
    <section class="content_top">
            <div class="item_1">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="item_2">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="item_3">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
    </section>
    <section class="content_bottom">
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
    </section>
</div>
</body>

</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/*全体の大きさを決めるためのdiv*/
.inner{
    margin: 0 auto;/*innerが真ん中に来るようにするコード*/
    width: 100%;/*お好きな大きさで*/
}
/*上段画像::sectionが使われてますがdivみたいなものです*/
.content_top {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
    justify-content: space-between;
}
.content_top div{
    width: 25%;
}
img{
    width: 100%;/*imgの入っているdivの中一杯に表示*/
}
/*下段画像*/
.content_bottom {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap        : wrap;/*折り返す設定*/
    -webkit-flex-wrap: wrap;/*Safariとか*/
    -ms-flex-wrap    : wrap;/*IE10*/
}
.photo{
    width: 25%;
}
</style>
<body>
<div class="inner">
    <section class="content_top">
            <div class="item_1">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="item_2">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="item_3">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
    </section>
    <section class="content_bottom">
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
            <div class="photo">
                <img src="https://i.sstatic.net/zkVja.png" alt="">
            </div>
    </section>
</div>
</body>

</html>
ソース リンク

いくつかのdivなどを削除しました。
sectionタグを使用していますが、divに置き換えても大丈夫です。

1段目を2段の両端に揃えて均等配置配置したいです。

こちらには全体の枠を決めて、「content: space-between;」で両端をそろえられるようにしました。

.inner{
    margin: 0 auto;/*innerが真ん中に来るようにするコード*/
    width: 100%;/*お好きな大きさで*/
}
/*上段画像::sectionが使われてますがdivみたいなものです*/
.content_top {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
    justify-content: space-between;
}

3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。

画像を4つなので1つを25%でサイズを指定しました。
25%のdivが4つ並ぶと自動的に下に来るようになっています。

img{
    width: 100%;/*imgの入っているdivの中一杯に表示*/
}
/*下段画像*/
.content_bottom {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap        : wrap;/*折り返す設定*/
    -webkit-flex-wrap: wrap;/*Safariとか*/
    -ms-flex-wrap    : wrap;/*IE10*/
}
.photo{
    width: 25%;
}

一応Edgeでも同じように動くと思います。
marginを特には指定していないので、そこは適宜変えてあげるといいかと。
画像のサイズが小さい場合は大きい画面で見ると引き延ばされてしまう可能性があるのでご注意下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
/*全体の大きさを決めるためのdiv*/
.inner{
    margin: 0 auto;/*innerが真ん中に来るようにするコード*/
    width: 100%;/*お好きな大きさで*/
}
/*上段画像::sectionが使われてますがdivみたいなものです*/
.content_top {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;/*最初と最後の子要素を両端に配置しつつ、中の要素はは均等に*/
    justify-content: space-between;
}
.content_top div{
    width: 25%;
}
img{
    width: 100%;/*imgの入っているdivの中一杯に表示*/
}
/*下段画像*/
.content_bottom {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap        : wrap;/*折り返す設定*/
    -webkit-flex-wrap: wrap;/*Safariとか*/
    -ms-flex-wrap    : wrap;/*IE10*/
}
.photo{
    width: 25%;
}
</style>
<body>
<div class="inner">
    <section class="content_top">
            <div class="item_1">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="item_2">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="item_3">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
    </section>
    <section class="content_bottom">
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
            <div class="photo">
                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
            </div>
    </section>
</div>
</body>

</html>