【jQuery】アクセスするたび背景色・背景画像をランダムに変更する方法

Webデザインの要素として、サイトやウェブページの背景は非常に重要です。背景色や背景画像は、ユーザーエクスペリエンスを大きく左右し、サイトの印象を形成します。しかし、時には毎回同じ背景を見るのは単調で退屈かもしれません。そこで、この記事では、jQueryを使用してページにアクセスするたびに異なるランダムな背景色と背景画像を設定する方法を紹介します。

  1. HTML
  2. jQuery

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- head要素の設定 -->
</head>
<body>
    <div id="random-background">
        <!-- コンテンツを配置 -->
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

jQuery

$(document).ready(function () {
    // 背景色のランダムなRGB値を生成
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

    // ページの背景色を設定
    $('body').css('background-color', randomColor);

    // 背景画像のランダムなURLを設定
    var randomImageURLs = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
        // ここに他の画像のURLを追加
    ];

    var randomImageURL = randomImageURLs[Math.floor(Math.random() * randomImageURLs.length)];

    // 背景画像を設定
    $('#random-background').css('background-image', 'url(' + randomImageURL + ')');
});

このスクリプトは、ページが読み込まれるとランダムな背景色と背景画像を設定します。背景色はランダムなRGB値を生成し、背景画像は事前に定義した画像URLの中からランダムに選択されます。

これで、ページにアクセスするたびに異なる背景色と背景画像が表示されるようになります。ユーザーエクスペリエンスが飽きない魅力的なウェブページを作成するのに役立つでしょう。