<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body, di, dt, dd {
margin: 0;
padding: 0;
}
#conatiner {
width: 500px;
margin: 50px auto;
}
.accordion {
padding: 5px 0;
background: #61A342;
}
.accordion dt{
padding: 1em;
border: 1px solid #BBB;
background: #FFF;
font-weight: bold;
cursor: pointer;
}
.accordion dd{
padding: 1em 1em 1em 2em;
border: 1px solid #BBB;
background-color: #F1F1F1;
}
</style>
</head>
<body>
<div id="conatiner">
<dl class="accordion">
<dt>HTML</dt>
<dd>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。</dd>
<dt>jQuery</dt>
<dd>jQuery（ジェイクエリー）は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。</dd>
<dt>PHP</dt>
<dd>PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。</dd>
</dl>
</div>
</body>
