CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptで近日公開（Coming Soon）ページを作成する方法

CSSとJavaScriptを組み合わせれば、サイトの公開前に訪問者へ向けて表示する「近日公開（Coming Soon）」ページに、リアルタイムで動くカウントダウンタイマーを簡単に組み込めます。この記事では、全画面の背景画像の中央にタイトルを配置し、残りの日・時・分・秒を1秒ごとに更新しながら表示するページの作り方を、サンプルコードとともにわかりやすく解説します。

コード例

<!DOCTYPE html>
<html>
<style>
    body {
        height: 100vh;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
    }
    .timer {
        text-align: center;
        font-size: 60px;
        margin-top: 0px;
        color: white;
    }
    .bgimg {
        background-image: url("https://i.picsum.photos/id/829/800/800.jpg");
        height: 100%;
        background-position: center;
        background-size: cover;
        position: relative;
        color: white;
        font-size: 25px;
    }
    .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    hr {
        margin: auto;
        width: 40%;
    }
</style>
<body>
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr />
<h2 class="timer"></h2>
</div>
</div>
<script>
    // カウントダウンの目標日時を設定（実際の公開予定日に書き換えてください）
    var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
    var timeClear = setInterval(function() {
        var now = new Date().getTime();
        var timeLeft = countDownDate - now;
        var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        var hours = Math.floor(
            (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        if (timeLeft < 0) {
            clearInterval(timeClear);
            document.querySelector(".timer").innerHTML = "Timer Finished";
        }
    }, 1000);
</script>
</body>
</html>

コードのポイント解説

全画面の背景画像（.bgimg）

background-size: cover; と background-position: center; を指定することで、背景画像が画面いっぱいに拡大され、常に中央部分が表示されます。また、height: 100%; によって背景領域がビューポート全体に広がります。

コンテンツの中央配置（.middle）

position: absolute; による絶対配置に加え、top: 50%; left: 50%; と transform: translate(-50%, -50%); を組み合わせることで、見出しとタイマーを画面の中央に正確に配置しています。

カウントダウン処理（JavaScript）

setInterval() を使うと、指定した処理を1秒ごと（1000ミリ秒間隔）に繰り返し実行できます。処理内では、目標日時から現在時刻を引いた差分（ミリ秒）を求め、それを Math.floor() で日・時・分・秒に変換して画面に表示します。

残り時間が0より小さくなった場合は clearInterval() でタイマーを停止し、完了メッセージを表示します。実際に利用する際は、変数 countDownDate の日時を自身の公開予定日に書き換えてください。

出力結果

上記のコードを実行すると、次のように背景画像の中央に「COMING SOON」の見出しとカウントダウンタイマーが表示されます。

CSSとJavaScriptで近日公開（Coming Soon）ページを作成する方法


  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル