[JavaScript + CSS]ランダムな背景色と角丸を持つボックスを作る方法

CSS、JavaScript

今回の記事では、初心者の方でも簡単に理解できるように、HTML、CSS、JavaScriptを使って、ランダムな背景色と角丸を持つボックスを作成する方法を紹介します。

ボックスの文字色も背景色に合わせて自動的に調整されるようにします。

サンプル

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTMLの設定

HTMLの基本構造を作成します。
以下のコードをHTMLファイルにコピーして貼り付けてください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カラフルなボックスの作成</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ボックスを囲む親のコンテナ -->
    <div class="container">
        <!-- ボックスを追加 -->
        <div class="box" id="box1">ボックス 1</div>
        <div class="box" id="box2">ボックス 2</div>
        <div class="box" id="box3">ボックス 3</div>
        <div class="box" id="box4">ボックス 4</div>
        <div class="box" id="box5">ボックス 5</div>
        <div class="box" id="box6">ボックス 6</div>
        <div class="box" id="box7">ボックス 7</div>
        <div class="box" id="box8">ボックス 8</div>
        <div class="box" id="box9">ボックス 9</div>
        <div class="box" id="box10">ボックス 10</div>
        <div class="box" id="box11">ボックス 11</div>
        <div class="box" id="box12">ボックス 12</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
  • <div class="container"> の中に12個の <div class="box"> を配置しています。
    それぞれがカラフルなボックスになります。

CSSの設定

CSSを設定します。
以下のコードを styles.css ファイルに保存してください。

/* ボックスを囲む親のコンテナのスタイル */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* ボックス間のスペース */
}

/* ボックスの基本スタイル */
.box {
    height: 200px; /* ボックスの高さ */
    flex: 1 1 calc(25% - 10px); /* 25%の幅で均等に分割、10pxの間隔を考慮 */
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    font-size: 20px;
    color: white; /* 初期文字色 */
    border-radius: 10px; /* 初期角丸 */
    transition: background-color 0.5s, border-radius 0.5s; /* スムーズな変化 */
}

POINT

  • .container クラス:
    • Flexboxを使ってボックスを横並びにし、折り返しをサポートします。
    • gap プロパティでボックス間のスペースを設定します。
  • .box クラス:
    • 各ボックスの高さ、幅、パディング、文字色、角丸を設定しています。
    • transition プロパティで背景色や角丸の変化をスムーズにします。

JavaScriptの設定

JavaScriptを設定します。
以下のコードを script.js ファイルに保存してください。

// 色の輝度を計算する関数
function getLuminance(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;
    r = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
    g = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
    b = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// ランダムな背景色、文字色、角丸を設定する関数
function setRandomStyles() {
    var boxes = document.querySelectorAll('.box');
    boxes.forEach(function(box, index) {
        // ランダムな背景色を設定
        var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
        box.style.backgroundColor = randomColor;

        // RGB値を取得
        var r = parseInt(randomColor.slice(1, 3), 16);
        var g = parseInt(randomColor.slice(3, 5), 16);
        var b = parseInt(randomColor.slice(5, 7), 16);

        // 輝度を計算し、文字色を決定
        var luminance = getLuminance(r, g, b);
        box.style.color = luminance < 0.5 ? 'white' : 'black';

        // ランダムな角丸を設定
        var borderRadius = Math.floor(Math.random() * 50) + 'px'; // 0pxから50pxまでのランダム値
        box.style.borderRadius = borderRadius;

        // デバッグ用ログ
        console.log(`Box ${index + 1}: Background Color = ${randomColor}, Luminance = ${luminance}, Text Color = ${box.style.color}, Border Radius = ${box.style.borderRadius}`);
    });
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', function() {
    setRandomStyles();
});

JavaScriptの説明

getLuminance

// 色の輝度を計算する関数
function getLuminance(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;
    r = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
    g = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
    b = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

背景色の輝度を計算し、文字色が背景色に対して適切に表示されるようにします。

setRandomStyles

// ランダムな背景色、文字色、角丸を設定する関数
function setRandomStyles() {
    var boxes = document.querySelectorAll('.box');
    boxes.forEach(function(box, index) {
        // ランダムな背景色を設定
        var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
        box.style.backgroundColor = randomColor;

        // RGB値を取得
        var r = parseInt(randomColor.slice(1, 3), 16);
        var g = parseInt(randomColor.slice(3, 5), 16);
        var b = parseInt(randomColor.slice(5, 7), 16);

        // 輝度を計算し、文字色を決定
        var luminance = getLuminance(r, g, b);
        box.style.color = luminance < 0.5 ? 'white' : 'black';

        // ランダムな角丸を設定
        var borderRadius = Math.floor(Math.random() * 50) + 'px'; // 0pxから50pxまでのランダム値
        box.style.borderRadius = borderRadius;

        // デバッグ用ログ
        console.log(`Box ${index + 1}: Background Color = ${randomColor}, Luminance = ${luminance}, Text Color = ${box.style.color}, Border Radius = ${box.style.borderRadius}`);
    });
}

各ボックスに対してランダムな背景色、文字色、角丸を設定します。
このスクリプトを使うことで、ボックスが動的にスタイリングされ、見た目が変わる面白いエフェクトが得られます。

POINT

  • 背景色の設定:
    • コード: var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
    • 背景色をランダムに生成し、ボックスに適用します。
  • 文字色の設定:
    • コード: box.style.color = luminance < 0.5 ? 'white' : 'black';
    • 背景色の輝度に基づいて、文字色を白または黒に設定します。輝度が低ければ白、高ければ黒です。
  • 角丸の設定:
    • コード: var borderRadius = Math.floor(Math.random() * 50) + 'px';
    • 0pxから50pxまでのランダムな値を使用して、ボックスの角を丸くします。
  • デバッグ用ログ:
    • コード: console.log(...);
    • 各ボックスのスタイル設定をコンソールに出力して、設定内容を確認できます。

DOMContentLoaded イベントリスナー

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', function() {
    setRandomStyles();
});

ページが読み込まれた時に setRandomStyles 関数を実行します。

まとめ

これで、各ボックスがランダムな背景色と角丸を持ち、文字色も自動的に調整されるようになります。初心者の方でも簡単に実装できるように、HTML、CSS、JavaScriptを分けて説明しました。ぜひ、自分のウェブページにこのスタイルを取り入れてみてください！

タイトルとURLをコピーしました