Accordion with CSS3 のチュートリアルが面白そうだからやってみた

HTML/CSS jsdo.it

[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン | コリス
このエントリーを読んで、面白そうだったから実際にやってみた！

CSS3 で Accordion - jsdo.it - share JavaScript, HTML5 and CSS

input にこんな使い道があったとは…ｗ

疑似クラス、疑似要素、隣接セレクタ などなど駆使しているので、セレクタの使い方も勉強になった。

ちょこっとアレンジ

  • アローアイコンを画像を使わずに表現
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '>';
	position: absolute;
	widht: 24px;
	right: 13px;
	top: 7px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
  • スマフォ向け(？)に画面の幅が狭いとき、アコーディオンの幅も狭くなるようにした
@media screen and (max-width: 420px) {
	.ac-container{
		width: 95%;
		margin: 10px auto 30px auto;
	}
}