STUDY_html_001

　　STUDY_html_001_C.html

html
css
JavaScript

<html>

<style>　　　　　スタイル　　　　　</style>

<h1>SC-88Pro インストゥルメント</h1>
<div class="オオワク">
<li class="リスト1"onclick="ぴあの(this)">Piano
<ol>
<li>001 Piano 1</li>
<li>002 Piano 2</li>
<li>003 Piano 3</li>
<li>004 Honky-tonk</li>
<li>005 E.Piano 1</li>
<li>006 E.Piano 2</li>
<li>007 Harpsichord</li>
<li>008 Clav.</li>
</ol>
</li>
<li class="リスト2"onclick="おるがん(this)">Organ
<ol>
<li>017 Organ 1</li>
<li>018 Organ 2</li>
<li>019 Organ 3</li>
<li>020 Church Org.1</li>
<li>021 Reed Organ</li>
<li>022 Accordion Fr</li>
<li>023 Harmonica</li>
<li>024 Bandoneon</li>
</ol>
</li>
</div>

<script>　　　　　すくりぷと　　　　　</script>

</html>

<style>
h1{font-size:90%;
color:#456789;
text-align:center;}
.リスト1{border-style:dotted;border-color:#abcdef;
margin:10px;}
.リスト1 ol{display:none;}
.リスト2{border-style:dotted;border-color:#abcdef;
margin:10px;}
.リスト2 ol{display:none;}
.くりっく{background-color:paleturquoise;}
.くりっく ol{display:block;}
.おーぷん{background-color:lightsteelblue;}
.おーぷん ol{display:block;}
.オオワク{border-style:solid;border-color:#abcdef;}
</style>

<script>
function ぴあの(e){e.classList.toggle("くりっく");}
function おるがん(e){e.classList.toggle("おーぷん");}
</script>

　　sample_STUDY_html_001_C.pdf サンプル・ダウンロード

← Contents

STUDY_html_001_C.html

　　← Contents

　　STUDY_html_001_C.html