Skip to main content

ボタンをつけよう！

ボタンをつけてみましょう！ クリックして何か動作させることができるのは、JavaScriptを使ったウェブサイトの特徴です！

目標#

  • ボタンを表示することができる
  • ボタンを押したら何か動かすことができる

ボタンは、HTML, CSS, JavaScript の3つを駆使して作ります。それぞれ、以下の役割があります。

  • HTML: ボタンを表示, ボタンの文字
  • CSS: ボタンのデザイン(色、形)
  • JavaScript: ボタンを押したときにどんな動きをするか

今回は、JavaScriptの書き方の部分を詳しく勉強してみましょう！

手順：ボタンを表示しよう！#

1. ボタンのHTML#

index.html を開いて、ボタンを表示したい場所に以下のコードを追加しましょう！ ボタンを表示したいところ、好きな場所に追加すればOKです！

<a class="btn" id="first-btn" onclick="実行する関数名()">start</a>

onclick=""の中身には、あとで script.js に書く関数の名前を書きます。

「start」の文字を変えると、ボタンに表示される文字が変わります。ぜひ試してみてください！

ボタンが表示されましたか？？まだ、シンプルなデザインで、クリックしても何も起こらないと思います。

Q, 関数って？#

実行したい命令をひとまとまりにして名前をつけたもの。

2. ボタンのCSS#

style.css を開いて、以下のコードを追加しよう！コードを書く場所はどこでも大丈夫です！

.btn {   display: inline-block;   /* ↓ボタンの幅 */   width: 80px;   /* ↓ボタンの高さ */   line-height: 50px;   text-align: center;   cursor: pointer;   background-color: antiquewhite;   margin: 10px;}

ボタンのデザインは変わりましたか？

3. ボタンのJavaScript#

まずは、script.js を開いて、以下のコードを追加しよう！コードを書く場所はどこでも大丈夫です！

// ボタンの動作function wakeUp(){   // アラートを表示    alert("ボタンクリックできましたね！！");}

4. ボタンを押したときに関数を実行するように設定#

実行する命令の内容が決まったので、ボタンを押したときに実行されるようにしましょう！

onclick="実行する関数名()" となってる箇所に、3で定義したwakeUpという関数名を書き入れましょう！

完成！！#

ボタンは動きましたか？？せっかくなのでクリックしてみてください！！なにが起きるでしょうか？

関数の中身を変えることで、色んな動作をさせることができます！！