2013-03-01から1ヶ月間の記事一覧
ガイドテキスト - jQuery基本形 アクティブなエリアに色がつき、デフォルトの文字が消える 選択したエリアがわかるように配慮したガイド ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ガイドテキスト - jQuery基本形</title> <script src="js/jquery.js"></script> <link rel="stylesheet" href="css/style43.css" media="print,screen"> </head> </html>
☆★データーでの確認★☆実践演習-アコーディオン jQuery使用したアコーディオンパネル （1）jQueryの命令を記述する場所を記述 【 記述 】 $(function(){ (中略) }); （2）セレクターに1番目以外のパネル（dd要素）を指定 1番目以外のdd要素に対して、css()でd…
☆★データーでの確認★☆アコーディオン - Query基本形 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン - Query基本形</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> #faq { width: 500px; } .question { padding: 5px; font-weight: bold; font-family: A…</meta></head></html>
☆★データーでの確認★☆アコーディオン（アニメーションなし） アニメーションのような滑らから動きがない ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン（アニメーションなし）</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> * { margin:0; padding:0; line-height:1.4; } body{ padding:40p…</meta></head></html>
☆★データーでの確認★☆CSSでアコーディオンパネル ホバーを使いパネルが展開してように見せる HTMLの記述 「unordered list」または「definition list」を設定する 「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文…
jQuery UI ページを遷移させず複数のコンテンツを見せたい場合に利用する 必要なjQuery UIをダウンロード jQuery UI(jQuery user interface) [ Themes ] の中の [ ThemeRoller ]の中のテーマを選ぶ [ Gallery ] から好きなテーマを [ Download ] [ Download …
☆★データーでの確認★☆jQuery TOOLS Build a custom set of ToolsからコアjQuery Toolsをダウンロード（または、ソースコードから必要なデータを保存する） jQuery TOOLS demoからの確認 デモを見て必要なjQueryをそろえる 画像のダウンロードが準備されてい…
☆★データーでの確認★☆Yetii Yetii YetiiのjQueryをダウンロード ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Yetii</title> <style> #tabBox { width: 500px; margin: 0px; } ul#tabBox-nav { list-style-type: none; width: 460px; float: left; margin: 0; /* タブの背景の画像は任意で用</meta></head></html>…
それぞれについて処理する - each ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>それぞれについて処理する - each</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } .animal { width: 300px; height: 100px; background-color: #9F…</meta></head></html>
値や内容をセットする/取得する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>値や内容をセットする/取得する</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 300px; height: 200px; background-color: #9FC; } </meta></head></html>
【 参考サイト 】 colis-コリス CSSで画像置換 リンクタグのホーバー時に別の画像を差し替えて動きを見せる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> nav { width: 800px; margin: 50px 0 0 5px; } ul { list-style-type: none; overflow: hidden; } li {</meta></head></html>…
☆★データーでの確認★☆CSS Spriteでの設定 １つの画像として書き出す。レスポンスの解消にもなる。 CSSスプライトの潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 【 参考サイト 】 colis-コリス ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> /* rese</meta></head></html>…
☆★データーでの確認★☆単純なJavaScript マウスが乗ったとき(Over)、マウスが離れたとき(Out)を使う > onMouseOver="this.src='images/◎◎.jpg'" onMouseOut="this.src='images/◎◎.jpg'" ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>単純なJavaScript</title> <style> * { margin: 0; padding</meta></head></html>…
☆★データーでの確認★☆サムネールで画像置換 サムネイル画像とメイン画像は別々のサイズで準備をする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ソファーのあるインテリア</title> <style type="text/css"> </meta></head></html>
☆★データーでの確認★☆ロールオーバー - jQuery基本形 画像の名前に[ _on ] と [ _off ]をつけ自動置換させる 画像置換範囲を[ class="rollover" ]で個別に指定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロールオーバー-基本形</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> </body></html>
☆★データーでの確認★☆ロールオーバー-発展形 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロールオーバー-発展形</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> * { margin:0; padding:0; } .content { width: 700px; margin: 20px auto 0; background-color: #000;…</meta></head></html>
マウスののりおりを監視する2 - hover ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>マウスののりおりを監視する2 - hover</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> body { background-color: #FCF; } #div1 { width: 400px; height: 300px; background-color: #FF9; }…</meta></head></html>
フォーカスを監視する - focus/blur ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>フォーカスを監視する - focus/blur</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } </style> </head> <body> <form> <p> </p></form></body></html>
イベントとthis - 失敗 ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>イベントとthis - 失敗</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } .clickTest { width: 300px; height: 100px; background-color: #9FC; } </meta></head></html>
イベントとthis - 成功 ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>イベントとthis - 成功</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } .clickTest { width: 300px; height: 100px; background-color: #9FC; } </meta></head></html>
要素を移動する3 - prepend ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を移動する3 - prepend</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #basket { width: 400px; /* [ 20px ]は文字分の高さ */ height: 320px; …</meta></head></html>
要素を新しく作る - $(文字列) ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>要素を新しく作る - $(文字列)</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 400px; height: 300px; background-color: #FF9; } <…</meta></head></html>
要素を削除する - remove ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>要素を削除する - remove</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 400px; height: 300px; background-color: #FF9; } </meta></head></html>
クリックを監視する - click ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>クリックを監視する - click</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 400px; height: 300px; background-color: #FF9; } <…</meta></head></html>
☆★データーでの確認★☆マウスののりおりを監視する1 - mouseenter/mouseleave ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>マウスののりおりを監視する1 - mouseenter/mouseleave</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { wi…</meta></head></html>
要素の内容を空にする - empty ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の内容を空にする - empty</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 400px; height: 50px; background-color: #FF9; }…</meta></head></html>
要素の属性値を変更する - attr ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の属性値を変更する - attr</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } img { width: 180px; height: 180px; } </style> </head> <body> …</body></html>
要素の入力値を変更する - val ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の入力値を変更する - val</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } </style> </head> <body> <form action="#" method="get"> <p> </p></form></body></html>
要素のクラスを追加／削除 - addClass/removeClass ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素のクラスを追加／削除 - addClass/removeClass</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 300px; heigh…</meta></head></html>
要素を移動する1 - append ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を移動する1 - append</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #basket { width: 400px; height: 300px; background-color: #FF9; …</meta></head></html>
