- ベストアンサー
masonry.jsで並べた画像を綺麗に敷き詰める
こんにちは、お世話になります。 大分レイアウト、アニメーションのjsの仕組みを理解してきたんですが masonry.jsはまだちょっと解りません。 これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか？ ご教示お願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } $grid.infiniteScroll({ path: getPath, append: '.grid__item', outlayer: msnry, scrollThreshold: 40, hideNav: '.pagination', status: '.page-load-status', }); }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> </ul> <div class="page-load-status"> <p class="infinite-scroll-request"> <i class="fa fa-spinner fa-spin"></i>Loading... </p> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <div class="pagination"> <a href="page2.html" class="pagination__next">もっと見る</a> </div> </body> </html> CSS--------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .grid__item { margin-bottom: 20px; float: center; } .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: 400px; } .grid__item img { display: block; max-width: 100%; } .page-load-status { display: none; /* hidden by default */
- JackTheRipper99
- お礼率89% (571/641)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7473)
>結局のところmasonryのレイアウトの並び方などの変え方は、CSSで変えるという事でいいんですよね。 あ～それ系は全く興味がないので、わかりませ～ん！ 書いてる通りにやったらどうなるか？を頭でトレースして、 敷き詰められない理由だけを回答しただけなので。 それがどういう結果になるか？って事には、興味がないんですよね。 私の方、単なる呑み屋の暇つぶし程度のスキルなので。ごめんね～
お礼
回答ありがとうございます。 いえいえ、大丈夫です。 いつもAsarKingChangさんの貴重な回答に大変助かっています、参考にさせて頂いています。 そして楽しく拝見させて頂いています。 いや、もう、何というか、AsarKingChangさんだけではなく 色々な回答者様の回答しようというお気持ちと、色々な考え方を 知ることができるのでそれだけで十分助かっています。 また宜しくお願いします。
- AsarKingChang
- ベストアンサー率46% (3467/7473)
やってみましたが、動いてましたよ。 このソース（あとできればCDNでお願いね） >これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか？ もしかしてなんですが。。。 追加じゃなくて削除ではないかと思います。 body { padding: 20px; ←セル同士の間隔が結構広い。 max-width: 640px; ←横幅がかなり狭くされてる。 } それとこの部分 .grid__item, .grid__col-sizer { width: 27%; ←これでは、サイズに関係なく4個目が100%を超えるので、改行されてしまう。 width: 80px; ←こんな風に、1つ当たりのブロックのサイズを決めることで横にどんどん繋がります。 } ってことで、どうですか？
お礼
回答ありがとうございます。 .grid__col-sizer { width: 27%; ←これでは、サイズに関係なく4個目が100%を超えるので、改行されてしまう。 width: 80px; ←こんな風に、1つ当たりのブロックのサイズを決めることで横にどんどん繋がります。 } これが一番ネックでしたね。 綺麗に横に二列並びました。 所で確認ですが、結局のところmasonryのレイアウトの並び方などの変え方は、CSSで変えるという事でいいんですよね。
関連するQ&A
- 画像がフェードインしてからフェードアウトする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .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: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。
- ベストアンサー
- HTML
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- ヘッダーのa要素のメニューが消える
ヘッダーに書いてあるテキストのコメントが消えてしまいます。 ご教示お願いします。 ここからHTML： <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <head> <script src="code.jquery.com_jquery-3.7.0.min.js"></script> </head> ここら辺から書いてあるa要素のコメントが消えてしまいます。 <body> <header class="header"> <nav> <ul> <li><a href="/index.html" id="link_sample">ABOUT</a</li> <li><a href="#works" id="link_sample">WORKS</a></li> <li><a href="#gallery" id="link_sample">GALLERY</a></li> <li><a href="#service" id="link_sample">SERVICE</a></li> </ul> </nav> </header> ここまで： <ul> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> </ul> <script>const animations = document.querySelectorAll('.js-scroll-animation'); function toggle() { animations.forEach((animation) => { //ウィンドウの高さを取得 const height = window.innerHeight; //スクロール量を取得 const scroll = window.scrollY; //要素の位置を取得 const target = scroll + animation.getBoundingClientRect().top; //スクロール位置を判定して要素にクラスを付与 if (scroll > target - height / 1.5) { animation.classList.add('is-active'); } }); } //ロード時に発火 window.addEventListener('load', toggle); //スクロール時に発火 window.addEventListener('scroll', toggle);</script> </body> </html> ここからCSS： @charset "utf-8"; .header { background-color: lightgray; color: white; } #link_sample ul { display: inline; justify-content: center; } #link_sample li { font-size: 32px; list-style-type: disc; } #link_sample a { padding: 5px; text-align: center; } ul{ display: flex; flex-wrap: wrap; } li{ width: 50%; padding: 20px; box-sizing: border-box; justify-content: space-between; flex-wrap: wrap; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 40%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; }
- ベストアンサー
- CSS
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
- レスポンシブなサイトがうまくいかない
レスポンシブなサイトを作っているのですが、 navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですがうまくいきません。 <ul class="futtnavi"> <li><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/yourinfo.png" alt="個人情報の取り扱い" width="146" height="17" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <span> <li><img src="img/base/aboutus.png" alt="観光協会について" width="129" height="19" /></li> </span> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/faq.png" alt="FAQ" width="40" height="17" /></li> </ul> CSS /*Responsive /br*/ td.copyright span:before { content: "\A"; white-space: pre; } ul.futtnavi+li+li+li+li+span li,ul.futtnavi+li+li+li+li+span+li,ul.futtnavi+li+li+li+li+span+li+li { display: inline-block; margin-top: 1em; } どのようにしたら出来るでしょうか？ もちろん@media screen and (max-width: 320px)などは入れています。そちらの問題では有りません。
- ベストアンサー
- CSS
- 同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。 どうすれば動きますか？？ 理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>
- ベストアンサー
- JavaScript
- CSSで画像を横並びに
CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }
- ベストアンサー
- CSS
- imgタグとレスポンシブについて
imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>
- ベストアンサー
- CSS
お礼
ありがとうございます、ベストアンサーにさせて頂きました。