Q&A
Wordpressでは問題なく画像が表示されるのですが、
IEなどではちゃんとに表示されず上にあった画像が若干下にズレてしまいます。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 21.0.5.0 for Windows"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script type="text/javascirpt" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script type="text/javascript" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script> $(function(){ //-------------------------------------// // init Masonry var $grid = $('.grid').masonry({ itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', gutter: '.grid__gutter-sizer', percentPosition: true, stagger: 30, // nicer reveal transition visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); // get Masonry instance var msnry = $grid.data('masonry'); // initial items reveal $grid.imagesLoaded( function() { $grid.removeClass('are-images-unloaded'); $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); //-------------------------------------// // hack CodePen to load pens as pages var nextPenSlugs = [ '202252c2f5f192688dada252913ccf13', 'a308f05af22690139e9a2bc655bfe3ee', '6c9ff23039157ee37b3ab982245eef28', ]; function getPenPath() { var slug = nextPenSlugs[ this.loadCount ]; if ( slug ) { return 'https://s.codepen.io/desandro/debug/' + slug; } } //-------------------------------------// // init Infinte Scroll $grid.infiniteScroll({ path: getPenPath, append: '.grid__item', outlayer: msnry, status: '.page-load-status', }); }); </script> <title></title> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <div class="grid are-images-loaded"> <div class="grid__col-sizer"></div> <div class="grid__gutter-sizer"></div> <ul class="grid"> <li class="grid__item"><a href="img/a.png" rel="lightbox"><img src="img/a.png" alt="…" width="300" height="300"></a> <li class="grid__item"><a href="img/b.png" rel="lightbox"><img src="img/b.png" alt="…" width="300" height="320"></a> <li class="grid__item"><a href="img/c.png" rel="lightbox"><img src="img/c.png" alt="…" width="300" height="360"></a> <li class="grid__item"><a href="img/d.png" rel="lightbox"><img src="img/d.png" alt="…" width="300" height="380"></a> <li class="grid__item"><a href="img/e.png" rel="lightbox"><img src="img/e.png" alt="…" width="300" height="340"></a> <li class="grid__item"><a href="img/f.png" rel="lightbox"><img src="img/f.png" alt="…" width="300" height="400"></a> <li class="grid__item"><img src="images/img1.jpg" alt="" width="300" height="300"> <li class="grid__item"><img src="images/img3.jpg" alt="" width="300" height="320"> <li class="grid__item"><img src="images/img2.jpg" alt="" width="300" height="360"> <li class="grid__item"><img src="images/img5.jpg" alt="" width="300" height="380"> <li class="grid__item"><img src="images/img4.jpg" alt="" width="300" height="340"> <li class="grid__item"><img src="images/img6.jpg" alt="" width="300" height="400"> </ul> <div class="page-load-status"></div> <div class="loader-ellips infinite-scroll-request"><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span></div> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <script src="js/lightbox.js"></script> </body> </html>
CSSの方も随時見せるので良かったら教えて下さい、よろしくお願いします。
こっちがCSSです。
body { margin: 0px; padding: 0px; color: #5c4c3e; /*全体の文字色*/ font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/ font-size: 14px; /*文字サイズ*/ line-height: 2; /*行間*/ background: #fff url(../img/bg.jpg) fixed; /*背景色*/ -webkit-text-size-adjust: none; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;} ul {list-style-type: none;} ol {padding-left: 40px;padding-bottom: 15px;} img {border: none;max-width: 100%;height: auto;vertical-align: middle;} a:hover img {opacity: 0.6} table {border-collapse:collapse;font-size: 100%;border-spacing: 0;} iframe {width: 100%;} *h2見出しタグの設定 ---------------------------------------------------------------------------*/ h2 { clear: both; margin-bottom: 15px; color: #fff; /*文字色*/ padding: 5px 20px; /*上下、左右への余白*/ background: #5c4c3e; /*背景色*/ border-radius: 4px; /*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/ } /*h3見出しタグの設定 ---------------------------------------------------------------------------*/ h3 { clear: both; margin-bottom: 15px; padding: 3px 20px; /*上下、左右への余白*/ border-radius: 4px; /*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/ border: 2px solid #5c4c3e; /*枠線の幅、線種、色*/ } /*段落タグ設定 ---------------------------------------------------------------------------*/ p { padding: 0px 20px 20px; /*上、左右、下への余白*/ } /*リンク設定 ---------------------------------------------------------------------------*/ a { color: #5c4c3e; /*リンクテキストの色*/ -webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/ transition: 0.5s; /*同上*/ } a:hover { color: #d50f26; /*マウスオン時の文字色*/ } /*コンテナー（ホームページを囲む一番外側のブロック） ---------------------------------------------------------------------------*/ #container { width: 80%; /*ブロックの幅を画面の80%にする設定。*/ max-width: 1000px; /*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/ margin: 5% auto 0px; /*HP画面の左右中央に表示させる設定。最初の5%は上(コンテナーの外側)に空ける余白の指定。*/ background: #fff; /*背景色（古いブラウザ用）*/ background: rgba(255,255,255,0.9); /*背景色。rgba値は左３つが色指定(この場合は白)で最後の小数点が透明度。*/ border-radius: 10px; /*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/ padding: 4%; /*ブロック内の余白*/ -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); /*影の設定。右へ・下へ・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/ box-shadow: 0px 0px 6px rgba(0,0,0,0.3); /*同上*/ overflow: hidden; } /*メニュー ---------------------------------------------------------------------------*/ /*メニュー全体を囲むブロック*/ #menubar { margin: 50px 0px; /*メニューブロックの上下(ブロックの外側)に空けるスペース*/ border-top: 3px solid #5c4c3e; /*上の線の幅、線種、色*/ border-bottom: 3px solid #5c4c3e; /*下の線の幅、線種、色*/ text-align: center; /*メニューブロックの内容をセンタリングする設定*/ } /*メニュー１個あたりの設定*/ #menubar li { display: inline; /*横並びにする設定*/ } #menubar li a { text-decoration: none; padding: 10px 20px; /*10pxは上下に、20pxは左右へ空ける余白指定。*/ color: #5c4c3e; /*文字色*/ font-size: 20px; /*文字サイズを少し大きくする設定。お好みで変更して下さい。*/ letter-spacing: 0.2em; /*文字感覚を少し広くする設定。広くしないでいいなら、この１行を削除。*/ } body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 2000px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 32%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .grid__item { margin-bottom: 20px; float: left; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid__item--width2 { width: 66%; } .grid__item img { display: block; max-width: 100%; } .page-load-status { display: none; /* hidden by default */ padding-top: 20px; border-top: 1px solid #DDD; text-align: center; color: #777; } /* loader ellips in separate pen CSS */
あなたの回答
tips
プレビュー
