WEB制作テクニック

accordion
（sample）
クリックすると隠れている部分が表示され、再度クリックすると隠れる、といったものです。

サンプル1：クリックしてみてね
本文がここに表示されるよ

サンプル2：クリックしてみてね

　　　筆ペンで一発描きですよ♪


今回は参考サイトの紹介と最低限に簡略化したソースを記載という形にしておきます。

参考サイト（外部サイトです）
　簡単なアコーディオン
　http://latup.com/web/web-jquery/jquery-accordion-2009-04-28.htm
　リストタグを用いたアコーディオン
　http://www.css-lecture.com/log/javascript/024.html

以下はソースです。灰色の部分が説明です。 
$(document).ready(function() {
	//クリックされる部分です。
	//マウスを持っていくとポインターがリンクの画像になるよう設定しています。
	$(".name").hover(function(){
		$(this).css("cursor","pointer");
	},function(){
		//マウスが離れると元に戻るように設定しています。
		$(this).css("cursor","default"); 
	});
	//.hide()で非表示にしています。
	$(".text").hide();
	$(".name").click(function(){
		//クリックするとスライド表示されるように設定。fastは表示される速度です。
		$(this).next().slideToggle("fast");
	});
});
上記を外部ファイルで作成するか
もしくはヘッダー内に<script type="text/javascript">ここに以下を記述</script>とし、記述してください。

HTMLタグ内に以下の記述をします
クリックされる部分　class="name"
クリック後、表示される部分　class="text"
例
<div class="name">クリック</div>
<div class="text">内容</div>

<font class="name">クリック</font>
<div class="text">内容</div>

※divタグで囲んだ場合はwidthをCSSで設定しないとその列全てがクリックの対象範囲になります。

classはCSSを知らないとわからないと思います。
簡単に言うとサイトの見栄えを良くする言語です。 難しくはないので覚えておいて損はないと思います。

参考サイト（外部サイトです）
　やさしいホームページ入門(CSS)
　http://www.ink.or.jp/~bigblock/css/index.html
　Web for beginner ホームページ作成支援
　http://www.scollabo.com/banban/
　WEB工房きくちゃん(CSS)
　http://www.stylish-style.com/csstec/csstec-top.html



上へ