More than 1 year has passed since last update.

素の JavaScript でペライチ web ページ作る

Last updated at 2023-03-18Posted at 2023-03-18

1. はじめに

今回は、自分自身への備忘録を兼ねて、ちょまど氏考案の「素の JavaScript でペライチ web ページ作る」方法を、お伝えしたいと思います

2. この記事を読んでできること

HTML5、CSS、JavaScript でペライチ web ページを作れるようになる

3. 注意事項

特になし

4. 必要なもの

Windows OS PC（Windows11を想定）
テキストエディタ（VSCodeを利用）

5. VSCode とエクスプローラーを開く

cmd コマンドプロンプトを開き、以下のコマンドを実行する

コマンドプロンプト

// エクスプローラーを起動する
> explorer .

// VSCodeを起動する
> code .

6. HTMLファイルを作成

VSCodeの「新しいファイル」から index.html ファイルを作成する

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技育祭</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="light-theme">
    <h1>今日やることリスト</h1>
    <ol>
        <li>[html] とりあえず web サイトを作る</li>
        <li>[css] いい感じの見た目にする</li>
        <li>[css] ライトテーマとダークテーマを作る</li>
        <li>[JavaScript] ライトテーマとダークテーマをボタンで切り替える</li>
        <li>[行けたら] デバッグ用にコンソールメッセージ出力</li>
        <li>[行けたら] カスタムプロパティ（CSS 変数）を：root 疑似</li>
    </ol>

    <button id="btn">ダークテーマにする</button>

    <script src="app.js"></script>
</body>

</html>

7. CSSファイルを作成

VSCodeの「新しいファイル」から style.css ファイルを作成する

style.css

:root {
    --pink: pink;
    --white: rgb(255, 255, 255);
    --black: #303030;
}

body {
    font-family: Meiryo;
    background-color: var(--white);
    color: var(--black);
}

/* ライトテーマ */
.light-theme {
    background-color: var(--white);
    color: var(--black);
}

/* ダークテーマ */
.dark-theme {
    background-color: var(--black);
    color: var(--white);
}

/* ボタン */
#btn {
    background-color: var(--black);
    color: var(--white);
    border: var(--white);
    height: 50px;
    width: 150px;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 50px;
}

8. JavaScriptファイルを作成

VSCodeの「新しいファイル」から app.js ファイルを作成する

app.js

"use strict";

// ボタンの参照を取得
const btn = document.getElementById("btn");

// ボタンクリック時
btn.addEventListener("click", () => {
    // テーマを切り替え
    document.body.classList.toggle("dark-theme");
    document.body.classList.toggle("light-theme");
    
    // クラス名を取得
    const className = document.body.className;

    // ボタンのテキスト切り替える
    if (className === "light-theme") {
        btn.textContent = "ダークテーマにする";
        btn.style.color = "white";
        btn.style.backgroundColor = "black";
    } else {
        btn.textContent = "ライトテーマにする";
        btn.style.color = "black";
        btn.style.backgroundColor = "white";
    }

    // ログ出力
    console.log("現在のクラス名は" + className);
});

9. 動作確認

エクスプローラーから index.html ファイルをダブルクリックし、開いたブラウザにて動作確認する

10. おわりに

いかがでしたでしょうか？素の JavaScript でペライチ web ページ作ることができたのではないかと思います
今回の記事が、みなさまの学習の参考になれば幸いです

2023/3/18 TAKAHIRO NISHIZONO

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up