(HTML,CSS,JavaScript)複数の画像リンクからランダムに1つを表示する方法ウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能を作ってみましょう。ある「お勧めページ」の中からランダムに1つを選んで表示したい場合などに活用できます。短いJavaScriptを使って、複数のリンク画像群から1つをランダムに選んで表示する方法を解説。文宏ホームページ作成ガイドお勧め情報(画像)の中からランダムに1つを選んで掲載する目的などに複数の画像リンクからランダムに1つを選んで表示するウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能を作ってみましょう。ある「お勧めコーナー紹介画像」の中からランダムに1つを掲載したり、お勧めの写真をランダムに1つ紹介したりしたい場合などに活用できます。リンク先は自サイト内に限らないので、お気に入りサイトの中から1つを選んで紹介する用途などにも使えます。下図は、複数の画像リンクの中からランダムに1つを選んで表示するページの作成例です。ブラウザで実際に表示確認をしてみるには、「ランダム画像リンクを作る」サンプルページをご覧下さい。複数のリンク画像群から1つをランダムに選んで表示するサンプルページ上記のサンプルページの枠内には、花のイラストが1つだけ表示されています。ページを表示するたびに、異なる画像が表示されます。画像と一緒にリンク先も変化しています。※ランダムに選ばれた結果、たまたま前回と同じ画像が出ることもあります。ここでは画像を4種類しか用意していないので、そうなる可能性は高いです。試す際には、何度か再読み込みボタンをクリックしてみて下さい。ランダム画像リンクの作り方さて今回は、上記の作成例のように、画像とURLとを対にした「画像リンク」を複数用意しておき、その中から1つをランダムに選んで表示する方法をご紹介致します。複数の「画像リンク」の中から1つを選んで表示する方法には、短いJavaScriptを使います。簡単に作成できますので、ぜひ試してみて下さい。※本記事は、過去の記事「アクセスされるたびに画像をランダムに切り替える方法」の改良版です。画像をランダムに表示するだけでなく、説明文を加えてリンクにできるようにスクリプトを書き換えたものです。装飾を加えたソースのまとめそれでは、最初のステップから順に見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。