こんにちは。神戸のWebデザイナー、エムピクセルラボの毛利です。

いろいろなホームページを見ていると、いろいろな動きに目が留まることはありませんか?

例えばナビゲーションにマウスを置くとするするとサブナビゲーションが下りてきたり、

あるいはトップペーの画像がスライドショーのように切り替わったり。

そういった動きを演出しているのが、「JavaScript」という言語の働きです。

「じゃあ、JavaScriptが使えるようになれば動きのあるサイトが作れるようになるの?」

というと、答えは「Yes!」です。

とはいえ、JavasScriptはプログラミング言語のひとつ。

特に文系の人には、そう簡単に覚えて使いこなせるというものでもありません。

 

 

そこでお勧めしたいのが、「jQuery」です。

jQueryとは、JavaScriptのライブラリの一種です。

「えっ?さっそく何言ってるの?」と思われるかもしれませんが、ご安心ください。

例えば、JavaScriptが難しい言語を話す外国人だとすると、

jQueryはわかりやすい言葉に翻訳してくれる翻訳家ということになります。

 

要するに、JavaScriptの記述には複雑な手続きが必要である一方で、

jQueryを利用するととても短いコードで済ませることができるようになります。

jQueryの記述は、Webデザイナーが使うCSSという言語に似た性質を持ちますから、

より馴染みやすい言語ともいえるわけです。

そういったこともあり、今では多くのWebデザイナーやプログラマーが利用しているのです。

 

では実際にどのようなことができるのか。

こちらの画像をクリックしてみてください。

スマートフォンを眺める女性

水際に置かれたサングラスとスマホ

砂場に描かれたスマイル

これらの画像をクリックすると、ふわっとスクリーン上に浮かび上がり、

まるでギャラリーを見ているような状態になります。

こういった動きもjQueryによるもので、「lightbox(ライトボックス)」と呼ばれます。

次はこちらをご覧ください。

3枚の画像が次々にフェードしながら切り替わっていきます。

こちらも同じくjQueryの働きによるもので、「スライダー」と言います。

 

 

jQueryの書き方はとても簡単です。

そしてlightboxやスライダーのようによく見られる動きについては、

既にプラグインが数多く公開されています。

使い方さえ覚えれば、すぐにでも始められるというのもjQueryの魅力のひとつですね!

では今度は、jQueryの基本的な構文について学んでいきましょう。

LINEで送る
Pocket