支援訓練 27日目 - ichisemasashi's blog

[Webサイト]練習サイト構築手順

HTML 5 Outliner

[Web画像]Web画像の種類

[FW]Fireworksの基本

[FW]Fireworks：テキストの扱い

[FW]Fireworks：マスク

[FW]Fireworks：ボタンを作る

[JQ]マウス操作

[JQ]アコーディオンメニュー：昼テキスト

[JQ]アコーディオンメニュー(1)

マウスでの選択範囲の色を変える。

::selection {
  background: #FEFFC9;
}
::-moz-selection {
  background: #FEFFC9;
}

アコーディオン

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$("dd:not(:first)").css("display", "none");
	$("dl dt").click(function(){
		if($("+dd",this).css("display")=="none") {
			$("dd").slideUp("slow");
			$("+dd",this).slideDown("slow");
                }
        });
});
</script>
<style>
*{
  margin:0;
  padding: 0;
}
dl {
  width: 400px;
  margin: 50px auto;
}
dl dt {
  background: #7CADB6;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
}
dl dd {
  border: 1px solid #7CADB6;
  border-top: none;
  height: 300px;
}
p {
  margin: 10px;
}
</style>
</head>

<body>
<div id="container">
<dl>
<dt>テキスト1</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
<dt>テキスト2</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
<dt>テキスト3</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
<dt>テキスト4</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
<dt>テキスト5</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
<dt>テキスト6</dt>
<dd><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
</dl>
</body>
</html>