まさ@ブログ書き込み中

自由に生きるための英語、プログラミング、考えごとについて色々書いています。

【サイトの作り方】サイトをおしゃれにするためのJavaScript(jQuery)入門

f:id:masaincebu:20180806072737p:plain

 

HTMLとCSSである程度サイトは作れるようになった。次はカッコいい動きをつけたいな。どうすればできるんだろう?

 

こういった疑問に答えます。

 

もくじ

 

Webサイトに動きをつける方法は大きく分けて2つ

Webサイトに動きをつける方法は、大きく分けてCSSとJavaScriptがあります。CSSではCSS TransitionとCSS Animationという2つの機能を使ってアニメーションを実現します。

 

JavaScriptではjQueryといったライブラリを使って色んな動きをつけることができます。

 

CSSによるアニメーションはあくまでサイトの中の要素をアニメーションにするだけですが、JavaScriptではクリックなどのアクションの後にアニメーションをつけることができたり、アニメーション以外のこともできます。

 

なので、ここからはJavaScript(jQuery)について説明します。

 

JavaScript(jQuery)を学んだらどんなことができるようになるのか?

初歩的な例で言えば、クリックをした後に文字を変えることができます。 

 

f:id:masaincebu:20180806070323g:plain

 

これは以下のシンプルなコードで動いています。

<p id="hello" style="cursor:pointer">Hello World</p>

$("#hello").click(function() { $("#hello").html("World Hello") })

 

また、クリック後に文字を消すこともできます。

f:id:masaincebu:20180806071144g:plain

これはjQueryをこのように書き換えることで動いています。 

$("#hello").click(function() { $("#hello").fadeOut() })

 

今回は本当にシンプルな例でしたが、他にも多くのことができます。例えば、変化の起点をクリックではなくキーボード入力にしたり、変化の内容も文字を浮かび上がらせたりCSSを変えたりできます。

 

このようにJavaScript(jQuery)を使えるようになるとWebサイトに動きをつけられて、HTMLとCSSだけで作っている時よりもずっとオシャレにすることができます。

 

JavaScript(jQuery)の具体的な勉強法

Webサイトに動きをつけるjQueryを使うためには、その基となっているJavaScriptを勉強する必要があります。そのため、JavaScript → jQueryの順で勉強することがオススメです。

 

勉強する際にオススメするのが、Progateです。JavaScriptもjQueryも、Progateで学ぶことができます。コース内容をみっちりやりましょう。

JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]

jQuery | プログラミングの入門なら基礎から学べるProgate[プロゲート]

 

Progateを終えたら、jQueryに関する本を読むのもアリですし、そのまま自分のWebサイトで使ってみるといいでしょう。僕の場合はすぐに自分のWebサイトで使いました。

 

本を読むにしても、最終的には自分のWebサイトでjQueryを使うなどして、自分の表現したい動きを色々試したりしてみてください。

 

他の記事でも言っていることですが、「知っていること」と「わかっていること、できること」は別なので。

 

今回はこれで以上です。jQueryは使いやすいので、ぜひ身につけてサイトをおしゃれにしてください。