横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
視覚的な横向きのアコーディオンを作る
動作; マウスオーバー().mouseover(function(){)時の選択ラベルを灰色の背景色で表示し、
マウスアウト(.mouseout(function())時に背景色を元に戻す。
クリック(.click(function())後の展開中は
オレンジ色のラベルで背景色とパネルを表示(addClass("selected");)する。
jQueryの書き方 |
/*------------------------------------ */ //21-08) アコーディオンを横向きに展開する /*------------------------------------ */ //初期処理 $("#info2108 dd:not(:first)").css("width","0px"); $("#info2108 dt:first span").addClass("selected"); //選択処理 $("#info2108 dt").click(function(){ if($("+dd.d03",this).css("width")=="0px"){ $("#info2108 dt:has(.selected) +dd").animate({"width":"0px"}); $("+dd.d03",this).animate({"width":"495px"}); $("#info2108 dt span").removeClass("selected"); $("span",this).addClass("selected"); } //マウスホオーバー処理 }).mouseover(function(){ $("span",this).addClass("over"); //マウスオーバ後処理 }).mouseout(function(){ $("span",this).removeClass("over"); }); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 21-08. アコーディオンを横向きに展開する -------------------------------------------------------- */ .mode_2108{ width:600px; height:300px; margin:50px auto; overflow:hidden; } .mode_2108 dl{ width:600px; height:300px; } .mode_2108 dt{ width:35px; height:300px; float:left; } .mode_2108 dt span{ display:block; width:100%; height:100%; text-indent:-9999px; } .mode_2108 dt span.over{ cursor:pointer; } .mode_2108 dt span.selected{ cursor:default; } .mode_2108 dt.step1 span{ background:url("../images/ani_background-1.jpg"); } .mode_2108 dt.step1 span.over{ background:url("../images/ani_background-1-over.jpg"); } .mode_2108 dt.step1 span.selected{ background:url("../images/ani_background-1-selected.jpg"); } .mode_2108 dt.step2 span{ background:url("../images/ani_background-2.jpg"); } .mode_2108 dt.step2 span.over{ background:url("../images/ani_background-2-over.jpg"); } .mode_2108 dt.step2 span.selected{ background:url("../images/ani_background-2-selected.jpg"); } .mode_2108 dt.step3 span{ background:url("../images/ani_background-3.jpg"); } .mode_2108 dt.step3 span.over{ background:url("../images/ani_background-3-over.jpg"); } .mode_2108 dt.step3 span.selected{ background:url("../images/ani_background-3-selected.jpg"); } .mode_2108 dd.d03, .mode_2108 dd.d05{ margin:0; width:495px; height:300px; float:left; background:#D4D0C8; overflow:hidden; } .mode_2108 dd p{ width:450px; text-indent:1em; padding:20px; } |
HTMLの書き方 |
<div id="info2108" class="mode_2108"> <dl> <dt class="step1"><span>Step.1</span></dt> <dd class="d03"> <p> シンプル セレクターは、文字列 ・・・ </p> </dd> <dt class="step2"><span>Step.2</span></dt> <dd class="d03"> <p> 通常、スタイル ルールは、文字列 ・・・ </p> </dd> <dt class="step3"><span>Step.3</span></dt> <dd class="d03"> <p> [新しいスタイル] 文字列 ・・・ </p> </dd> </dl> </div> |
シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。 ユニバーサル セレクター (*) も、ページ内のすべて適用ますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。 このような文字は、シンプル セレクター相互のコンテキスト上の関係、つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。 以下のスタイル ルールでは、ドキュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、見出しの間のスペース量を減らします。
通常、スタイル ルールは、ドキュメント構造内での要素の位置を基に適用されますが、カスケード スタイル シートでは、ドキュメント ツリーの外部にある情報に基づいて書式設定するために、 擬似クスと似要素を使用します。擬似要素は、要素の一部 (:first-letterや :first-lineなど) を取り扱うのに使用します。 一方、擬似クラスは、名前、属性、コンテンツ (:first-child、:visited、:hover など) 以外で要素を分類する方法です。 通常、擬似クラスは、動的とみなされます。これは、お客様がドキュメントを操作すると、要素が擬似クラスを取得したりったりすることがあるからです。 擬似要素をセレクター要素と組み合わせる場合は、まずセレクターの種類を指定し、擬似要素は最後で指定します。他の要素 (クラス、ID、擬似クラス) は、どのような順序で指定してもかまいません。
[新しいスタイル] および [スタイルの変更] ダイアログ ボックスでは、新しいスタイルまたは既存のスタイルをデザインし、デザインしたとおりにスタイルの外観をプレビューできます。 クラス、ID、要素をベースにしたスタイルや、インライン スタイルだけでなく、複雑なセレクターを使用したスタイルなど、どのような種類のスタイルでも作成および変更できます。 [新しいスタイル] ダイアログ ボックスでは、ページで現在選択しているアイテムにスタイルを適用したり、 既存または新規の外部 CSS (カスケード スタイル シート) や現在のページの内部 CSS にスタイルを追加したりできます。 [新しいスタイル] または [スタイルの変更] ダイアログ ボックスを開くには、[スタイルの適用]、[スタイルの管理]、または [CSS プロパティ] パネルを使用します。 [新しいスタイル] ダイアログ ボックスは、[書式] メニューまたは [スタイル] ツール バーを使用して開くこともできます。詳細については、「スタイルの作成」および「スタイルの変更」を参照してください。 [新しいスタイル] および [スタイルの変更] ダイアログ ボックスには、同じカテゴリとプロパティが用意されています。[カテゴリ] ボックスの右側に表示されるプロパティには、選択したカテゴリが反映されます。