Q&A
いつもお世話になっています。
今、Masonry を使って２カラム（左メニュー固定）のウェブページを作っているのですが、可変ページ側がどうしてもうまく表示できません。
ゴールはこのような感じにしたいです。
https://www.frontiertouring.com/
masonry を使って画像を表示させているのですが、いくつかの写真が表示されない、もしくは切れて表示されてしまっています。何かいい方法はないでしょうか。。。
<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <style> body{ background-color: #f5f5f5; font-size: 1.2em; margin: 0; padding: 0; font-family:'Raleway','Roboto', sans-serif; } h1, h2, h3, h4, h5, p, a, iframe, figure, figcaption, img{ margin: 0; padding: 0; font-weight: normal; } iframe{vertical-align: bottom;} img{vertical-align: bottom;} a:link {color:black; text-decoration:none } a:visited {color:black; text-decoration:none } a:hover { color:black; text-decoration:none } a:active {color:black; text-decoration:none } .font_space {letter-spacing: 0.05em;} /*header */ #header { width: 100%; height: 50px; position: fixed; top: 0; color: white; text-align: center; background: #191919; z-index: 2; } #contents { width:100%; margin-top: 50px; z-index: 1; overflow: hidden; } #head_wrap{ display:inline-block; text-align:center; overflow: hidden; margin-top:5px; background: #191919; } #head_wrap h1{ font-family: "Special Elite", sans-serif ; letter-spacing: 0.1em; padding-left:15px; float:left; } h1 a:link {color:#fff; text-decoration:none } h1 a:visited {color:#fff; text-decoration:none } h1 a:hover { color:#fff; text-decoration:none } h1 a:active {color:#fff; text-decoration:none } .wrapper { text-align: center; overflow: hidden; width:100%; } .grid{ float:left; overflow: hidden; margin-left: 298px; max-width: 1024px; width: 100%; } .grid-item { margin-top: 10px; margin-bottom: 10px; } .menu_box{ display:inline-block; width:288px; margin: 0; background: #191919; position: fixed; overflow: hidden; } ul#menu{ list-style:none; margin:0; padding:0; } #menu{ width:288px; border-bottom:none; } .main_menu{ background:#191919; color:#fff; font-family:"Special Elite"; padding:10px 10px; margin:0; text-align:left; width:288px; letter-spacing: 0.05em; border:1px solid #fff; } .left-side{ overflow: hidden; float:left; background: #191919; } </style> </head> <body> <header id="header"> <div id="head_wrap"> <h1>test</h1> </div><!--head_wrap--> </header> <div id="contents"> <div class="wrapper"> <div class="left-side"> <div class="menu_box"> <ul id="menu"> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> </ul> </div><!--menu_box--> </div><!--left-side--> <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "fitWidth": true, "gutter": 10, "columnWidth": 118 }'> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>1</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>2</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>3</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>4</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>5</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>6</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>7</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>8</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>9</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>10</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>11</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>12/p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>13</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>14</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>15</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>16</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>17</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>18</p></div> </div>\ <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>19</p></div> </div> </div><!-- grid --> </div><!--wrapper--> </div><!--contents--> </body> </html>
回答1件
0
こんばんは。ずいぶん前なのでもう解決なさったかと思いますが、
一応私のやったことをお伝えさせていただこうと思います。
cssのgridのところmax-width: 80%;といたしました。
あと168行目あたり div class="grid" data-masonryのところの true を false に変更しました。
いかがでしょうか？
<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <style> body{ background-color: #f5f5f5; font-size: 1.2em; margin: 0; padding: 0; font-family:'Raleway','Roboto', sans-serif; } h1, h2, h3, h4, h5, p, a, iframe, figure, figcaption, img{ margin: 0; padding: 0; font-weight: normal; } iframe{vertical-align: bottom;} img{vertical-align: bottom;} a:link {color:black; text-decoration:none } a:visited {color:black; text-decoration:none } a:hover { color:black; text-decoration:none } a:active {color:black; text-decoration:none } .font_space {letter-spacing: 0.05em;} /*header */ #header { width: 100%; height: 50px; position: fixed; top: 0; color: white; text-align: center; background: #191919; z-index: 2; } #contents { width:100%; margin-top: 50px; z-index: 1; overflow: hidden; } #head_wrap{ display:inline-block; text-align:center; overflow: hidden; margin-top:5px; background: #191919; } #head_wrap h1{ font-family: "Special Elite", sans-serif ; letter-spacing: 0.1em; padding-left:15px; float:left; } h1 a:link {color:#fff; text-decoration:none } h1 a:visited {color:#fff; text-decoration:none } h1 a:hover { color:#fff; text-decoration:none } h1 a:active {color:#fff; text-decoration:none } .wrapper { text-align: center; overflow: hidden; width:100%; } .grid{ float:left; overflow: hidden; margin-left: 298px; max-width: 80%; width: 100%; border:1px solid red; } .grid-item { margin-top: 10px; margin-bottom: 10px; } .menu_box{ display:inline-block; width:288px; margin: 0; background: #191919; position: fixed; overflow: hidden; } ul#menu{ list-style:none; margin:0; padding:0; } #menu{ width:288px; border-bottom:none; } .main_menu{ background:#191919; color:#fff; font-family:"Special Elite"; padding:10px 10px; margin:0; text-align:left; width:288px; letter-spacing: 0.05em; border:1px solid #fff; } .left-side{ overflow: hidden; float:left; background: #191919; } </style> </head> <body> <header id="header"> <div id="head_wrap"> <h1>test</h1> </div><!--head_wrap--> </header> <div id="contents"> <div class="wrapper"> <div class="left-side"> <div class="menu_box"> <ul id="menu"> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> <li><div class="main_menu">menu</div></li> </ul> </div><!--menu_box--> </div><!--left-side--> <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "fitWidth": false, "gutter": 10, "columnWidth": 118 }'> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>1</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>2</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>3</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>4</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>5</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>6</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>7</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>8</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>9</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>10</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>11</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>12</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>13</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>14</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>15</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>16</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>17</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>18</p></div> </div> <div class="grid-item"> <div class="grid-item_image"> <img src="https://www.instagram.com/p/BRiHZEmhnj5/media?size=m" width="236" height="236"><p>19</p></div> </div> </div><!-- grid --> </div><!--wrapper--> </div><!--contents--> </body> </html>
次にゴールはこんな感じにしたいというページの
All Pre-Sale By Date ACT NSWなどをクリックして各当画像を選ぶところは
http://black-flag.net/jquery/20120620-3927.html
jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法 が参考になると思います。
お役に立てれば幸いです。
投稿2018/11/23 11:16
総合スコア12
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。