jQuery
□□本日の授業□□ WordPressのページ作成 framework.jsを使ったギャラリー風ページ framework.jsを使ったギャラリー風ページの特徴 カテゴリー毎に画像を絞って表示できる カテゴリーを複数設定できる http://kuropanther.html.xdomain.jp/framework/ 昨日のGo…
タブパネルのテキストだけを改変（修正・更新）したい場合、予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。 テキストファイルのみを変更すれば、更新も簡単！ １、テキストの入っていない空のタブパネルを作りま…
Yaho!!の検索バーの真下に使われているようなタブパネルをつくります まず、HTMLとCSSを書きましょう ［HTML］ <div id="container"><ul class="tab"><li><a href="#tab1" class="selected">JavaScript</a></li><li><a href="#tab2">CSS</a></li><li><a href="#tab3">HTML</a></li><li><a href="#tab4">jQuery</a></li><li><a href="#tab5">PHP</a></li></ul></div>
横方向に動くアコーディオンもjQueryでできます。今回はプラグインを使用しない方法です。 【HTML】 <dl class="accordion"><dt>1</dt><dd><div>コンテント</div></dd><dt>2</dt><dd><div>コンテント</div></dd><dt>3</dt><dd><div>コンテント</div></dd><dt>4</dt><dd><div>コンテント</div></dd><dt>5</dt><dd><div>コンテント</div></dd></dl> 【CSS】 .accordion { width: 600px; height: 300…
jQueryを使用してアコーディオンメニューを実現した課題サイト「Kitchen Club」です。 このサイトのポイント ナビゲーションがjQueryでアコーディオンメニューになっている ナビゲーションにマウスオンすると画像が変化する 商品画像のシャドウ １．アコーデ…
jQueryを使った課題サイトを作成しました。 このサイトのポイント rollover.js、LightBox.jsの２つのプラグインを使用 左サイドバーとメインコンテンツの重なり 画像だけではない、パーツの横並びが多い Photo Log １、ナビゲーションにrollover.jsを使用し…
jQueryには数多くのプラグインがありますが、プラグインがデフォルトで提供する設定をそのまま使用するのは練習段階です。 実際には自分のつくったページにプラグインを実装することが多く、そこで考慮すべきことはいくつかあります。 プラグインを動かすた…
メソッドの使い分け ｈｔｍｌ（） HTML要素を取得または変更 文字列内にHTMLを記述した場合 はHTML処理して表示される ｔｅｘｔ（） 文字列内にHTMLを記述した場合は文字列で表示される ａｔｔｒ（） 属性値の取得・変更する ｃｓｓ（） 要素のSTYLE属性を変…
トップページに良く使われるスライダーをつくります。 jQueryプラグインは、bxSliderを使用します。 レスポンシブにも対応 ①プラグインをダウンロードし jquery.bxslider.zipを開く →ファイルを保存 jquery.bxslider.js（又はjquery.bxslider.min.js） jquer…
シンプルなアコーディオンメニューに、マウスオーバー時と展開中のパネルの色を変化させて、現在位置をより分かりやすくしてみます。 展開中のパネルにはクラス名「selected」、マウスオーバー時のパネルにはクラス名に「over」をそれぞれ付けることにします…
「jQueryで縦ナビゲーションでアコーディオンメニュー」の記事の補足です。 テキストにある基本形は、見出し１つに対してサブメニュー１つ、のシンプルなものでした。 jQueryのスクリプトがやや複雑なので、解説します HTML <dl> <dt>見出し１</dt> <dd>テキストテキストテキ</dd></dl>…
slideUp( ) と slideDown( ) 指定した要素の高さを０から本来の高さにするのがslideDown( )、反対に本来の高さから０にするのがslideUp( )です ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ＄（セレクター）.slideUp（スピード…
show( ) display:noneに指定されている非表示状態の要素を表示します ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー $ ( function( ) { $ ( 'button' ).click( function( ) { $ ( '表示する要素' ).show( ’表示速度’ ); } ) ; ーーーー…
１．mouseoverとmouseout 特定の要素の上にマウスを載せた時に起きるイベントの指定をmouseoverで、特定の要素の上からマウスを外した時に起きるイベントの指定をmouseoutでできます。 商品画像にマウスを載せた時などに使えます $ ( function ( ) { $ (特定…
インテリア・雑貨を扱うFrancFrancのECサイトのページの一部を再現してみました。 元のページはこちら⇒ floatをかけて２カラムにしています。 メイン商品画像のサイズは大きいもの１種類しかなく、サムネイル部分はサイズを縮小して使用しています。 サムネ…
ｊＱｕｅｒｙを使った画像置換 サムネイルをクリックすると、メイン画像がその画像に置換わります。 ① まずＨＴＭＬとＣＳＳで体裁を整えます。 ＜ＨＴＭＬ＞<ul><li><a href="img/flower.jpg"><img src="img/flower_s.jpg" alt="花"></a></li><li><a href="img/sea.jpg"><img src="img/sea_s.jpg" alt="海"></a></li><li><a href="img/jellyfish.jpg"><img src="img/jellyfish_s.jpg" alt="くらげ"></a><…</li></ul>
jQueryで縦ナビゲーションのアコーディオンメニューを作成しました
セレクターの中から 特定の順番の要素を選択するのに使うのが、ｅｑ（equal）セレクター 特定の要素の前の要素を選択するのが、ｌｔ（less than）セレクター 特定の要素の後ろの要素を選択するのが、ｇｔ（greater than）セレクター 使い方 ＄（’セレクター…
クリックイベント click() $（’セレクター’）.click（ function ( ) { セレクターで指定した要素がクリックされたときに実行する処理内容 } ☆属性に含まれるものを ．（ドット）でつなげられる。 この方法では、画像のalt属性を変更できるのが特徴。JavaScri…
表示結果のようになるよう記述しなさい １）要素セレクター <スクリプト＞ <body><h1>Heading</h1><p>The quick brown fox jumps over the lazy dog.</p><ul> <li>The quick brown fox jumps over the lazy dog.</li> <li>The quick brown fox jumps over the lazy dog.</li></ul><script>$ ( function( ){ $('p').css(</body>…
jQueryはJavaScriptの１つ。 CSS（Cascading Style Sheets）に近い記述方法をする クロスブラウザー設計（ブラウザーによる実装の差異がほとんどない、見た目が同じ） HTMLとCSSを操作するためのプログラミング言語 jQueryを使う準備 ２つの方法 ① jQueryフ…
