STUDY_html_009

　　STUDY_html_009_E.html

html
css
JavaScript

<html>
<meta charset="utf-8">

<style>　　　　　スタイル　　　　　</style>

<!--
STUDY HTML
9回目
JavaScript の書き方
A(コメント・アウトについて)
-->

<main>
<audio id="さうんど"preload>
<source src="STUDY_html_image_009/body.mp3"type="audio/mp3">
</audio>

<!-- 再生ボタン/パソコンの音量に注意 -->
<button id="ぷれい"type="button"> Music PLAY / Stop </button>
</main>

<!-- div A --><div class="カコミ">
<!-- div B --><div class="カドマル">
<p>空気粒子の動きを振り子で考える<br>(440Hz A)</p>
<a href="STUDY_html_image_009/small_window_01.html"
onclick="window.open('STUDY_html_image_009/small_window_01.html','win','width=640,height=500');return false;"><img
 src="STUDY_html_image_009/overtone_01.gif"width="270"height="140"
alt="空気粒子の動きを振り子で"></a><span
 style="color:red;position:relative;top:-70px;left:10px;font-size:12px;">←クリック</span>
<!-- /div B --></div>
<!-- /div A --></div>

<!-- div C --><div class="カコミ">
<!-- div D --><div class="カドマル">
<p>空気粒子の振動と伝達の様子<br>(523.25Hz C)</p>
<a href="STUDY_html_image_009/small_window_02.html"
onclick="window.open('STUDY_html_image_009/small_window_02.html','win','width=540,height=500');return false;"><img
 src="STUDY_html_image_009/air_01.gif"width="310"height="120"
alt="空気粒子の振動と伝達"></a>
<p style="color:red;position:relative;top:0px;left:10px;font-size:12px;">↑クリック</p>
<!-- /div D --></div>
<!-- /div C --></div>

<!-- 音声ファイルを再生するスクリプト -->
<script>　　　　　すくりぷと　　　　　</script>

</html>

<style>
/* playボタンはセンターに */
main{text-align:center;
margin-top:40px;}
/* 横幅は400px */
.カコミ{width:400px;
margin:0 auto;
margin-top:20px;
/* 文字は青色 */
color:#456789;
/* 文字は少し大きめ */
font-size:120%;}
/* 線は青色 */
div.カドマル{border:1px solid #456789;
padding:14px 14px 14px 14px;
/* 文字中心揃え */
text-align:center;
/* 背景色は白 */
background-color:#ffffff;
/* 角を丸くする */
-webkitborder-radius:6px;
-mozborder-radius:6px;
border-radius:6px;
/* 水色でドロップ・シャドウ */
-moz-box-shadow:4px 4px 4px 0px #abcdef;
-webkit-box-shadow: 4px 4px 4px 0px #abcdef;
box-shadow:4px 4px 4px 0px #abcdef;}
</style>


<script>
const さうんど=document.querySelector("#さうんど");
const ぼたん=document.querySelector("#ぷれい");
// pausedがtrueのときストップ、falseでスタートする
ぼたん.addEventListener("click",()=>{if(!さうんど.paused)
{さうんど.pause();}
else{さうんど.play();}});
</script>

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

← Contents

STUDY_html_009_E.html

　　← Contents

　　STUDY_html_009_E.html