岩手県立総合教育センター　情報教育ウェブこのページの本文へ

ここから本文Webページ教材開発テキスト

5-1　英単語を表示

日本語をクリックすると英単語を表示するWebページを作ります。

(1)　HTMLで骨格を作る・・・step1 　　　サンプルはこちら

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>Webページ教材</title> <style> </style> </head> <body> 英単語を表示します <br><br> <span id="11" class="tango">りんご　</span> <span id="12" class="tango">ぶどう　</span> <span id="13" class="tango">かき　</span> <br><br> <span id="kotae"></span> <script> </script> </body> </html>

(2)　cssでデザインする・・・step2 　　　サンプルはこちら

　　 <style></style>の間に次のcssを記入します。 <style> .tango{ font-size: 300%; cursor:pointer; } #kotae{ font-size: 300%; } </style>

(3)　JavaScriptで動きをつける・・・step3 　　　サンプルはこちら

<script></script>の間に次のJavaScriptを記入します。 <script> $(function() { $("#11").on("click", function () { $("#kotae").html("apple"); }); $("#12").on("click", function () { $("#kotae").html("grapes"); }); $("#13").on("click", function () { $("#kotae").html("persimmon"); }); }); </script>

(4)　単語を増やしてみましょう・・・発展問題

①　文字に色をつけてみましょう。
②　いちご、梨、スイカなどを追加してみましょう。
③　野菜バージョンを作って別ファイルで保存してみましょう。

▲このページのトップに戻る