• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第6回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き6回目の勉強内容です。

こんにちは、前回でCSSを一通り終えましたね。今回はWEBサイトにアニメーションなどを挿入することで動きを加えるために用いるJQueryについて解説します。

JQueryを導入するには、公式サイトからダウンロードして、それをコードとして記述すればよいのです。

http://jquery.comを開いてください。

JQueryダウンロードページ

上記サイトよりJQueryをダウンロードできます。

そうしたら、

<script type=”text/javascript” src=”jquery-1.10.2.js”></script>

のように記述すれば読み込めます。

今回使うのはJavaScriptという言語です。

この言語はscript タグの中に記述しなければいけないというルールがあります。つまり、<script type=”text/javascript”></script>と書かれたコードの中に記述すればよいのです。また、JQueryにも記述のルールがあり、

$(function(){

});

の空白部分にその処理を記述しなければなりません。

これから、このJQueryを用いて、CSSファイルを操作してみましょう。

 

@charset "UTF-8"; #box{
width:50px;
height:50px;
background-color:#000000;
}
#box:hover{
width:50px;
height:50px;
background-color:#FF0000;
}

というCSSの記述があったとします。

これから、この記述によって表現されている黒色の箱をクリックした際に赤色にする機能を加えます。


<script type="mce-mce-text/javascript" src="jquery-1.10.2.js"></script> <script type="mce-mce-text/javascript">// <!&#91;CDATA&#91;
});
// &#93;&#93;></script>

&nbsp;

第5回までのHTMLとCSSの内容を思い出して、HTMLの基本構造のタグ、HTMLとCSSをリンクさせるためのコードを記述してください。続けて、先ほど学習したJQueryの読み込みのコード、JavaScriptを記述しますよ、という宣言を行ってください。これで準備完了です。

それでは、記述を始めましょう。JQueryの処理を記述すると解説した部分に以下を記述してください。


完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top