JavaScript
https://www.javadrive.jp/javascript/webpage/index4.html
https://www.webantena.net/javascriptjquery/jquery-clearform-button/
https://www.ipentec.com/document/javascript-jquery-get-radiobutton-value
https://www.torat.jp/css-radiobotton
ryu-ya.jp
賢明な方法ではないのですが、cssでbodyをトランスフォームします。 1.bodyにid="body"を記述 2.cssでどの画面幅でも表示させたいwidthを設定、height、transform を設定 css @media screen and (min-width: 768px) and (max-width: 1280px){ html{ margin-t…
html <div class="scroll-top"> <button id="scroll-top"></button> </div> css /*=================================================================== フッター ===================================================================*/ .scroll-top #scroll-top { position: fixed; bottom: 10px; right: 10px; backgrou…
<script> const hasChild = document.querySelectorAll('.menu-item-has-children'); const submenu = document.querySelectorAll('.sub-menu'); for (let i in hasChild) { if (hasChild[i]) { hasChild[i].addEventListener('mouseover', function() { submenu[i].…
html <ul class="tab_list"> <li class="active"><a href="#"></a></li> <li><a haref="#"></a></li> <li><a haref="#"></a></li> </ul> <div class="tab_content"> <div class="ac_content active"></div> <div class="ac_content"></div> <div class="ac_content"></div> </div> js function tab() …
$('#navi li a').click(function() { $('html,body').animate({scrollTop:0}, 'fast'); }); ↑ この書き方だと２回目以降のクリックイベントが発生しない場合、下記のように記述します。 $(document).on('click', '#navi li a', function(){ $('html,body').a…
html:リンク元 <a href="<?= get_page_link( 7 ) ?>#tab2">タブ2を開いて</a> html:リンク先 <ul class="tab_list"> <li class="active" data-tab="tab1"><a id="tab1">タブ１</a></li> <li data-tab="tab2"><a id="tab2">タブ２</a></li> </ul> <div class="tab_content"> <div class="ac_content active">タブ１コンテンツ</div> </div>
特定の場所をhover（click）したら、指定の箇所に画像を表示させる（下記の参考はワードプレス用になっていますが、htmlでも同じです。） html <p class="studio"> <a class="studio_map_img" href="<?php the_permalink(); ?>" data-img="<?php the_field('studio-floor_map'); ?>"></a> </p>
HTML <ul class="mainMenu"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> CSS .mainMenu li.active{ color: red; } JQuery $(function(){ //Mainナビ $('.mainMenu li').click(function () { $('.mainMenu li').removeClass('active'); $(this).addClass('active'); }); }); $(document).on('click', function(e…
https://b-moon.net/slide-down-and-aaccordion-menu/
See the Pen スクロールすると途中で表示される「トップへ戻るボタン」 by seiko-takamori (@seiko-takamori) on CodePen.
https://keymaso.com/programemory/javascript/html-to-image/ 上記を元に作成すると、画像のダウンロードが出来なかったのですが、サーバにアップしたら出来ました。 hinanaoblog.xyz ```<html lang="ja"><head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </meta></head></html>
