クリックで開閉するアコーディオンパネル
JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"...
View Articleレスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02
JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"...
View Article画面をscrollすると表示されて「閉じるボタン」で非表示になるバナー
JSとfont-awesomeを読み込みます <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <script type="text/javascript"...
View Articleウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます
JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"...
View Article指定のラジオボタンをチェックすると、さらに追加で項目を表示します
JSを読み込みます <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="js/main.js"></script> [main.js]JavaScript //選択されたら表示...
View Articleアクセシビリティを考慮したラジオボタン
HTMl <form class="Form" action=""> <dl> <dt id="like">どちらの食べ物が好きですか？</dt> <dd> <div role="radiogroup"> <label for="like_apple"><input type="radio"...
View Article入力された日付を比べてメッセージを表示
JSを読み込みます <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://codingmania.net/demo/form/0014/js/main.js"></script>...
View Article横からスライドインするレスポンシブ対応メニュー
JSを読み込みます <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script...
View Articleドロップダウンメニュー[レスポンシブ対応]
JSを読み込みます <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"...
View Articleフォームにある現在地を示すステップナビゲーション
HTMl <div class="Stepnav"> <ol> <li class="current">１<span>．製品情報入力</span></li> <li>２<span>．問合せ情報入力</span></li>...
View ArticleWordPress のYouTube埋め込みの iframe をレスポンシブ対応する
JSを読み込みます if ( is_single() ) { wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js', array('jquery'), false, true ); } jQuery[js_youtube.js]...
View Article
