読者です 読者をやめる 読者になる 読者になる

アニメーティブスライドショー - Refine Slide

「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。 ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」の…

jQueryで画像を切り替える

スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像(画面幅は640px) 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像(画…

JavaScriptを学ぶ上で役立つサイト

今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…

同じWebページ内のリンクにスムースにスクロールさせる

jQueryでスムーススクロール ページ内で一気にジャンプしてしまうと、同じページなのか違うページに飛んだのか判断ができません。それを解決する一つの方法でもあるのがスムーススクロールです。 jQueryソース $(function(){ //ページ内リンクにスムーススク…

jQueryでページの先頭にジャンプする機能を作る

jQueryでページ先頭にジャンプ jQueryを使用すると簡単にジャンプの機能が実現できます。 ページ先頭に戻るための仕様を以下のように決めます。 最初は上に戻る矢印は消しておく。 ある程度スクロールしたら上に戻るための矢印を表示する。 矢印をクリックし…

ページトップまでスムースにスクロールさせる

スムーススクロール jQueryを使用してページトップまでスムースにスクロールさせます。jQueryプラグインを使うより簡単で軽い処理ですみます。 ソースファイル HTML <p><a id="to-top" href="#top">トップに戻る</a></p> JS <script>$(function(){ $('#to-top').on('click',function(){ $('html,body').anim</script>…

ハンバーガーメニューを作成する2

ハンバーガーメニューの動作 ボタンをクリックすると、アニメーション動作で横の3本線から×に変わり、それと同時にボタンの下にスライドダウンでメニューが表示されます。この状態で再度クリックすると、アニメーション動作で元の3本線に戻ります。それと同…

ハンバーガーメニューを作成する

ハンバーガーメニューの動作 プラス(+)の状態のボタンをクリックすると、アニメーション動作でマイナス(-)になり、それと同時にボタンの下にスライドダウンでメニューが表示されます。マイナス(-)の状態でクリックすると、アニメーション動作でプラ…

jQueryの練習

HTMLの挿入、クラス属性の追加、スタイルの変更 HTML&CSS <html lang="ja"><head><meta charset="utf-8"><title>jQueryの練習</title><style>p.style { color: #F00; font-size: 36px; background-color: #333;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button').on('click',function(…</meta></head></html>

イメージギャラリーの作成

左のサムネイル画像をクリックすると、クリックした画像が右側に大きく表示されます。 完成画面 ソースコード HTML <html lang="ja"><head><meta charset="utf-8"><title>jQuery</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script src="js/script.js"></script></head> <body></body></html>

jQueryでタブパネルを作る

タブパネル ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>jQueryタブパネル</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script src="js/script.js"></script></head> <body><div id="panel"><h1>ショート・ケーキ</h1><ul class="tab"></ul></div></body></html>

jQueryでアコーディオンパネルを作る

アコーディオンパネルの作成 ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>jQuery</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){// $('dd').css('display', 'none');// $('dd').hide();// $('dd:first').slideDown(…</link></meta></head></html>

jQueryのプラグイン

「Lightbox」と「bxslider」プラグイン プラグインのダウンロード Lightboxダウンロード先 lokeshdhakar.com bxsliderダウンロード先 bxslider.com ファイルの階層構造 全体構造 cssフォルダー jsフォルダー imgフォルダー ソースファイル index.html <html lang="ja"><head><meta charset="utf-8"><title>Lightb</title></meta></head></html>…

jQueryのアニメーション3

画像をスライドさせる <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション animate()</title><style>html,body,p { margin: 0; padding: 0;}p { width: 1200px; height: 300px; margin:0 ;}div { width: 400px; height: 300px;/* overflow: hidden;*/}</style></meta></head></html>

jQueryのアニメーション2

フェードインとフェードアウト 表示ボタンを押すと画像を表示(フェードイン)し、非表示ボタンを押すと画像を消す(フェードアウト)プログラム。 <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション</title><style>img { display: none;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button#fadeIn').on('click',functi…</meta></head></html>

jQueryのアニメーション

jQueryのアニメーション効果 HTML要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる。 非表示状態の要素を表示する show() $( セレクタ ).show( スピード ); スピード:slow, fast または ミリ秒(1000=1秒) スピードの…

jQueryのイベント

イベントでタイミングを設定しよう ボタンを押すと画像が替わる処理 <html lang="ja"><head><meta charset="utf-8"><title>jQueryのクリックイベント</title><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){//$('button').click(function(){ $('button').on('click',function(){ //クリックイベント以外も後で追加できる。スマホ対応にはonを使ったほうが</meta></head></html>…

jQueryの命令

HTML/CSSを操作するjQueryの命令 <script> $(function(){ $('セレクタ').命令(); }); </script> テキストの変更と取得 text() テキストを変更する text() テキストを取得する HTMLの変更と取得 html() HTMLを変更する html() HTMLを取得する HTMLの挿入 prepend() 指定した要…

jQueryのセレクタ

readyメソッドについて HTMLの読込みが終わった後に実行させるためのメソッドです。これがないとbody要素内のHTMLよりも先にhead要素内のjQuaryが実行されてしまいます。 readyメソッドの書き方 $(document).ready(function(){ //ここにjQueryの処理を記述 }…

jQuery基礎

jQueryとは? JavaScriptを使うより簡単な記述で済むように開発されたJavaScriptのライブラリーのことです。 jQueryを使うメリット 簡潔な短い記述で済む。 ブラウザ間の差異を吸収する。 ネット上に多くの情報が公開されている。 jQueryを使うデメリット サ…