ウェブ学のすすめ

Study of Web Design & Programing

CSS3を使ったアコーディオンパネル

CSS

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
CSS3を使ったアコーディオンパネル - js do it

ポイント

transition: transitionを適用するプロパティ時間　変化の具合;

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<ul class="accordion">
<li>
<div>
<h2>HTML</h2>
<p>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上のドキュメントを記述するためのマークアップ言語である。Web作成基本プログラミング用語であり、C言語のようなプログラミングとは違い、文章の中に記述することでさまざまな機能を記述設定することができる。 <br>※引用元：Wikipedia</p>
</div>
</li>
<li>
<div>
<h2>CSS</h2>
<p>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。<br>※引用元：Wikipedia</p></div></li>
<li>
<div>
<h2>JavaScript</h2>
<p>JavaScript（ジャバスクリプト）とは、オブジェクト指向スクリプト言語である。主にウェブブラウザなどのクライアントサイドで実装され、動的なウェブサイトの構築や、RIAなどの高度なユーザインタフェースの開発に用いられる。<br>※引用元：Wikipedia</p>
</div>
</li>
<li>
<div>
<h2>jQuery</h2>
<p>jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。<br>※引用元：Wikipedia</p>
</div>
</li>
<li>
<div>
<h2>PHP</h2>
<p>PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。<br>※引用元：Wikipedia</p>
</div>
</li>
</ul>
</body>
</html>

CSS

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

body {
    font-family:
	"ヒラギノ角ゴ Pro W3", 
	"Hiragino Kaku Gothic Pro", 
	"メイリオ", 
	Meiryo, 
	Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif；
}
.accordion {
    width:400px;
    height:300px;
    margin:20px auto;
}
.accordion li {
    color:#555;
    background-color:#fff;
    height:15%;
    overflow:hidden;
    -webkit-transition:all 0.6s ease-in;
    -moz-transition:all 0.6s ease-in;
    -o-transition:all 0.6s ease-in;
    transition:all 0.6s ease-in;
}
.accordion li:hover {
    height:70%;
}
.accordion li h2 {
    color:#333;
    font-size:1.2em;
    margin:0 0 10px;
    padding:5px;
    background-color:#eee;
    border:1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
.accordion li:hover h2 {
    color:#fff;
    background-color:#81AF86;
    border:1px solid #ccc;
    
}
.accordion li div {
    font-size:0.875em;
}