Monthly Archives: 12月 2011

jQuery で階層型のナビゲーションメニューを作ってみました。階層型はどちらかというと HTML のコーディングの方が複雑です。参考書にはIE7 対応の記述がしてあるのですが、省きました。 今回は、 Microsoft の jQuery を使っていますが、特に深い意味はございません。 sample：jQueryで階層型メニューを作ってみる ダウンロード：jQueryで階層型メニューを作ってみるをダウンロード 参考書：ｊQueryデザインブック ※実際のコードは下記になります

jQuery を使って、アコーディオンメニューを作成してみました。ちなみに jQuery の参考書を買うと前半部分に記載されています。 まず、はじめに、Google もしくは Microsoft から使用する jQuery のコードを選択します。サンプルは、 Google の最新のバージョンを使っています。 ▼jQuery を読み込みます ▼javascript でアコーディオンの記述をします sample：JQueryでアコーディオンメニューを作成してみる ※実際のコードは下記になります。丸っとコピーすれば簡単に手元で確認することができます

jQuery は、世界でもっとも利用されているJavaScriptライブラリのようです。仕様しているサイトも増えてきているので、これから jQuery を学ぶ方に jQuery の特徴をご説明します。 jQueryを利用するときは 【1】CDN（コンテンツ配信ネットワーク）を利用する。 【2】公式サイトからファイルをダウンロードし、それをサイト内に設置する。 CDNを利用する場合は、GoogleもしくはMicrosoftのどちらかを利用すると良いと思います。 コードが２種類あるけど？ そうなんです。jQueryには、縮小版（「min」が付いているほう）と非圧縮版があります。縮小版はファイルサイズを小さくする為に改行などなくして、変数も簡略化された物になります。 バージョンについて 最新のjQueryは、古いWebブラウザに対応しないこともあるようです。古いWebブラウザを特に意識していないのであれば、最新のバージョンを使うと良いかと思います。Webブラウザのサポートについては、jQuery公式サイトで状況を確認することができます。 JavaScriptの知識がないけど・・・ jQuery はあくまでも JavaScript でつくられたライブラリです。ただ、jQuery を利用することで、プログラミング経験のない人でも、 JavaScript を習得することなく、Webページに多彩な機能を実装することができます。 少しでも複雑な機能を追加したり、独自のカスタマイズをしたい場合は、JavaScript の基本をある程度理解する必要があります。「コードの意味をきちんと理解することで、jQuery でできることも増えてアイデアも広がる！」と聞きますので、この機会に JavaScript に触れてみるのも良いかと思います。 jQueryの基本構文 jQuery は対象となる要素をセレクターで指定し、その要素の内容やスタイルなどをメソッドで操作します。きます。基本構文は下記になります。 例えばクラス名「test」を持つa要素に対して、スタイル操作するcssメソッドで背景色をグレーにする場合は となります。セレクターはcssの記述方法に対応しているので、スタイルシートの知識をそのまま応用できます。

jQueryでナビゲーションやボタンを変わった見せ方にするパート4です。パート1、パート2、パート3と同じ感じで、さらに一手間加えたナビゲーションです。ナビゲーション以外にも使いたくなるアニメーションです。 sample：jQueryで表現するナビゲーションやボタンのサンプル ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード 記事元：desizn tech ※実際のコードは下記になります。

jQueryでナビゲーションやボタンを変わった見せ方にするパート3です。前回、前々回と同じ感じで、一手間加えたナビゲーションです。 sample：jQueryで表現するナビゲーションやボタンのサンプル ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード 記事元：desizn tech ※実際のコードは下記になります。

jQueryでナビゲーションやボタンを変わった見せ方にするパート2です。こちらも前回と同じく、ちょっとした一手間で、見栄えが変わるのでオススメです。 sample：jQueryで表現するナビゲーションやボタンのサンプル ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード 記事元：desizn tech ※実際のコードは下記になります。

jQueryでナビゲーションやボタンを変わった見せ方にしたいと考えている方にオススメです。ちょっとした一手間で見え方がすごく変わるので、オススメです。 sample：jQueryで表現するナビゲーションやボタンのサンプル ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード 記事元：desizn tech ※実際のコードは下記になります。

jQueryをつかって文字をカッコイイ感じに表現したいと思います。まったく使い道が不明ですが、こんな事もできるんだという再確認の記事です。 sample：jQueryをつかって文字をカッコイイ感じに表現 配給元：3D Flying Text in jQuery ※実際のコードは下記になります。