<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WORKS/2015_PRESENT</title> <link href="../../css/reset.css" rel="stylesheet" type="text/css"> <link href="../../css/style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> </head> <body> <div id="wrapper_work_sub"> <div id="content"> <div id="works_sakuhin"> <ul class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'> <li class="grid-item"><img src="../../img/2015_present/2017_01.jpg" width="4000" height="3000" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_10.jpg" width="4000" height="1933" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_09.jpg" width="3000" height="2609" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_08.jpg" width="3543" height="2363" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_07.jpg" width="3000" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_06.jpg" width="3000" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_05.jpg" width="3000" height="2229" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_04.jpg" width="2000" height="1489" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_03.jpg" width="2045" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_02.jpg" width="960" height="678" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_01.jpg" width="3467" height="3000" alt=""/></li> </ul> </div> </div> </div> </body> </html>
こちらのサイト
https://allabout.co.jp/gm/gc/402549/2/
にならい、コードを書いてみたんですが、上手くこのサイトのように動きません。
参考サイトを試したんですが、画像がスマホの画面サイズ横幅いっぱいに縦に重なるだけで二列になってくれません、ブラウザを広げてもそのまま画像が画面いっぱいに広がるだけでした。
以下追記です。
画像がスマホの画面サイズ横幅いっぱいになるのは、他のページで書いていたcssがこの画像タグにも影響していたからでした。この部分は自己解決しました。
そして、回答にて指摘された画像サイズを小さくした所、きちんと動いてくれました。ありがとうございました。
ですが、問題としては画像サイズをそのまま使用したいので、画像サイズを変更しないともちろんのこと画像が広がるだけでフロート出来るスペースは出来ません。そこで、imgタグにwidth50%height:autoをかけてみたんですが、そうすると今度はきちんと動かなくなってしまいました。
画像サイズをそのままで、スマホの画面サイズで縦2列高さが違う要素を並べたい。という質問に変更したいんですが、こんな書き方で大丈夫でしょうか?
もし解決方法が分かる方、宜しくお願い致します。
回答3件
あなたの回答
tips
プレビュー