文字を動的に変化させて「おみくじ」を作る

サイドバーなど、ページの端にでも掲載しておける小さな「おみくじ」を作ってみましょう。 短いJavaScriptを使って、簡単に作れます。
次のサンプル画像の下部にある「おみくじを引く」ボタンをクリックしてみて下さい。その場で、おみくじが表示されます。
※JavaScriptが利用できる環境でのみ動作します。

??

***

クリックするたびに、おみくじの内容が変化します。(種類が少ないので、たまたま同じ内容が連続して表示されることもあります。)
以下のように、ボタンを1回しかクリックできないようにしても良いでしょう。

??

***

今回は上記のように、ページを移動せず、新規ウインドウも開かずに、ページ内の表示を動的に変化させる方法を使って、小さな「おみくじ」を作る方法をご紹介いたします。

【目次】

[Step.1] HTMLを書く (P.2)
[Step.2] JavaScriptを書く (P.3~4)
[Step.3] スタイルシートでデザインする (P.5)
[Step.4] 補足・ソースのまとめ (P.6~7)