株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-06)　1.なめらかなアコーディオンパネル　縦向き

　

シンプルなパネルをスライド表示する

 動作；　アコーディオンパネルのラベル部分（#info2106 dt；青色背景色のテキストラベル）を
　　　　　クリック（.click(function()）すると、
　　　　　下に隠れていたパネルの文字列を表示（slideDown("slow");）する。

jQueryの書き方 /*------------------------------------ */
//21-06)　シンプルなアコーディオンを作る
/*------------------------------------ */
//初期処理
$("#info2106 dd:not(:first)").css("display","none");
//選択処理
$("#info2106 dt").click(function(){
  if($("+dd.d01",this).css("display")=="none"){
    $("#info2106 dd.d01").slideUp("slow");　
    $("+dd.d01",this).slideDown("slow");/* 画像を表示 */
  }
});
ｃｓｓの書き方 /*------------------------------------------
21-06)  シンプルなアコーディオンを作る
------------------------------------------- */
.mode_2106{
}
.mode_2106 dl{
  width:600px;
  margin:50px auto;
}
.mode_2106 dt{
  line-height:35px;
  font-size:large;
  text-indent:3em;
  font-weight:bold;
  color:white;
  height:35px;
  cursor:pointer;
  background:url("../images/ani_background.jpg")
}
.mode_2106 dd.d01{
  margin:0;
  height:300px;
  background:#D4D0C8;
}
.mode_2106 dd p{
  margin:0;
  text-indent:1em;
  padding:20px;
}
HTMLの書き方 <div id="info2106" class="mode_2106">
  <dl>
    <dt>Step.1</dt>
    <dd class="d01">
     <p>
       文字列１　・・・
    </p>
    </dd>
    <dt>Step.2</dt>
    <dd class="d01">
      <p>
      文字列２　・・・
    </p>
    </dd>
    <dt>Step.3</dt>
    <dd class="d01">
      <p>
      文字列３　・・・
      </p>
    </dd>
  </dl>
</div>
Step.1

シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。 ユニバーサル セレクター (*) も、ページ内のすべて要素に適用されますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。 このような文字は、シンプル セレクター相互のコンテキスト上の関係、つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。 以下のスタイル ルールでは、ドキュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、見出しの間のスペース量を減らします。

Step.2

通常、スタイル ルールは、ドキュメント構造内での要素の位置を基に適用されますが、カスケード スタイル シートでは、ドキュメント ツリーの外部にある情報に基づいて書式設定するために、 擬似クラスと擬似要素を使用します。擬似要素は、要素の一部 (:first-letterや :first-lineなど) を取り扱うのに使用します。 一方、擬似クラスは、名前、属性、コンテンツ (:first-child、:visited、:hover など) 以外で要素を分類する方法です。 通常、擬似クラスは、動的とみなされます。これは、お客様がドキュメントを操作すると、要素が擬似クラスを取得したり失なったりすることがあるからです。 擬似要素をセレクター要素と組み合わせる場合は、まずセレクターの種類を指定し、擬似要素は最後で指定します。他の要素 (クラス、ID、擬似クラス) は、どのような順序で指定してもかまいません。

Step.3

[新しいスタイル] および [スタイルの変更] ダイアログ ボックスでは、新しいスタイルまたは既存のスタイルをデザインし、デザインしたとおりにスタイルの外観をプレビューできます。 クラス、ID、要素をベースにしたスタイルや、インライン スタイルだけでなく、複雑なセレクターを使用したスタイルなど、どのような種類のスタイルでも作成および変更できます。 [新しいスタイル] ダイアログ ボックスでは、ページで現在選択しているアイテムにスタイルを適用したり、 既存または新規の外部 CSS (カスケード スタイル シート) や現在のページの内部 CSS にスタイルを追加したりできます。 [新しいスタイル] または [スタイルの変更] ダイアログ ボックスを開くには、[スタイルの適用]、[スタイルの管理]、または [CSS プロパティ] パネルを使用します。 [新しいスタイル] ダイアログ ボックスは、[書式] メニューまたは [スタイル] ツール バーを使用して開くこともできます。詳細については、「スタイルの作成」および「スタイルの変更」を参照してください。 [新しいスタイル] および [スタイルの変更] ダイアログ ボックスには、同じカテゴリとプロパティが用意されています。[カテゴリ] ボックスの右側に表示されるプロパティには、選択したカテゴリが反映されます。