ここから本文です

レスポンシブデザイン HTML 画像の並べ方について 閲覧有難うございます。

dol********さん

2017/12/1413:13:03

レスポンシブデザイン HTML 画像の並べ方について

閲覧有難うございます。

添付した画像のように、閲覧する画面の大きさによって横長と縦長を入れ替えたいのですが、何度やっても横長のまま縮小されてしまいます。
どうすれば良いのか、知恵をお貸し頂ければ助かります。

下記に今使っているHTMLとCSSを記載しておきます。
どうか宜しくお願い致します。

------------------------------

HTML

<div class="resizebox3"><div class="CEN">
<a href="url"><img class="list" src="画像" alt="1"></a>
<a href="url"><img class="list" src="画像" alt="2"></a>
<a href="url"><img class="list" src="画像" alt="3"></a>
<a href="url"><img class="list" src="画像" alt="4"></a>
<a href="url"><img class="list" src="画像" alt="5"></a>
<a href="url"><img class="list" src="画像" alt="6"></a>
<a href="url"><img class="list" src="画像" alt="7"></a>
<a href="url"><img class="list" src="画像" alt="8"></a>
</div></div>


CSS

img {
width:100%;
height:auto;
vertical-align:bottom;
}

.resizebox3 {
display:flex;
width:100%;
max-width:960px;
margin:60px auto;
border:4px solid #ff5ca9;
border-radius: 10px 10px 10px 10px;
text-align: center:
}

/* 幅767px以下の場合 */
@media only screen and (max-width:767px) {
.resizebox3 {
display:block;
border-radius: 10px 10px 10px 10px;
}
}

.CEN{
text-align: center;}


.list {
box-sizing:border-box;
width: 20%;
height: auto;
line-height: 105%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
}

list&amp;quot,URL&amp;quot,img class,a&amp;gt,a href,img.jpg&amp;quot,resizebox3&amp;quot

閲覧数:
101
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2017/12/1514:51:58

<img> の横幅を、
<div class="resizebox3"> の 20% に設定しているんだから、
画面幅に合わせて画像もそのままいっしょに縮小されて当然。

<div class="resizebox3"> が大きかろうが小さかろうが、
画像はその 20% の横幅になるんだから。

それに、
画像の横幅を px で固定したとしても、
<div class="resizebox3"> の横幅を % で指定してるんで、
大きい画面では4列、小さい画面では2列、なんて、
都合のいい結果にはならない。
画面が小さくなるにつれ、
4列⇒3列⇒2列⇒1列 という風にはみ出した部分が下に落ちていくだけ。

あと、
画像リンクを FlexBox でレイアウトしたいのなら、
「display:flex」を指定するのは
<div class="resizebox3"> じゃなくて <div class="CEN"> じゃないか?
<div class="resizebox3"> をフレックスコンテナーにしたら、
フレックスアイテムは <div class="CEN"> 1つだけ、ってことになる。

その他もろもろ、
指定する対象と値が合っていなくておかしいが、
面倒なんで1つ1つ修正しないでやり方だけ回答します。
とりあえず CEN は必要ないんで消す。

-----------------------------------------

4列、2列を不連続に切り替える状況として、
パターンは2通りある。


【 パターン1 】

ある画面サイズを境に、
画像リンクの幅を切り替えるパターン。

━━━━━━━━━━━━━━━━
<div class="resizebox3">
<a href="url"><img class="list" src="img.jpg" alt="1"></a>
<a href="url"><img class="list" src="img.jpg" alt="2"></a>
<a href="url"><img class="list" src="img.jpg" alt="3"></a>
<a href="url"><img class="list" src="img.jpg" alt="4"></a>
<a href="url"><img class="list" src="img.jpg" alt="5"></a>
<a href="url"><img class="list" src="img.jpg" alt="6"></a>
<a href="url"><img class="list" src="img.jpg" alt="7"></a>
<a href="url"><img class="list" src="img.jpg" alt="8"></a>
</div>

<style type="text/css">
/* フレックスコンテナー */
.resizebox3 {
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
width: 100%;
max-width: 960px;
padding: 4px;
margin: 60px auto;
border: 4px solid #ff5ca9;
border-radius: 10px 10px 10px 10px;
}
/* フレックスアイテム */
.resizebox3 a{
display: block;
box-sizing: border-box;
width: 25%; /* 4列配置 */
border: solid 2px transparent;
}
/* 画像 */
.list {
width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}

/* 幅767px以下の場合 */
@media only screen and (max-width:767px) {
.resizebox3 a { width: 50% } /* 2列配置 */
}
</style>
━━━━━━━━━━━━━━━━



【 パターン2 】

ある画面サイズを境に、
外枠の幅を切り替えるパターン。

━━━━━━━━━━━━━━━━
<div class="resizebox3">
<a href="url"><img class="list" src="img.jpg" alt="1"></a>
<a href="url"><img class="list" src="img.jpg" alt="2"></a>
<a href="url"><img class="list" src="img.jpg" alt="3"></a>
<a href="url"><img class="list" src="img.jpg" alt="4"></a>
<a href="url"><img class="list" src="img.jpg" alt="5"></a>
<a href="url"><img class="list" src="img.jpg" alt="6"></a>
<a href="url"><img class="list" src="img.jpg" alt="7"></a>
<a href="url"><img class="list" src="img.jpg" alt="8"></a>
</div>

<style type="text/css">
/* フレックスコンテナー */
.resizebox3 {
display: flex;
flex-flow: row wrap;
width: 960px; /* 4列配置 */
padding: 4px;
margin: 60px auto;
border: 4px solid #ff5ca9;
border-radius: 10px 10px 10px 10px;
}
/* フレックスアイテム */
.resizebox3 a{
display: block;
box-sizing: border-box;
width: 240px; /* 画像リンクは固定幅 */
border: solid 2px transparent;
}
/* 画像 */
.list {
width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}

/* 幅767px以下の場合 */
@media only screen and (max-width:960px) {
.resizebox3 { width: 480px } /* 2列配置 */
}
</style>
━━━━━━━━━━━━━━━━

質問した人からのコメント

2017/12/18 13:11:10

ご回答有難うございました。解説も解り易くして頂き誠に感謝致します。こちらで試してみた所希望通りの形になっておりました。本当にどうも有難うございました。

ベストアンサー以外の回答

1〜1件/1件中

nek********さん

2017/12/1414:17:01

取り敢えず何も考えずに以下のタグをheadタグ内にいれてみてください

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

これの意味は「HTML viewport レスポンシブ」とかでググれば出てきます

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる