文字を動的に変化させて「おみくじ」を作る
サイドバーなど、ページの端にでも掲載しておける小さな「おみくじ」を作ってみましょう。 短いJavaScriptを使って、簡単に作れます。
次のサンプル画像の下部にある「おみくじを引く」ボタンをクリックしてみて下さい。その場で、おみくじが表示されます。
※JavaScriptが利用できる環境でのみ動作します。
??
***
クリックするたびに、おみくじの内容が変化します。(種類が少ないので、たまたま同じ内容が連続して表示されることもあります。)
以下のように、ボタンを1回しかクリックできないようにしても良いでしょう。
??
***
今回は上記のように、ページを移動せず、新規ウインドウも開かずに、ページ内の表示を動的に変化させる方法を使って、小さな「おみくじ」を作る方法をご紹介いたします。
【目次】
[Step.1] HTMLを書く (P.2)
[Step.2] JavaScriptを書く (P.3~4)
[Step.3] スタイルシートでデザインする (P.5)
[Step.4] 補足・ソースのまとめ (P.6~7)