【ホームページ作成】その場で表示が変化する「おみくじ」を作る

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

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

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

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

【目次】

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