ホームページを更新したときに画像をランダムで表示する方法
鬼は外！ビータイズのWeb職人まいたけです。食べた豆の数は内緒です。
今回はホームページでよく見かける「画像がランダムで切り替わる仕組み」のやり方についてご説明していきます。JavaScriptで動作を設定しますが、とっても簡単なので是非試してみてください。少しでも動きがあると、目を引くホームページになりますよ！
本ページの内容は、htmlの基本を理解していることを前提に掲載しています。
それぞれ基本知識をまとめた記事もありますので、htmlやあまり詳しくない方、学び始めたばかりの方はこちらも 参考にしてみてください。
サンプルコード・デモと解説
まずサンプルコードとデモを確認しましょう。
※デモの右下にある「Rerun」ボタンを押すと、画像が切り替わります。
サンプルコード：
たったこれだけでホームページ上の画像がランダム表示になります！
jQueryなどのライブラリも一切必要ありません。
※同じ画像が続けて表示されることもあります
※JavaScriptがonになっている必要があります。
実装の仕方：
サンプルコードを、ホームページのランダム画像を表示したい場所に記述します。
直接HTML（body）の中に書く場合は、画像を表示したい場所に下記の様な形で書いて下さい。
この間にサンプルコードを記述
</script>
外部ファイルで読み込む場合は、画像をランダム表示したい場所に下記を記載してください。
※サンプルコードで使用している画像はフリー素材ではありませんので、ご自身のホームページで使用する際は、画像はお手元にあるものや素材サイトなどで利用可能なものをご利用ください。
読み込む画像の設定：
ここで読み込む画像一覧を設定します。読み込む画像の枚数は何枚でもOKですが、最後のひとつは「,」をつけません。
画像パスは、お持ちのファイルに書き換えてください。
読み込むタグの設定：
出力するタグを変更する場合はここを変更します。「’」や「+」など、記号を間違って消してしまうとエラーになってしまいますので、タグを変更するときは気をつけてくださいね。
まとめ
ホームページでランダムに画像を表示したいときの方法をご紹介しました。今回は簡単でしたね！
画像を読み込んでいる部分をテキストに変更して、出力タグ合わせてdivなどに変更するとアクセスされる度にランダムに異なる文字が出力されるスクリプトにもなります。
ランダム表示の使い所は色々あると思いますので、基本パターンを試して慣れたらご自分のホームページで応用してみてください！
書いた人：
Web制作歴は17年くらいの何でも屋。
Web/DTPデザイン・コーディングなど、制作を担当しています。
illustration: ©まいたけきの子
大人気！まいたけのホームページ作成関連記事はこちら：
こちらもおすすめ：
- 記事検索
