はじめてのWebデザインシリーズで作成しているエドベース社の社長さんから、追加の要望がありました。 会社概要のページに、お気に入りの格言を載せたいそうです。
おみくじみたいに、ボタンをクリックしたらどれか１つ格言が表示されるようにして欲しい。場所は会社概要の上にお願い。
このご要望を、JavaScriptを使って叶えてみましょう。
実践編の素材に関して
HTMLの書き方入門&CSSの書き方入門を受講された方は、作成したcompany.htmlを使用して下さい。
講座で使用したデモコードもご用意しています。
本コースの素材「edbase-css.zip」をダウンロードして、そちらにコードを書いていただいても良いです。
ガチャ用スクリプトの仕組みを考える
どうすれば格言ガチャが作れるか、まず仕組みを考えてみましょう。
HTMLファイルの方には、下記２つのバーツが必要そうです。
- 格言を表示するスペース
- 格言を表示/入れ替えするボタン
次にJavaScript。 下図がガチャ機能のイメージです。
HTMLで枠組を用意する
最初にhtmlの方から作っていきましょう。 格言ガチャを表示する枠組みを作ります。
ここ！とマークされていたのは会社概要の上でした。
company.htmlの<main>タグ下にガチャのパートを追加します。
company.html
<div class="row">
<main>
<h2>格言ガチャ</h2>
<div id="gacha-display">
社長が感銘を受けた格言集！<br>
下記ボタンをクリック/タップで表示します。
</div>
<button id="gacha-button">格言を表示</button>
<h2>会社概要</h2>
ここからは、JavaScriptと連携させていく必要があります。
ガチャ用のjsファイルを作成し、htmlから読み込めるように設定しておきましょう。 ファイル名はわかりやすく「gacha.js」にしました。
次回、gacha.jsの中身を作って行きましょう！