ブログの始め方/ブログに慣れてきたら

その場で表示が変化する「おみくじ」を作る

ブログのサイドバーやページの端などにでも掲載しておける、小さな「おみくじ」を作ってみましょう。ページの移動や別ウインドウの表示はせず、その場の表示を変化させて結果を見せるため、気軽に掲載できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

??

***

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

??

***

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

【目次】

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

  • 1
  • 2
  • 3
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます