PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

jQuery

【jQuery】 Scrollableを使う

Scrollableを利用して、スライドできるサムネイルを作ります。 準備 Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで jquery.tools.min.js scrollable-horizontal.css scrollable-b…

【jQuery】タブパネルを使う。

jQueryの基本である要素を重ねることを使い、タブパネルを作ります。 タブパネル実行例 HTML: <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> <div id="container"> <ul class="tab"> <li></li></ul></div></body></html>

【jQuery】 Colorboxを使う

Lightboxの派生プラグインであるColorBoxを使います。 Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。 準備 Colorboxをダウンロードしてきます。 Colorbox - a jQuery lightbox 解凍して、任意のフォルダに移動。 「colorb…

【jQuery】 Lightboxを使う

jQueryのプラグインであるLightBoxを使います。 準備 LightBoxからプラグインをダウンロードしてくる。 Lightbox 解凍して、任意のフォルダに移動。 lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する…

【jQuery】 HTML/CSS操作の演習

HTML/CSS操作の演習を行いました。今回はそのソースです。 特定のID/クラスのスタイルを変更する 使うメソッド「css();」 <html> <head> <meta charset="utf-8"> <title>演習1</title> <script src="../../js/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li>PHP</li> </ul> <script> $(fun…</body></html>

【jQuery】 アニメーション

jQueryの関数を利用して、簡単なアニメーションを表示します。 表示・非表示 $( セレクタ ).show( スピード );//表示 $( セレクタ ).hide( スピード );//非表示 アニメーションはslow、fastまたは数値(1秒=1000)で指定します。 実行例 <html> <head> <meta charset="utf-8"> <title>アニメ</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> div{ w</meta></head></html>…

【jQuery】 イベントで属性を操作する

イベントを使い属性の内容を変えます。 click()メソッドで、イベントを実行します。 実行例 ボタンで画像切り替え ボタンが押されたときを切欠に画像切り替えを行います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>click()イベント</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> button{ cursor: pointer; } </style> </head> <body> <p><button>…</button></p></body></html>

【jQuery】 htmlを操作するメソッド2(HTMLの移動)

【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 HTMLの移動を行うメソッドについて学んでいきます。 要素内の前か後ろに移動 prependTo(前)とappendTo(後)を使…

【jQuery】アコーディングメニューの作り方と考え方

以下のコラムを利用して、アコーディングメニューを作ります。40分で覚える!jQuery速習講座 ASCII.jp:40分で覚える!jQuery速習講座 (6/6) 制作例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <style> *{ margin:0; padding:0; } dl{ width:400px; margin:50px auto; } dl dt{ </meta></head></html>…

【jQuery】 htmlを操作するメソッド

htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。 htmlメソッド $('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。 $('').text();HTML要素内文字列を取得または書き換え…

【jQuery】 CSSの制御

jQueryでのCSS制御する方法には2種類あります。 一つは以下のような書き方。 $('div').css('background','#f00'); もう一つは以下のような、CSSの書き形近い書き方になります。 $('div').css({ 'color' : '#f00', }); 実行例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの制御</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></meta></head></html>

【jQuery】 セレクターを使い、要素のスタイルを指定する

jQueryで処理するには、以下のように記述します。 <script> $(document).ready(function(){ }); </script> セレクタの書き方はCSSと同じです。 $('要素名') $('#id名') $('.class名') セレクタを指定し、特定の要素にスタイルを上書きする。 実際に要素に当てられているスタイ…

【jQuery】 jQueryを使っていく

jQueryはJavaScriptのライブラリーの一つです。要素に対してアニメーションで表示したり、ポップアップを表示することができます。プログラム的には、フォームのエラーチェックもできます。 jQueryの書き方 jQueryは以下のように読み込ませます。jQueryのバ…