【HTML,CSSコード解説】クイズゲーム作成（2/3）

WEBブラウザで動くクイズゲームのコード解説（HTML、CSS）
1. コードの概要
HTMLファイル (index.html)の解説
CSSファイル (styles.css)の解説
まとめ
1. コードの特徴

WEBブラウザで動くクイズゲームのコード解説（HTML、CSS）

前回作成したWEBブラウザゲームのコード解説（HTML、CSS）です。

クイズゲーム（1/3）
クイズゲーム（2/3）
クイズゲーム（3/3）

ブラウザゲームのURL
GitHubのURL

GitHubのPagesで公開しているのでゲームプレイできます。

クイズゲーム

GitHubでソースコードを公開しています。

GitHub - make-and-learn/quiz-game

Contribute to make-and-learn/quiz-game development by creating an account on GitHub.

コードの概要

HTMLとCSSを使用したクイズゲームのユーザーインターフェース設計
レスポンシブデザインに対応したレイアウト
外部JavaScriptファイルを利用した機能実装の準備

HTMLファイル (index.html)の解説

クリックするとコードが表示されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- ビューポートの設定：レスポンシブデザイン対応 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クイズゲーム</title>
    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- クイズゲームのメインコンテナ -->
    <div class="quiz-container">
        <h1>クイズゲーム</h1>
        <!-- 問題と選択肢を表示するコンテナ -->
        <div id="question-container">
            <!-- 問題文を表示する要素 -->
            <p id="question"></p>
            <!-- 選択肢を表示する要素 -->
            <div id="choices"></div>
        </div>
        <!-- 結果を表示する要素 -->
        <p id="result"></p>
        <!-- 次の問題へ進むボタン（初期状態では非表示） -->
        <button id="next-button" style="display: none;">次の問題</button>
    </div>
    <!-- クイズデータを含むJavaScriptファイルの読み込み -->
    <script src="quiz-data.js"></script>
    <!-- クイズゲームの動作を制御するJavaScriptファイルの読み込み -->
    <script src="quiz-game.js"></script>
</body>
</html>

DOCTYPE宣言とHTML開始タグ

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

<!DOCTYPE html>: HTML5文書であることを宣言
<html lang="ja">: HTML文書の開始。lang="ja"は日本語文書であることを示す

これらは、ブラウザにこの文書がHTML5形式で書かれた日本語の文書であることを伝えます。正しく解釈されるために重要です。

ヘッド部分

<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>

<meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定
<meta name="viewport" ...>: モバイルデバイス向けのビューポート設定
<title>: ブラウザのタブに表示されるタイトル
<link>: 外部CSSファイルの読み込み

ヘッド部分は、文書の設定や外部リソースの読み込みを行います。特にビューポートの設定は、レスポンシブデザインに重要です。

ボディ開始タグ

<body>

ここから、実際にウェブページに表示される内容が始まります。

メインコンテナ

<div class="quiz-container">
    <h1>クイズゲーム</h1>
    <!-- 以下省略 -->
</div>

<div class="quiz-container">: クイズゲーム全体を包むコンテナ
<h1>: ページのメインタイトル

このコンテナは、クイズゲームの全要素をグループ化し、スタイリングや操作を容易にします。

問題コンテナ

<div id="question-container">
    <p id="question"></p>
    <div id="choices"></div>
</div>

<div id="question-container">: 問題と選択肢を含むコンテナ
<p id="question">: 問題文を表示する要素
<div id="choices">: 選択肢を表示する要素

これらの要素は、JavaScriptによって動的に内容が挿入されます。IDを付けることで、簡単に操作できます。

結果表示と次の問題ボタン

<p id="result"></p>
<button id="next-button" style="display: none;">次の問題</button>

<p id="result">: クイズの結果を表示する要素
<button id="next-button">: 次の問題に進むボタン（初期状態では非表示）

これらの要素も、JavaScriptによって動的に操作されます。ボタンは最初は非表示で、必要なときに表示されます。

JavaScriptファイルの読み込み

<script src="quiz-data.js"></script>
<script src="quiz-game.js"></script>

外部JavaScriptファイルを読み込む
quiz-data.js: クイズのデータを含むファイル
quiz-game.js: クイズゲームの動作を制御するファイル

これらのスクリプトは、HTMLの最後に配置されています。これにより、ページの読み込みが完了してから実行されるため、パフォーマンスが向上します。

HTML終了タグ

</body>
</html>

HTMLドキュメントの終了を示します。これらのタグは、正しく閉じられていることを確認するために重要です。

CSSファイル (styles.css)の解説

クリックするとコードが表示されます。

styles.css

/* ボディ全体のスタイル設定 */
body {
    font-family: Arial, sans-serif; /* フォントをArialに設定 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* ビューポートの高さいっぱいに設定 */
    margin: 0; /* マージンをリセット */
    background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
}

/* クイズコンテナのスタイル */
.quiz-container {
    background-color: white; /* 背景色を白に設定 */
    border-radius: 8px; /* 角を丸くする */
    padding: 20px; /* 内側の余白を設定 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影をつける */
    max-width: 500px; /* 最大幅を設定 */
    width: 100%; /* 幅を100%に設定 */
}

/* ボタンのスタイル */
button {
    display: block; /* ブロック要素として表示 */
    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白を設定 */
    margin: 10px 0; /* 上下のマージンを設定 */
    background-color: #4CAF50; /* 背景色を緑に設定 */
    color: white; /* 文字色を白に設定 */
    border: none; /* ボーダーを削除 */
    border-radius: 4px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインターに変更 */
}

/* ボタンのホバー時のスタイル */
button:hover {
    background-color: #45a049; /* ホバー時の背景色を濃い緑に変更 */
}

/* 結果表示エリアのスタイル */
#result {
    font-weight: bold; /* フォントを太字に設定 */
    margin-top: 20px; /* 上部のマージンを設定 */
}

ボディ全体のスタイル設定

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

font-family: テキストのフォントを指定
display: flex: フレックスボックスレイアウトを使用
justify-content と align-items: コンテンツを中央に配置
height: 100vh: ビューポートの高さいっぱいに設定
margin: 0: 外側の余白をなくす
background-color: 背景色を設定

このセクションは、ページ全体のレイアウトとスタイルを設定します。フレックスボックスを使用してコンテンツを中央に配置し、背景色を薄いグレーに設定しています。100vhはビューポートの高さの100%を意味し、ページを画面いっぱいに表示します。

クイズコンテナのスタイル

.quiz-container {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

background-color: 背景色を白に設定
border-radius: 角を丸くする
padding: 内側の余白を設定
box-shadow: 影をつけて立体感を出す
max-width: 最大幅を設定
width: 100%: 親要素の幅いっぱいに広げる

このセクションは、クイズの内容を表示するコンテナのスタイルを設定します。白い背景に影をつけることで、ページから浮き出たように見せています。最大幅を500pxに制限することで、大きな画面でも見やすさを保っています。

ボタンのスタイル

button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

display: block: ブロックレベル要素として表示
width: 100%: 親要素の幅いっぱいに広げる
padding: 内側の余白を設定
margin: 上下の外側の余白を設定
background-color: 背景色を緑に設定
color: テキストの色を白に設定
border: none: ボーダーを削除
border-radius: 角を丸くする
cursor: pointer: ホバー時にカーソルをポインターに変更

このセクションは、ボタンのスタイルを設定します。緑の背景に白いテキスト、丸い角を持つボタンを作成しています。cursor: pointerを使用することで、ユーザーにクリック可能であることを視覚的に示しています。

ボタンのホバー時のスタイル

button:hover {
    background-color: #45a049;
}

:hover: マウスがボタン上にある時のスタイルを指定
background-color: ホバー時の背景色を濃い緑に変更

このセクションは、ボタンにマウスを乗せたときの動作を定義します。背景色が少し濃くなることで、ユーザーに視覚的なフィードバックを提供し、インタラクティブ性を高めています。

結果表示エリアのスタイル

#result {
    font-weight: bold;
    margin-top: 20px;
}

font-weight: bold: フォントを太字に設定
margin-top: 上部の余白を設定

このセクションは、クイズの結果を表示するエリアのスタイルを設定します。テキストを太字にし、上部に余白を設けることで、結果が目立つようにしています。

これらのCSSルールを組み合わせることで、見やすく使いやすいクイズインターフェースが作成されます。背景色、余白、フォントスタイルなどを調整することで、デザインをカスタマイズできます。

まとめ

コードの特徴

HTML:

セマンティックな要素構造（<div>, <h1>, <p>など）
外部CSSとJavaScriptファイルのリンク
idとclass属性を用いた要素の識別

CSS:

フレックスボックスを使用した中央揃えレイアウト
メディアクエリを使用しないシンプルなレスポンシブデザイン
ボックスシャドウやボーダーラディウスによるモダンな外観
ホバー効果を含むインタラクティブなボタンデザイン

このコードは、Webブラウザで動作するクイズゲームの基本的な構造とデザインを理解するのに役立ちます。HTMLとCSSの基本を学ぶ良い機会となり、それぞれのコードが実際のWebページにどのように反映されるかを知ることができます。

特に注目すべき点は、HTMLの構造化とCSSによるスタイリングの分離です。これは、コードの管理や変更を容易にする重要な概念です。また、フレックスボックスやレスポンシブデザインなどの技術は、現代のWeb開発で広く使用されているため、これらの基礎を理解することは大変有益です。

このコードをベースに、自分なりにスタイルを変更したり、新しい要素を追加したりすることで、Web開発のスキルを向上させることができます。実際に手を動かしてコードを書き、その結果をブラウザで確認することが、最も効果的な学習方法です。

未経験でもWEBスキルを取得したい方