関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
文字や画像の動的変更 (HTML,CSS,JavaScript)
更新日:2008年05月02日
ブログのサイドバーやページの端などにでも掲載しておける、小さな「おみくじ」を作ってみましょう。ページの移動や別ウインドウの表示はせず、その場の表示を変化させて結果を見せるため、気軽に掲載できます。
サイドバーなど、ページの端にでも掲載しておける小さな「おみくじ」を作ってみましょう。 短いJavaScriptを使って、簡単に作れます。
次のサンプル画像の下部にある「おみくじを引く」ボタンをクリックしてみて下さい。その場で、おみくじが表示されます。 ![]()
※JavaScriptが利用できる環境でのみ動作します。
??
***
クリックするたびに、おみくじの内容が変化します。(種類が少ないので、たまたま同じ内容が連続して表示されることもあります。)
以下のように、ボタンを1回しかクリックできないようにしても良いでしょう。
??
***
今回は上記のように、ページを移動せず、新規ウインドウも開かずに、ページ内の表示を動的に変化させる方法を使って、小さな「おみくじ」を作る方法をご紹介いたします。
【目次】
[Step.1] HTMLを書く (P.2)
[Step.2] JavaScriptを書く (P.3~4)
[Step.3] スタイルシートでデザインする (P.5)
[Step.4] 補足・ソースのまとめ (P.6~7)
関連キーワード[PR]
人気ホームページ作成ランキング
Powered by 価格.com
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
関連キーワード[PR]