- ベストアンサー
ヘッダーの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; }
- JackTheRipper99
- お礼率89% (560/629)
- CSS
- 回答数9
- ありがとう数8
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
>中々レイアウトの配置とclass属性の振り分けが細かくて難しいですね。 >出来たみたいです。 実際は、「わかんね～」って言ってる時間が一番楽しいので（ｗ） 気楽が一番ですよ。 （ちなみ、こちら単なる酔っ払いのおっさんです～） でも、ヘッダー直後のパーツにDIVなどの 囲いを入れることを強くお勧めしますよ！。 今回の問題点はそこなので！ 治し方は複数あるが、そうではなく、 問題点がそもそも起きない方法を取るべきだったのではないか？ そっちの方が大事ですね～ ひとまず、動いたみたいなので！ よかったよかった！
その他の回答 (8)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
/* CSS 追加*/ header li{ width: auto; ←これを追加でOK opacity: 1; visibility: visible; } header a{ display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; ------------------------------------ なのですが、全体にheaderという「タグ」が 1回しか使われてないのに、class=headerがあり、 .header li { font-size: 15px; list-style-type: none; } .header a { color: #000; padding: 20px; } これと、上のheader liは同じ場所を指しています。 これは、header.header li {}を省略して書いただけの為。 なので、まとめちゃってもいいかと思います。 それと、 .header ul { display: flex; justify-content: center; } ～～～～～～～～～～～ ul{ display: flex; flex-wrap: wrap; } こういう場合、どちらもulを指しているが、上の方がCSS点数が高いので、逆に書いた方がいいです。 ul {}を先に書いてから、.header ul {}を後にする。 それと、今回みたいに1回しか使ってないのなら、 classでもidでもいいし、1回しかないならそもそも headerに対して設定でも構わない！ ただ、見やすさから考えると header#head {} などにして、 タグを <header id="head"> ←タグと同じ名前は使わない事と、 1度しか使わない物は、classではなくidで書くことで、 「それが1回しか使われてないよ！」という事を 教える効果もある。 この場合のCSS階層は、 <header id="head"> <ul> header#head ul {} で、他のulには一切影響を与えないというメリットが得られます。 今回の問題点は、無関係な同一名のタグが 同時に設定されていて、それを再上書きで対処しようとしてるために、 無駄にソースが長くなって、わかりにくなったことが原因ですので。 なので私なら、 <div> ←こいつを追加 <ul class="test-box"> <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> </div> ←こいつを追加 で、このDIVをセレクタにしますね。。
お礼
回答ありがとうございます。 ひとまず出来たみたいです。 これを機にclass属性の使い方をもっと勉強しようと思います。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 原因わかりました。 li{ width: 50%; ←これ！ padding: 20px; 確かに、50％なら、横に2個並びそうだが、 運悪くパディングも20px。。当然100%の中に 50%+20pxが2個入るわけがない！ 結果、縦に並んでしまっている！ が原因。。 なんだけど。。。。。 治すのは簡単だが＾＾どうしようかな～ 質問者さんのレベ上げか、この件だけを直すかを 考え中～
お礼
回答ありがとうございます。 中々レベルが上がらないですが頑張りたいと思います。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 >アニメーションで表示される画像も縦並びで表示されているのですが、 >(その際に使っているdisplayタイプは,flexです。) こっちでやったときは、flexは解除されなかったので、 何かミスがありそう。 全ソース開示たのます～。
補足
回答ありがとうございます。 コードの補足です。 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> <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 class="test-box"> <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"; a.header { display: block; text-decoration: none; } .header { background-color: rgba(0,0,0,.1); margin: 0; } .header ul { display: flex; justify-content: center; } .header li { font-size: 15px; list-style-type: none; } .header li:not(:first-of-type) { margin-left: 1rem; } .header a { color: #000; padding: 20px; } ul{ display: flex; flex-wrap: wrap; } li{ width: 50%; padding: 20px; box-sizing: border-box; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 100%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; } ------------------------------------------------------------------- /* CSS 追加*/ header li{ opacity: 1; visibility: visible; } header a{ display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; }
- AsarKingChang
- ベストアンサー率46% (3467/7472)
要するに！ li{ /* 透過・非表示 */ opacity: 0; visibility: hidden; } こうかくと、 body→header→nav→ul→li body→ul→li class="js-scroll-animation" どちらのliにも有効なんです。 2つ目の物は、言うなれば CSSで設定したもの「と」class="js-scroll-animation"が 2つ同時に設定されてしまうという具合 なので、CSSには点数があり、より高いものを優先するという ルールがあるので、点数上げをすればいいのですが、 ＃3番が指摘してる通り、 この2つの違いを見つけると、 headerまたはnavタグ内のliだということなので、 header li {} nav li {} のどちらかですが、フルで body header nav ul li {} でも構いません。 ただ、一番いいのは、 body直下になってしまっている、li class="js-scroll-animation" こいつを任意のタグで囲む方がお勧めですね。 body→div→ul→li class="js-scroll-animation" など。 こうしておけば、全く同じものを2個宣言したとき、 <div id=waa>～ <div id=gya>～ で分けることで、CSSは div#waa li {} div#gya li {} で、同じでも、独立したCSS空間に対して設定が可能になります。 今回の問題点は、 「ここからCSS：」の後に、 ul{} li{} これらが、「すべてのulタグとすべてのliタグに対して」 設定してしまっていることで、 結果 <header class="header">→<nav>この中のliも同じ設定を持った！ ＝つまり完全透明+非表示 これが原因。 なので可能な限り、 全タグに対してのCSS設定は慎重にすることと、 各パートはdivなどでセクション化（sectionってタグもあるが） しておき、それを軸に設定しておくこと！ この2点を注意すればOKですよ～。
- retorofan
- ベストアンサー率33% (328/975)
＞ヘッダーに書いてあるテキストのコメントが消えてしまいます。 原因は、そうなるようなＣＳＳを記述しているからです。 次のＣＳＳコードを下部に追記してみてください。 <style> /* CSS 追加 */ header li { opacity: 1; visibility: visible; } </style>
お礼
回答ありがとうございます。 メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 アニメーションで表示される画像も縦並びで表示されているのですが、 (その際に使っているdisplayタイプは, flexです。)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
おまけ <li><a href="/index.html" id="link_sample">ABOUT</a</li> アンカーの閉じタグが抜けてるので、一応注意を！ なので、 li か li -> a に対して、クラスオーバーライドすれば治りますよ。 （もう、最初の投稿で、あ～って気分なのはわかってますが）
お礼
回答ありがとうございます。 すみませんが、オーバーライドがまだよく解らず思考錯誤したり 色々ぐぐってみたのですが、よく解りませんでした。 ドットインストールでもそのような章はなく、まだそこまでのレベルではないようです；
- AsarKingChang
- ベストアンサー率46% (3467/7472)
実際に試しました。 原因は、 li{ /* 透過・非表示 */ opacity: 0; visibility: hidden; } ここでしょうね。 どこからもオーバーライドされてない様子で、 デフォルトの、完全透明+非表示のまま表示まで行ったようです。 ってのが原因です。 次にそれがなぜ起こったか？ animation.classList.add('is-active'); これです。 初期値は const animations = document.querySelectorAll('.js-scroll-animation'); ですので、元々、classのjs-scroll-animationには、 A（アンカータグ）は存在してないので、 <header class="header"> の方のアンカーには影響がない＝つまり完全透明+非表示 を維持していた！ってのが、原因です。 OKでしょうか？
関連するQ&A
- 同じ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
- レスポンシブなサイトがうまくいかない
レスポンシブなサイトを作っているのですが、 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
- 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
- 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
- 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
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート 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
- 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 */
- ベストアンサー
- CSS
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見ても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画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
お礼
回答ありがとうございます。 中々レイアウトの配置とclass属性の振り分けが細かくて難しいですね。 出来たみたいです。