jQuery
「変更」ボタンを押したら、既存のh1要素内のテキストが変更されるよう記さい。 変更前 クリック前 変更後 クリック後 「変更」ボタンを押したら「on」と「off」が繰り返し、交互に変更されるよう記述し問なさい。 「変更」ボタンを押したら、jQueryのCSSメ…
animateメソッドとは？ jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物（margin、color、widthなど）に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…
index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>bxsliderの導入</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="js/jquery.min.js"></script> </link></link></meta></meta></head></html>
ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すたびにON・OFFを切り替えるスイッチ的な物は以前であれば「Toggle」を使って簡単に出来ましたが、jQuery1.9以降で廃止されたので、代わりに「flg」を使っ…
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…
var box = document.getElementById("box") fetch("logo2.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })
<html lang="ja"> <head> <meta charset="utf-8"> <title>RWD-ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width"> <style> html,body,p,ul,li,a{ margin: 0; padding: 0; line-height: 1.0; } ul{ list-style: none; } a{ text-decoration: none; } /*PCレイアウト*/ P{ display: none; } nav { width: 10…</meta></meta></head></html>
前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント（UserAge…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…
animateメソッドとは？ jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物（margin、color、widthなど）に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…
サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…
2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。 「jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。 中でもよく使わ…
liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…
使用するjQueryメソッド .on() .css() .fadeIn() .fadeOut() 【問01】「変化」ボタンをクリックしたら300pxの正方形であるdiv#boxの背景色が黒色から、赤色に変わるように記述しなさい。 【問02】「変化」ボタンをクリックしたらh2に対して文字色が赤、背景…
【問01】300pxの色違いの２の正方形を、それぞれ「表示１」ボタン、「表示２」ボタンを押したら幅・高さ共に0pxから300pxに表示するよう記述しなさい。１つは「「スローで表示」もう１つは「１秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタ…
<body> <header> <h1>ナビボタン</h1> <p class="btn"><span class="icon"></span></p> </header> <nav id="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">お店について</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </body>
今回は以前作った既存サイト（キリン）の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。 slideToggleの動きに合わせたスイッチの作成 以前はtoggl…
ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。 また、スマホの機種によっては、「touchs…
レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。 backgroundプロパティであればメディ…
<html lang="ja"> <head> <meta charset="utf-8"> <title>スクロールすると固定になるナビ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="nav2.js">…</link></meta></meta></head></html>
jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。 jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しま…
これまでHTML上でスタティック（縦）に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…
スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、１テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…
これまでHTML上でスタティック（縦）に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…
