アコーディオンパネルの作り方について

Question

いまライブドアブログでアコーディオンパネルを作ろうとしています。
そして
http://www.webcreatorbox.com/tech/js-to-css/#js-to-css6
このサイトを見つけてコピペをしたら1回はうまくいくのですが、「HTMLタグ置換」ボタンを押すと、HTMLが崩るからなのか、この画像のようにラジオボタンだけになってしまいます。
これの対処法を教えてください。

ORUKA1951 · Accepted Answer

では、section要素を伸縮させてみましょう。

/* 初期状態 */
section{ /* 要素セレクタ */
	height:100px;
	overflow:hidden;
	background-color:white;
}
/* 変更するプロパティを指定する */
section{
	height:100px;
	overflow:hidden;
	background-color:white;
	transition-property: background-color, height;/* transitionを適用されるプロパティ all でもよい */
	transition-duration:1s;/* 時間 */
	transition-timing-function:ease-in-out;/* 変化の仕方 */
}

/* 次いで、変化させるタイミングを疑似クラスで指定する。 */
section{
	height:400px;
	background-color:aqua;
}
/* ターゲットになっている要素 */
section:target{  /* リンクのターゲット:target疑似クラス */
	height:400px;
	background-color:aqua;
}
/* あるいは */
section:hover{  /* マウスを載せたとき:hover疑似クラス */
	height:400px;
	background-color:aqua;
}

この程度の簡単なものから始めて、応用することを考える。
これは、section:targetの詳細度が 0,0,1,1 と、sectionの詳細度 0,0,0,1よりも大きいために上書きされるのです。
ですから、

section:hover{
	height:400px;
	background-color:aqua;
}
section{
	height:100px;
	overflow:hidden;
	background-color:white;
	transition-property: background-color, height;
	transition-duration:1s;
	transition-timing-function:ease-in-out;
}
と書かれていても、スタイルが変更される。

★ たぶん、要素セレクタ、属性セレクタ、詳細度と言われてもチンプンカンプンだと思いますが、これらのカスケーディングという仕組みこそ、CSS(カスケーディング・スタイル・シート)の命なのです。
　それかあるから、
＞HTMLが崩る
　なんてことなく、特定の要素のみスタイルが指定できるのですよ。

いちどCSS2.1の仕様書の前半部分を読んでおかれるとよい。CSS3、どころかCSS2.1に手を出す前にね。そしたら、CSSで可能なことは自在に操れるようになる。

1 CSS 2.1仕様について
2 CSS 2.1の手引き
3 適合性：必要条件と推奨事項
4 構文と基本データ型
5 セレクタ
6 プロパティー値とカスケーディング、継承の割り当て 
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html
特に4.5.6.は!!!

ORUKA1951 · Answer

コピペじゃダメ。大事なことは、なぜそのように動作するかを理解して適用しないと。数学の問題を解くのとまったく一緒、似てるからと言って「公式」を当てはめるのではなく、なせその公式が使えるかを理解していないと、簡単なはずの数学が難しくなるばかりで役に立たない。 CSS3で新しくtransition という時間的変化を指定するプロパティが導入されましたから、javascriptを使わなくてよくなった。そして、その仕組みを理解しましょう。まず、率直なHTMLで ★タブは＿に置換してあるので戻して・・＿＿サンプル＿＿＿＿

＿＿

Your title

＿＿＿

＿

＿＿

A smaller heading

＿＿

＿＿＿いまライブドアブログでアコーディオンパネルを作ろうとしています。＿＿

＿＿

＿＿＿そして＿＿

＿＿

＿＿＿http://www.webcreatorbox.com/tech/js-to-css/#js- … ＿＿

＿＿

＿＿＿このサイトを見つけてコピペをしたら1回はうまくいくのですが、「HTMLタグ置換」ボタンを押すと、HTMLが崩るからなのか、この画像のようにラジオボタンだけになってしまいます。＿＿

＿＿

＿＿＿これの対処法を教えてください。＿＿

＿＿

閉じる

＿

＿＿

A smaller heading

＿＿

＿＿＿いまライブドアブログでアコーディオンパネルを作ろうとしています。＿＿

＿＿

＿＿＿そして＿＿

＿＿

＿＿＿http://www.webcreatorbox.com/tech/js-to-css/#js- … ＿＿

＿＿

＿＿＿このサイトを見つけてコピペをしたら1回はうまくいくのですが、「HTMLタグ置換」ボタンを押すと、HTMLが崩るからなのか、この画像のようにラジオボタンだけになってしまいます。＿＿

＿＿

＿＿＿これの対処法を教えてください。＿＿

＿＿

閉じる

＿

＿＿

A smaller heading

＿＿

＿＿＿いまライブドアブログでアコーディオンパネルを作ろうとしています。＿＿

＿＿

＿＿＿そして＿＿

＿＿

＿＿＿http://www.webcreatorbox.com/tech/js-to-css/#js- … ＿＿

＿＿

＿＿＿このサイトを見つけてコピペをしたら1回はうまくいくのですが、「HTMLタグ置換」ボタンを押すと、HTMLが崩るからなのか、この画像のようにラジオボタンだけになってしまいます。＿＿

＿＿

＿＿＿これの対処法を教えてください。＿＿

＿＿

閉じる

＿

アコーディオンパネルの作り方について

では、section要素を伸縮させてみましょう。

コピペじゃダメ。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング