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

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

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

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

【目次】

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

1 of 7

あわせて読みたい

サッカーの内側【All About FOOTBALL】

現代サッカーを支える様々な最新テクノロジーをご紹介！

関連するトピックス

All Aboutのテーマ一覧

• 恋愛・結婚恋愛・結婚
• 健康・医療健康・医療
• 暮らし暮らし
• 家事家事
• 育児育児
• ビューティビューティ
• ダイエットダイエット
• マネーマネー
• 趣味趣味
• 住宅・不動産住宅・不動産
• グルメグルメ
• レシピレシピ
• デジタルデジタル
• ビジネスビジネス
• 旅行旅行
• メンズメンズ
• ファッションファッション
• 車・バイク車・バイク

All Aboutのその他サービス

• Tips+
  モノ・コト・コツ
• forM
  男性向け
• forF
  女性向け
• MICO
  ビューティ情報
• Good Answers
  ユーザー投稿
• News Dig
  時事コラム
• All About Books
  電子書籍
• All About 動画
  暮らしのヒント
• サンプル百貨店
  お得に試せる

ページトップへ戻るページトップへ戻る