cssコードのレイアウト

前提・実現したいことccc

HTML,CSSでWebサイトを作っています。
CSSでレイアウトを合わせているときに
以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

containerセレクタに指定したwidth幅に
二列で表示予定のimg画像の幅をあわせたいのですが、
画像間の余白を指定したまま、
画像のpadding-left,padding-rightを
containerのwidth幅に合わせることができない状態です。

該当のソースコード

使用言語：HTML,CSS

ソースコード　
[HTML]
<header>
        <div class="container">
            <div class="header-left">
                <a class="logo" href="index.html"><img src="●○○○○●○○○○●○○○○.png"></a>
            </div>
            <div class="header-right">
                <a href="index02.html">●○○○○</a>
                <a href="index03.html">●○○○○</a>
                <a href="index04.html">●○○○○</a>
                <a href="index05.html">●○○○○</a>
            </div>
            </div>
    </header>

<div class="content-wrapper">
        <div class="container">
            <div class="heading">
                <h2>●○○○○</h2>
            </div>
            <div class="contents">
                
                <div class="content">
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                </div>
                
                <div class="content">
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                </div>

<footer>
        <div class="container">
            <div class="border"></div>
            <div class="footer-left">
                <a href="index02.html">●○○○○</a>
                <a href="index03.html">●○○○○</a>
                <a href="index04.html">●○○○○</a>
                <a href="index05.html">●○○○○</a>
            </div>
            <span class="copy">©️ ●○○○○ 2020
            </span>
        </div>
    </footer>
------------------------------------------------------------------------
[CSS]
.container {
    width: 1170px;
   
    margin: 0 auto;
}

.content-wrapper {
    height: 1550px; 
}
.content-wrapper img {
    width: 510px;
    height: 330px;
    object-fit: cover;
}
.content-wrapper img:hover {
    opacity: 0.7;
}
.content-wrapper p {
    padding-top: 10px;
    font-size: 12px;
    color: #5f5d60;
    letter-spacing: 3px;
    
}
.contents {
    display: flex;
    flex-wrap: wrap;
}
.content {
    width: 50%;
    float: left;
    text-align: center;
    padding-bottom: 150px;
}
.content-icon {
    position: relative;
}
.content-icon p {
    position: absolute;
    width: 100%;
    text-align: center;
}
footer {
    height: 150px;
    padding-bottom: 60px;
    
}
.border {
    border-top: 1px solid #E0E0E0;
    width: 100%;
    
}
.footer-left a {
    
    margin-top: 127px;
    padding-right: 70px;
    color: #5f5d60;
    letter-spacing: 5px;
    display: block;
    float: left;
    transition: all 0.4s;
    font-size: 14px;
}
.footer-left a:hover {
    color: dimgray; 
    opacity: 0.2;
}
.copy {
    color: #5f5d60;
    font-size: 12px;
    letter-spacing: 3px;
    float: right;
    padding-top: 129px;
    
}

試したこと

display: flex;などを試してみましたが、
画像間の余白を指定したまま、
class名をcontentsとしている幅を
container幅に合わせることができない状況です。

補足情報（FW/ツールのバージョンなど）

Brackets最新バージョン1.14.2を使用しています。
補足画像を添付いたしました。

FrontEnd_Japan

2020/07/16 02:22

画像間の余白は指定された数値で固定でしょうか。それ以下もそれ以上もない想定でしょうか。

Lhankor_Mhy

2020/07/16 02:25 編集

「画像間の余白を指定したまま」とは、具体的にはどういうことですか？たとえば、CSSコードで言うとどの部分で指定しているのでしょうか？

user20

2020/07/16 04:32

FrontEnd_Japan様、Lhankor_Mhy様情報の追加のご連絡をいただき、誠にありがとうございます。質問の際にわかりにくい説明となってしまい、申し訳ございませんでした。画像間の余白については、指定した数値で固定したままで、 container幅まで広げたいです。 CSSコードで言うと、 .content { width: 50%; float: left; text-align: center; padding-bottom: 150px; text-align: left; } .content-icon { position: relative; } .content-icon p { position: absolute; width: 100%; text-align: center; } の箇所になるかと思います。 ※補足情報において、「余白幅固定」と記載した部分は、数値指定していないのですが、仮に100pxのマージンとした場合、画像幅をcontainer幅いっぱいまで合わすコードの書き方を知りたいです。長文となってしまい、お手数おかけいたしますがよろしくお願いいたします。

Lhankor_Mhy

2020/07/16 04:49

つまり、固定サイズレイアウト、ということですよね？そうすると 1170 - 510*2 = 150 ですから、「画像間の余白」は150pxということでよろしいのですよね？

user20

2020/07/16 04:53

Lhankor_Mhy　様その通りです。 150pxでよろしくお願いいたします。

Lhankor_Mhy

2020/07/17 04:07

であれば、wing283さんのひとつ目のコードの通りで問題ないはずです。

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

回答1件

ベストアンサー

やり方はいくつかあります。

単純にこれでいけます。

.content { text-align: left;}
.content:nth-child(2) { text-align: right;}

また、レスポンシブの場合imgは固定値にしないで100%を使うといいかもです。
その場合は.contentのwidth値やmargin値も%を使うと良いです。

.content-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.content {
    width: 48%;
    float: left;
    text-align: center;
    padding-bottom: 150px;
    margin: 0 2% 0 0;
}
.content:nth-child(2) {
    width: 48%;
    margin: 0 0 0 2%;
}

追記


        <div class="container">
            <div class="header-left">
                <a class="logo" href="index.html"><img src="●○○○○●○○○○●○○○○.png"></a>
            </div>
            <div class="header-right">
                <a href="index02.html">●○○○○</a>
                <a href="index03.html">●○○○○</a>
                <a href="index04.html">●○○○○</a>
                <a href="index05.html">●○○○○</a>
            </div>
            </div>
    </header>

<div class="content-wrapper">
        <div class="container">
            <div class="heading">
                <h2>●○○○○</h2>
            </div>
            <div class="contents">

                <div class="content">
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                    <div class="content-icon">
                        <a href="●○○○○"><img src="●○○○○.jpg"></a>
                        <p>●○○○○</p>
                    </div>
                </div>

<footer>
        <div class="container">
            <div class="border"></div>
            <div class="footer-left">
                <a href="index02.html">●○○○○</a>
                <a href="index03.html">●○○○○</a>
                <a href="index04.html">●○○○○</a>
                <a href="index05.html">●○○○○</a>
            </div>
            <span class="copy">©️ ●○○○○ 2020
            </span>
        </div>
    </footer>

<style>
.container {
    width: 1170px;
    margin: 0 auto;
}
.content-wrapper {
    height: 1550px; 
}
.content-wrapper img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}
.content-wrapper img:hover {
    opacity: 0.7;
}
.content-wrapper p {
    padding-top: 10px;
    font-size: 12px;
    color: #5f5d60;
    letter-spacing: 3px;
}
.contents {
    display: flex;
    flex-wrap: wrap;
}
.content {
    width: 100%;
    font-size: 0;
}
.content-icon {
    width: calc( (100% / 6) - 63px);
    margin: 0 75px 0 0;
    display: inline-block;
}
.content-icon:last-child {
margin: 0;
}
.content-icon {
    position: relative;
}
.content-icon a { display: block;}
.content-icon p {
    width: 100%;
    text-align: center;
}
footer {
    height: 150px;
    padding-bottom: 60px;

}
.border {
    border-top: 1px solid #E0E0E0;
    width: 100%;

}
.footer-left a {
    margin-top: 127px;
    padding-right: 70px;
    color: #5f5d60;
    letter-spacing: 5px;
    display: block;
    float: left;
    transition: all 0.4s;
    font-size: 14px;
}
.footer-left a:hover {
    color: dimgray; 
    opacity: 0.2;
}
.copy {
    color: #5f5d60;
    font-size: 12px;
    letter-spacing: 3px;
    float: right;
    padding-top: 129px;

}
</style>

投稿2020/07/16 02:35

編集2020/07/17 09:32

wing283

総合スコア123

user20

2020/07/16 04:06

wing283　様ご回答いただき、誠にありがとうございます。一点、ご質問したいのですが、添付した補足画像の「余白幅固定」の幅を変更せずに画像の幅をcontainer幅にまで広げるためのコードをおわかりでしょうか。お手数おかけしますが、よろしくお願いいたします。

wing283

2020/07/16 04:24

imgがwidth:100%前提ですが、 .content { width: calc( 50% - 37.5px); text-align: left; margin: 0 37.5px 0 0; } .content:nth-child(2) { text-align: right; margin: 0 0 0 37.5px; } .content-wrapper img { width: 100%; } でいけるかと。

user20

2020/07/17 05:35

wing283　様昨日は、追加の質問に対してもご回答いただき、ありがとうございました。追加質問のご回答に記載していただいたコードを試しているのですが、うまくできない状況です。 img画像６枚を２列にしたいのですが、補足画像で示した「余白幅固定」の値がずれてしまいます。誠に恐縮なのですが、こちらからCSSコードを送らせていただき、どのように回答文を反映させるか教えていただくことは可能でしょうか。以下、試してみたことを記載しました。・CSSの.content数値を　.content { text-align: left;} 　.content:nth-child(2) { text-align: right;}に変更。　また、imgのwidthを100%にして　.content { 　width: calc( 50% - 37.5px); 　text-align: left; 　margin: 0 37.5px 0 0; 　} 　.content:nth-child(2) { 　text-align: right; 　margin: 0 0 0 37.5px; 　} 　.content-wrapper img { 　width: 100%; 　}のように変更することも試しました。　お手数おかけしますが、よろしくお願いいたします。もし、現時点でのCSSコードをお送りしてよろしければのちほど、送らせていただきます。

wing283

2020/07/17 05:55

なぜwidth: calc( 50% - 37.5px);にしたのかなぜmargin: 0 37.5px 0 0;なのかなぜ.content:nth-child(2) を追記したのか。それは画像が2枚だからです。条件が変われば数字も変わります。あとずっと気になっていたのですが、余白幅固定は何pxですか？

user20

2020/07/17 07:15

「余白幅固定」は150pxです。

wing283

2020/07/17 07:25

6枚の画像の間に150pxの余白を入れると... かなり大きな幅なんですね... あと、divを使っていますがul liは使わないのですか？

user20

2020/07/17 07:52

失礼いたしました。画像間の余白は75pxです。画像からリンク先に飛ばしたいので、 ulやliは使わず、aタグを使用しております。

wing283

2020/07/17 09:33

追記で書かせていただきました。