モーダルウィンドウ - fancyBoxとColorBox

画像の準備 Photoshopのレイヤーを適切な名前に変更しておく fancyBox ダウンロード《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyBox</title> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

2017-04-30

Lightbox

Lightbox JavaScriptライブラリ Ajax（JavaScript）を利用して動作する機能をまとめてあるもの Ajaxは「Asynchronous JavaScript + XML」の省略語 JavaScriptを利用して非同期通信を行いXMLデータでサーバーとのやりとりを行うもの（1）「DOWNLOAD」ボタン…

2017-04-29

Masonry

Masonry jQuery プラグイン可変グリッドレイアウトもっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

2017-04-28

ページトップへ移動するアニメーション

スクロールすると表示されるトップへ戻るボタンテキスト著者の解説ページトップへ移動するアニメーション《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( windo…

2017-04-27

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使えるスライド動作も3種類選べるカルーセルタイプにすることも可能 bxSliderをダウンロード読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

2017-04-26

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

2017-04-24

タブパネル - 実践

基本のタブパネルの作り方タブ（見出し）とパネル（表示する内容）をそれぞれ別のリストで記述しますタブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけますパネル部とタブ部が連動するよう「id名」をつけ、href属性に#（ハッシュ…

2017-04-23

タブパネル

タブパネルとはタブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる要素を非表示にするには hideメソッドを使い、表示には showメソッドを使うパネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

2017-04-22

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名（値を数値で指定できるものに限る） value アニメー…

2017-04-21

アニメーション効果

animate()メソッド独自のアニメーションを設定できる任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります動きには「l…

2017-04-20

アコーディオンメニュー

アコーディオンメニュー最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておくはじめはコンテンツが見えない（クリックすると内容が見えることを明示するために、一つ目は開けておく）ユーザー自身が積極的に探…

2017-04-18

実践的なメソッド

hide()メソッド表示されている要素を非表示にする HTMLの表示状態 display:block を、display:none に変更します引数がない場合は、即座に非表示キーワードは、「slow」「normal」「fast」のいずれかを記述秒数で指定する場合は、「1000」が１秒 $( セレ…

2017-04-17

セレクタ・メソッド・イベント - まとめ

jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…

2017-04-16

thisキーワード

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できますそ…

2017-04-15

readyイベント

readyイベントとはイベントの中で最も大事なイベントが、readyイベントになりますこのイベントは、DOMの読み込み完了時に実行されますそのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…

2017-04-14

HTML・CSSの操作

HTMLの操作要素内のテキストの設定・変更やHTML要素の設定・変更などテキストの設定要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

2017-04-13

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成されるプリミティブ型は、変数として使う型それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

2017-04-12

セレクタの使い方

最低限、使うものだけ覚えるテキスト〜P.54 すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前…