HTML
- div要素でfadeinclass
こんばんは、お世話になります。 また似た様な質問で大変申し訳ないのですが 画像をフェードインするのに 画像の初期設定で画像コンテンツを消したいのですが 消せないんですが あれってjavascriptコードだけでできなかったのでしょうか？ animate.cssなるものがあった気がしたのですが、 因みにhtmlとcssが問題だと思うので 回答して頂ける方は、お礼と補足欄に随時記述するので ご教示宜しくお願い致します。
- 締切済み
- JackTheRipper99
- HTML
- 回答数1
- 画像がフェードインしてからフェードアウトする
<!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); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。
- ベストアンサー
- JackTheRipper99
- HTML
- 回答数1
- ソースコードを解読して
このサイト→https://rail-history.org/はおそらくデータベースの考え方を使用していると思いますが、使用するデータベースを指定する箇所はソースコードの何行目か教えてください。
- 締切済み
- NKM_Chitose
- HTML
- 回答数2
- 横に続く画像
wordpressで、LINEのタイムライン(voom)のように、たくさんの写真を横に続くように表示することは出来ますか？ スワイプで画面切り替わらずにそのまま見れるやつです。 また、そういう表示方法の名前のようなものはありますか？ 何と検索したら出てきますか？ 画像添付します。 よろしくお願いします。
- 締切済み
- kutibeni22
- HTML
- 回答数2
- HTMLのulタグで表示される「・」を消したい
ネットで調べて下記二通りを試しましたが消せませんでした。 １．HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 ２．HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１ </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。
- HTMLでテキスト選択ができない
HTMLで、作ったホームページの動作確認をしたのですが、なぜか文字を選択できなくて、aタグを使ったリンクだって機能しません。 どうしたら選択できるようになりますか？
- ベストアンサー
- priusup200
- HTML
- 回答数1
- HTMLで画像を右寄せにするには
HTMLで画像を右寄せにしたくて、 https://csshtml.work/img-text-align/ このサイトを見ながらコードをまねしたのですが、なぜか右寄せにできませんでした。 どうしたら右寄せにすることができますか？至急お願いします！
- 締切済み
- priusup200
- HTML
- 回答数2
- HTMLでiframeを上固定にしたら
HTMLでiframeをCSSの「position: fixed;」を使って上固定にしたら、iframeに対して「width="100%" height="100%"」と指定したにもかかわらず、それが聞かなくなってしまいました。 どうしたら効くようになりますか？
- ベストアンサー
- priusup200
- HTML
- 回答数1
- HTMLでページの中にページを作りたい
HTMLでウェブ構築をしているのですが、ドメインで表すと 〇〇.com/hogehoge/hoge2 こんなかんじで、ページの中にもう一つページを作るにはどうしたらいいですか？
- ベストアンサー
- priusup200
- HTML
- 回答数1
- HTMLの文字コードに関する素朴な疑問です！？
HTMLの文字コードに関する素朴な疑問です！？ HTMLファイルの書き方は、時とともに変遷してきました。 ■ＣＳＳの場合は、 <style type="text/css> ～</style> ↓ <style> ～</style> ■ＪａｖａＳｃｒｉｐｔの場合は、 <script type="text/javascript> ～</script> ↓ <script> ～</script> ■文字コードの場合は、 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> ↓ <meta charset="UTF-8"> 調べてみたところ、 ・日本では、「 UTF-8 」、「 Shift_JIS 」、「 EUC-JP 」の 3つがよく使われている文字コードである。 ・Shift-JISでの日本語1文字あたりのデータ量は2バイトだが、 UTF-8は1文字あたり3バイト必要である。 UTF-8よりもShift-JISの方が消費データが少なくて済む。 それにつけても、文字コードは何故 ・一本化しないのだろうか？ ・一本化したら困ることでもあるのだろうか？
- 「新しいタブで開く」が選択できない
GoogleChrome 同じウィンドウ内でページ移動することになり、参照したい場合「戻る」ボタンをクリックしての使用で タブが開けない為、非常に使い勝手が悪く困っています 一例を挙げるとこの様なサイトです https://rashita.net/blog/?index HTMLやプログラミングに明るくない為、理由が分からないのですが 対応策として小一時間調べて見ましたが ・JavaScript関連で制御されている？ ・セキュリティ面の脆弱性に問題がある為、target= _blank自体を使っていない？ 等、原因がよく分かりません 作成者の仕様でユーザー側から新規タブが開けない設定であれば諦めますが 他ブラウザ、フリーソフトなどで対応出来る、または拡張機能で表示が 変化出来る等、どなたかご存じの方おりませんか？
- サイト作成でjavascriptが反映せず
サイト作成ソフト「BiND」を使って、レスポンシブル対応のWebサイトを作成中です。 ① 最初にjavascriptをページに埋め込みました。 ② HTMLをPCサイト用の位置にあるブロックに埋め込み、scriptはPCサイトで正しく表示されていました。 ③ 次に上記②と同じHTMLをコピペしてスマホサイト用の位置にあるブロックに貼付けたましたが、スマホ版のサイトにはscriptが表示せず。 なぜこうなるのか、スマホ版でもscriptを反映させる方法をご教示ください。
- ベストアンサー
- villamoderna
- HTML
- 回答数1
- Webサイト構築の仕事の将来性について
Webサイト構築の仕事の将来性についてお聞きします。 一昔以上前はHTMLをゴリゴリ書いて構築したWebサイトでしたが、 今はWordPressのような、画面でマウスをクリックすればある程度のサイトが簡単に作れるようなツールが無料で使えますね。 最近リスキリングでまたWebサイトの構築業界に戻ろうかどうか検討中なのですが、この業界の将来性ってどう思われますか？ アドバイスのほどよろしくお願いいたします。
- 締切済み
- kappamummy
- HTML
- 回答数5
- 【Webサイト制作会社の方に質問です】斬新な広告表
【Webサイト制作会社の方に質問です】斬新な広告表示に驚いたのですが、これはどうやっているのか教えてください。 当方はHTML、CSS、Javascript等のプログラミング言語の専門用語を理解していますので、技術用語を使って解説していただいて結構です。 https://www.gqjapan.jp/article/20230607-starbucks-porter-23-news このWebサイトの広告はページスクロールすると本文と本文の後ろに広告が隠されていて表示されるというギミックがあります このギミックの作り方を教えてください。
- ベストアンサー
- redminote10pro
- HTML
- 回答数2
- WEBのjQueryについて。
前回「例えばホロライブのホームページにアクセスする際、https://hololive.hololivepro.com/ 一番最初にホロライブのロゴが文字とともに表示、フェードアウトしていきます。それらはどうやっているのでしょうか。ソースコードを確認してもそれらしきものがないのでお願いいます。」と言う質問をさせていただき、jQueryを使用していることがわかりました。感謝します。そして追加で質問です。jQueryを使用して、どうやって画像出力をしているのでしょうか。ソースコードを見ても画像urlらしきものはなかったので教えてもらえれば幸いです。（▶hololiveみたいなロゴ表示）
- 締切済み
- NanaGaming7
- HTML
- 回答数2
- HTMLの画像指定？
例えばホロライブのホームページにアクセスする際、https://hololive.hololivepro.com/ 一番最初にホロライブのロゴが文字とともに表示、フェードアウトしていきます。それらはどうやっているのでしょうか。ソースコードを確認してもそれらしきものがないのでお願いいます。
- ベストアンサー
- NanaGaming7
- HTML
- 回答数1
- iphoneでmp4動画が再生されません。。。
下記videoタグを使用して、コードを記述しておりますが再生されません。 ファイルサイズも1.5MBなので、動画にしてはそこまで大きくないと思います。 サーバー側に問題があるのか、記述に問題があるのでしょうか？ <video playsinline autoplay muted loop> <source src=”movie.mp4″> </video>
- 誰か教えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8 <title>ホームページ</title> </head> <body> <p><a href= "http://***.html.xdomain.jp/homepage.html" >ホーム</a></p> <iframe src="https://scratch.mit.edu/projects/842573840/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe> <p>クレジット</p> <p><a href= "https://scratch.mit.edu/users/poinoki" >自分</a>の作品を載せました</p> </body> <body bgcolor="#00fa9a"> </html> このソースコードで、ミスっているところはありませんか。 なぜか文字化けしてしまうんです。 種類は、UTF-8にしています。
- googleスライドのhtmlについて
<!DOCTYPE html> <html> <head> <title>Copy Text to Clipboard</title> </head> <body> <textarea id="myTextarea" rows="4" cols="50">chrome-extension://gndmhdcefbhlchkhipcnnbkcmicncehk/manifest.json</textarea> <br> <button onclick="copyToClipboard()">コピー</button> <script> function copyToClipboard() { var text = document.getElementById("myTextarea").value; navigator.clipboard.writeText(text); } </script> </body> </html> みたいなhtmlを書いたのですが、何故かうまくいきません 多分半分くらい間違ってるんでどうしたらいいのか教えて下さい！！ ちなみに私がしたいのは"コピーする"ボタンをおしたらコピーできるみたいな感じのやつです
- Google Cloud 必要な API を有効
Contact Form7 reCAPTCHA V3を利用したいのですが・・・ 以前にも Google Cloud を使用されたことがあるようです。まず、新しいプロジェクトを作成し、必要な API を有効にします。 新しいプロジェクトを作成方法を教えてください。