質問が多くてすみません。（現在独学でBootstrapを参考してHPを制作しています。）表題の通り、モバイルの画面サイズに合わせて画像を縮小して「以下の理想（モバイル版）」のように並べるにはどうしたら良いか教授いただきたいです。よろしくお願い致します。 ■HP版 ![イメージ説明](9a63e3f07f7138e429d0a255a88c3e58.png) ■モバイル版 ![イメージ説明](ce204258282dd58ee53c19dd82d6ae03.png) ■理想（モバイル版） ![イメージ説明](baf19202229af36318533f76d027eba2.png) ```HTML

Photos

All
肉食
草食
他

動物１

動物２

動物３

動物４

動物５

動物６

``` ```CSS .Photos .section-title h2{ font-size: 70px; font-weight: 700; } .Photos .Photos-item { margin-bottom: 30px; } .Photos #Photos-flters { padding: 0; margin: 0 auto 25px auto; list-style: none; text-align: center; } .Photos #Photos-flters li { cursor: pointer; display: inline-block; padding: 10px 18px 12px 18px; font-size: 14px; font-weight: 400; line-height: 1; text-transform: uppercase; color: #555555; transition: all 0.3s ease-in-out; margin: 0 4px 10px 4px; background: whitesmoke; border-radius: 4px; } .Photos #Photos-flters li:hover, .Photos #Photos-flters li.filter-active { background: #7cc576; color: #fff; } .Photos #Photos-flters li:last-child { margin-right: 0; } .Photos .Photos-wrap { transition: 0.3s; position: relative; overflow: hidden; z-index: 1; background: rgba(0, 0, 0, 0.6); } .Photos .Photos-wrap::before { content: ""; background: rgba(21, 21, 21, 0.6); position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; } .Photos .Photos-wrap .Photos-info { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 3; transition: all ease-in-out 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; } .Photos .Photos-wrap .pPhotos-info::before { display: block; content: ""; width: 48px; height: 48px; position: absolute; top: 35px; left: 35px; border-top: 3px solid #fff; border-left: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; } .Photos .Photos-wrap .Photos-info::after { display: block; content: ""; width: 48px; height: 48px; position: absolute; bottom: 35px; right: 35px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; } .Photos .Photos-wrap .Photos-info h4 { font-size: 20px; color: #fff; font-weight: 600; } .Photos .Photos-wrap .Photos-info p { color: #ffffff; font-size: 14px; text-transform: uppercase; padding: 0; margin: 0; } .Photos .Photos-wrap .Photos-links { text-align: center; z-index: 4; } .Photos .Photos-wrap .Photos-links a { color: #fff; margin: 0 2px; font-size: 28px; display: inline-block; transition: 0.3s; } .Photos .Photos-wrap .Photos-links a:hover { color: #7cc576; } .Photos .Photos-wrap:hover::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; } .Photos .Photos-wrap:hover .Photos-info { opacity: 1; } .Photos .Photos-wrap:hover .Photos-info::before { top: 15px; left: 15px; } .Photos .Photos-wrap:hover .Photos-info::after { bottom: 15px; right: 15px; } ```

	@@ -1 +1 @@
1	- モバイルの画面サイズに合わせて画像を縮小して並べるには~~どうしたら良いでしょうか~~
1	+ モバイルの画面サイズに合わせて画像を縮小して並べるには

質問編集履歴