バナーのサイズについて

前回の質問では情報が不足だったようなので、HTML・CSSを記載させていただきます
サンプルの上のように同じサイズのバナーが並んでいるうちの1個をハーフサイズにして並べたいのですが、可能でしょうか？
実現可能なご教授をお願いいたします。


HTML
<ul class="bannerArea container">
<li><a href="https://www.amazon.co.jp/" target="_blank"><img src="/images/amazon_01.jpg" alt="amazon"></a></li>
<li><a href="https://www.google.co.jp/" target="_blank"><img src="/images/google_02.jpg" alt="google"></a></li>
<li><a href="https://www.rakuten.co.jp/" target="_blank"><img src="/images/rakuten_03.jpg" alt="楽天市場"></a></li>
<li><a href="https://www.yahoo.co.jp/" target="_blank"><img src="/images/yahoo_04.jpg" alt="YAHOO"></a></li>
<li><a href="https://auctions.yahoo.co.jp/" target="_blank"><img src="/images/auctions.jpg" alt="ヤフオク"></a></li>
※ <li><a href="https://shopping.yahoo.co.jp/" target="_blank"><img src="/images/shopping_02.jpg" alt="YAHOO!!ショッピング"></a></li>
<li><a href="https://www.msn.com/ja-jp" target="_blank"><img src="/images/msﾝ.jpg" alt="msn"></a></li>
</ul>


CSS
.bannerArea {
margin-top: 70px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.bannerArea {
margin-top: 40px;
}
}
.bannerArea li {
width: 32%;
margin-right: 2%;
}
@media screen and (max-width: 767px) {
.bannerArea li {
width: 48%;
margin-right: 4%;
}
}
@media screen and (min-width: 768px) {
.bannerArea li:nth-child(3n) {
margin-right: 0;
}
}
@media screen and (max-width: 767px) {
.bannerArea li:nth-child(n+3) {
margin-top: 4%;
}
}
@media screen and (min-width: 768px) {
.bannerArea li:nth-child(n+4) {
margin-top: 2%;
}
}
@media screen and (max-width: 767px) {
.bannerArea li:nth-child(even) {
margin-right: 0;
}
}
.bannerArea li a {
display: block;
}
.bannerArea li img {
vertical-align: bottom;
width: 100%;
}

質問者からの補足コメント

• fujillin　様
  
  ご教授ありがとうございます。
  CSS反映させると添付図のようになりました
  当方の希望にかなり近くなったのですが、ハーフサイズのボタン配置で上部を合わすようにできないでしょうか？
  
  よろしくお願いいたします。

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2020/07/10 05:50

• いろいろと誠に申し訳ありません
  PC画面にて確認すると左に寄っているのですが、中央寄せにできないでしょうか
  ほぼ、それで完璧になります
  何卒よろしくお願いいたします。

    補足日時：2020/07/10 08:53

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/07/09 13:14

こんにちは

細部をどうしたいのかイマイチわかりませんが、雰囲気として近くなるかも・・・
（特に、高さ方向はほぼ無制御です）

.bannerArea, .bannerArea * { padding: 0; margin: 0; }

.bannerArea {
margin-top: 70px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
}

.bannerArea li{ width: 32%; margin-bottom: 1vw; }
.bannerArea li:nth-child(5), .bannerArea li:nth-child(6){ width: 15%; }

.bannerArea li img { vertical-align: bottom; width: 100%; }

@media screen and (max-width: 767px) {
.bannerArea { margin-top: 40px; }
.bannerArea li { width: 48%; }
.bannerArea li:nth-child(5), .bannerArea li:nth-child(6){ width: 22%; }
}

この回答へのお礼

No1　　様

適切なご教授ありがとうございました。
プレーンの状態でしたら、希望通りの表示をしてくれました。
何かの宣言が影響しているようなので、いろいろと試してみたいと思います。

感謝

お礼日時：2020/07/10 12:45

No.2 回答者： fujillin 回答日時： 2020/07/10 11:17

No1です。

＞PC画面にて確認すると左に寄っているのですが～
回答はUL要素内で中央配置になっているはずです。（こちらの環境で確認済）
ご提示のHTMLだけの内容と、回答のCSSだけ（他はstyle属性も削除）にした状態でご確認してみてください。
（画像自体に余白が含まれていると、見た目に中央寄せに見えない可能性はありますが）

＞上部を合わすようにできないでしょうか？
No1の回答にも記しましたが、高さ方向に関してはほぼ制御していません。
＞細部をどうしたいのかイマイチわかりませんが、雰囲気として近くなるかも・・・
＞（特に、高さ方向はほぼ無制御です）
という通りですが、何故高さを考慮できないかというと、各画像の作られ方やサイズのばらつき等の影響があるため（その情報が全くないので）で、結果的にほぼブラウザ任せのレイアウトになっています。

回答したCSSのなかで、高さ方向に関係する直接的な記述は以下の2点のみです。
＞margin-bottom: 1vw;
＞vertical-align: bottom;

最初の指定は、ご提示のCSSで点在するmargin-topの指定を1箇所にまとめて指定したものです。（値は変えてあります）
元のCSSの意図がわかりませんでしたが、添付図でレイアウトの上下に若干の余白があるように見られるので、ひとまず（適当に）余白をとったものです。

次の指定は、ご提示のCSSに指定があったので、質問者様にそのような意図があるものと解釈して、そのままの記述を残してあるだけです。
ですので、私の意図は何もありません。（私個人が作成するならこの指定は外します）


もしも、CSSの意味が理解できないようなら、ひとまず、画像の高さを一律にしてしまうか、LI要素の高さを揃えておけば良いのではないでしょうか。
例えば、
　li { height: 50px; overflow: hidden; }
とか。
上記でも揃わないなら、各画像の内容（余白が含まれるなど）による影響と考えられます。