HTMLの3択クイズ

1. HTMLの学び方

1. HTMLの主な用途は何ですか？

A. ウェブページの動作を制御する
B. ウェブページのスタイルを定義する
C. ウェブページの構造を定義する

正解

C. ウェブページの構造を定義する

2. CSSの主な用途は何ですか？

A. ウェブページの構造を定義する
B. ウェブページのスタイル（見た目）を定義する
C. ウェブページのコンテンツを生成する

正解

B. ウェブページのスタイル（見た目）を定義する

3. HTMLファイルの基本構造

次のコードスニペットは、HTMLファイルの基本的な雛形を示しています。空欄[A]～[C]に最も適切な単語をそれぞれ入れなさい。

<!DOCTYPE html>
<[A]>
    <[B]>
        <meta charset="UTF-8">
        <title>タイトル</title>
    </head>
    <[C]>

    </body>
</html>

正解

A.html
B.head
C.body

4. HTMLの`<meta>`タグ

以下のタグが持つ役割は何ですか？

<meta charset="UTF-8">

A. ページのデザインを指定する
B. ドキュメントの文字エンコーディングを指定する
C. ページのキーワードを指定する

正解

B. ドキュメントの文字エンコーディングを指定する

5. HTMLとウェブブラウザ

HTMLドキュメントがウェブブラウザによってどのように扱われるかについて、正しい説明は何ですか？

A. ブラウザはHTMLコードを直接実行する
B. ブラウザはHTMLを解析し、ページを表示する
C. ブラウザはHTMLを変換し、他のプログラミング言語に書き換える

正解

B. ブラウザはHTMLを解析し、ページを表示する

2. 文章の構造を表現するためのタグ

1. HTMLの見出しタグ

HTMLで文書の大見出しをマークアップするために最も適切なタグはどれですか？

A. <h1>
B. <title>
C. <strong>

正解

A. <h1>

2. リストの作成

HTMLで順序付きリストを作成するために使用するタグはどれですか？

A. <ul>
B. <ol>
C. <li>

正解

B. <ol>

3. 段落のマークアップ

HTMLでテキストの段落をマークアップするために最も一般的に使用されるタグはどれですか？

A. <br>
B. <p>
C. <div>

正解

B. <p>

4. `<div>`タグの使用

HTMLで<div>タグは主に何のために使用されますか？

A. テキストを強調する
B. コンテンツを構造化するブロックを作成する
C. 改行を挿入する

正解

B. コンテンツを構造化するブロックを作成する

5. `<br>`タグの目的

HTMLで<br>タグはどのような場面で使用されますか？

A. 新しい段落を始める
B. 文書内での強調
C. テキスト内で改行を挿入する

正解

C. テキスト内で改行を挿入する

3. スタイルを設定して表現力アップ

1. スタイルの適用方法

HTML要素にスタイルを適用する3つの方法のうち、優先度が最も高いものはどれですか？

A. ヘッダーの<style>タグ内に書く
B. 個々のタグのstyle属性で指定する
C. CSSファイルを別に作り、<head>タグ内でリンクを張る

正解

B. 個々のタグのstyle属性で指定する

２. divタグの用途

<div>タグはHTML文書内でどのように使用されますか？

A. 文字色を変更するため
B. 要素をブロックレベルでグループ化するため
C. リンクを作成するため

正解

B. 要素をブロックレベルでグループ化するため

3. classセレクタの使用

HTML文書において、複数の異なる要素に同じスタイルを適用するために最も適しているセレクタは何ですか？

A. idセレクタ
B. classセレクタ
C. tagセレクタ

正解

B. classセレクタ

4. classとidの違い

classとidの主な違いは何ですか？

A. idは一つのドキュメントに一つだけ存在できるが、classは複数存在できる
B. classはCSSでのみ使用でき、idはJavaScriptでのみ使用できる
C. classはHTML要素を識別するためのもので、idはスタイリングのためのもの

正解

A. idは一つのドキュメントに一つだけ存在できるが、classは複数存在できる

5. 複数のクラスの適用

HTML要素に複数のクラスを適用するにはどうすればよいですか？

A. クラス名をカンマで区切る
B. クラス名をセミコロンで区切る
C. クラス名をスペースで区切る

正解

C. クラス名をスペースで区切る

6. クラス適用の優先順位

同じHTML要素に適用された複数のクラスで矛盾するスタイルがある場合、どのスタイルが優先されますか？

A. 最初に記述されたクラス
B. 最後に記述されたクラス
C. アルファベット順に最初のクラス

正解

B. 最後に記述されたクラス

4. リンクを張って回遊性を高める

1. リンクの基本

HTMLでaタグを使用する目的は何ですか？

A. 画像を表示する
B. ページ内でのナビゲーションを提供する
C. テキストの色を変更する

正解

B. ページ内でのナビゲーションを提供する

2. リンクの指定方法

リンク先を指定する方法でないものはどれですか？

A. 絶対パス指定
B. ルートパス指定
C. フォント指定

正解

C. フォント指定

3. ページ内リンク

ページ内リンクを作成する際に、リンク先に設定する属性は何ですか？

A. class
B. href
C. id

正解

C. id

4. 相対パス指定

HTMLで相対パスを使用する目的は何ですか？

A. 現在のドキュメントから特定のファイルやページへのパスを指定するため
B. インターネット上の任意のウェブサイトへリンクするため
C. ドキュメントのフォントスタイルを定義するため

正解

A. 現在のドキュメントから特定のファイルやページへのパスを指定するため

5. リンクの基本構造

次のコードスニペットは、リンクの基本的な雛形を示しています。空欄[A]～[B]に最も適切な単語をそれぞれ入れなさい。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>a1.html</title>
    </head>
    <body>
        <[A] [B]="https://www.yahoo.co.jp/">ヤフージャパンへ</a><br>
    </body>
</html>

正解

A.a
B.href

5. 画像とテーブルで表現力アップ

1. 画像の貼り方

<img>タグを使用する目的は何ですか？

A. ページに背景色を設定する
B. ページに画像を表示する
C. ページのレイアウトを調整する

正解

B. ページに画像を表示する

2. imgタグの基本構造

次のコードスニペットは、imgタグの基本的な雛形を示しています。空欄[A]～[B]に最も適切な単語をそれぞれ入れなさい。

<html>
    <head>
        <meta charset="UTF-8">
        <title>img1.html</title>
    </head>
    <body>
        <p><[A] [B]="mtFuji.jpg"></p>
    </body>
</html>

正解

A.img
B.src

3. テーブルの作成

<table>タグで作成されるのは何ですか？

A. リスト
B. テーブル
C. パラグラフ

正解

B. テーブル

4. テーブルの基本構造

次のコードスニペットは、テーブルの基本的な雛形を示しています。空欄[A]～[C]に最も適切な単語をそれぞれ入れなさい。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>このタイトルはブラウザのタブに表示されます</title>
    </head>
    <body>
        <table border ="1">
            <[A]>
                <[B]>
                    <th>都市名</th>
                    <th>名物</th>
                </tr>
            </thead>
            <tbody>
                <[B]>
                    <[C]>名古屋</td>
                    <[C]>ひつまぶし</td>
                </tr>
                <[B]>
                    <[C]>伊勢</td>
                    <[C]>赤福</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

正解

A.thead
B.tr
C.td

6. フォーム部品でユーザーに入力してもらう

1. HTMLフォームの目的

HTMLのフォーム部品はどのような目的で使用されますか？

A. サーバーにデータを送信する
B. ウェブページを飾るため
C. ページの読み込み速度を向上させる

正解

A. サーバーにデータを送信する

2. `<input type="text">`タグ

<input type="text">タグは何を作成しますか？

A. チェックボックス
B. 一行テキストフィールド
C. 選択リスト

正解

B. 一行テキストフィールド

3. GETメソッドの特徴

ウェブフォームのデータ送信においてGETメソッドが使用される場合、以下のうちどの特徴が正しいですか？

A. データはURLの一部として送信され、ブックマーク可能
B. データはHTTPリクエストのボディに隠され、安全
C. データ量には制限がなく、大量の情報を送信できる

正解

A. データはURLの一部として送信され、ブックマーク可能

4. POSTメソッドの特徴

ウェブフォームのデータ送信にPOSTメソッドが使用される場合、以下のうちどの特徴が正しいですか？

A. 送信データはブラウザのURLに表示され、容易にアクセスできる
B. 送信データはHTTPリクエストのボディ内に含まれ、URLには表示されない
C. 送信データ量に厳しい制限があるため、小規模なフォームに適している

正解

B. 送信データはHTTPリクエストのボディ内に含まれ、URLには表示されない

5. `action`属性の役割

HTMLフォームでaction属性が指定されている場合、その役割は何ですか？

A. フォームが送信されたときにデータを処理するサーバーのURLを指定する
B. フォーム内の入力データを検証するJavaScript関数を指定する
C. フォームが送信されると表示されるメッセージを定義する

正解

A. フォームが送信されたときにデータを処理するサーバーのURLを指定する

6. `name`属性の重要性

HTMLフォームの<input>要素におけるname属性の役割は何ですか？

A. フォームの見た目を定義するために使用される
B. サーバーに送信されるデータの識別子として機能する
C. 入力されたデータの型を指定するために使用される

正解

B. サーバーに送信されるデータの識別子として機能する

7. フォームの基本構造

次のコードスニペットは、フォームの基本的な雛形を示しています。空欄[A]～[D]に最も適切な単語をそれぞれ入れなさい。

<html>
    <head>
        <meta charset="UTF-8">
        <title>form1.html</title>
    </head>
    <body>
        <[A] action="https://www.google.co.jp/search" [B]="get">
            名前：<input [C]="q" type="text">
            <p><button type="[D]">search</button></p>
        </form>
    </body>
</html>

正解

A.form
B.method
C.name
D.submit

補講1. BootStrapレイアウト編

1. Bootstrapの主な目的

Bootstrapは何のために使用されますか？

A. サーバーサイドのプログラミングを簡単にするため
B. ウェブデザインを簡単に、そしてレスポンシブにするため
C. データベース管理を効率化するため

正解

B. ウェブデザインを簡単に、そしてレスポンシブにするため

2. Bootstrapの雛形に関する説明

Bootstrapの雛形作成において、レスポンシブデザインを支援するためのmetaタグには何を記述しますか？

A. データベースの種類
B. スタイルシートのパス
C. ビューポートの設定

正解

C. ビューポートの設定

3. Bootstrapにおけるテキスト位置の制御

Bootstrapでテキストを中央揃えにするために使用するクラス名は何ですか？

A. text-md-center
B. text-center
C. center-block

正解

解答: B. text-center

4. Bootstrapのグリッドシステム

Bootstrapのグリッドシステムで、コンテナ内の列を全体の何分の1として指定するのが一般的ですか？

A. 10
B. 12
C. 15

正解

解答: B. 12

5. Bootstrapでの余白の扱い方

Bootstrapで余白を設定する際に使用する接頭辞は何ですか？

A. col-
B. m-またはp-
C. text-

正解

解答: B. m-またはp-

補講2. BootStrapコンポーネント編

1. Bootstrapのテーブルクラス

Bootstrapでテーブルのデザインをカスタマイズするために使用するクラスはどれですか？

A. .table-design
B. .table
C. .table-style

正解

B. .table

2. ナビゲーションバーのクラス

Bootstrapにおいて、ナビゲーションバーを作成するために必要なクラスはどれですか？

A. .nav-bar
B. .navbar
C. .navigation-bar

正解

B. .navbar

3. フォーム要素のスタイリング

Bootstrapでフォーム要素にスタイルを適用する際に使用するクラスはどれですか？

A. .form-design
B. .form-style
C. .form-control

正解

解答:C. .form-control

4. ボタンの色

Bootstrapにおいて、危険を示す赤色のボタンを作成するために使用するクラスはどれですか？

A. .btn-danger
B. .btn-warning
C. .btn-error

正解

解答: A. .btn-danger

5. カードコンポーネント

Bootstrapにおいて、コンテンツを整理して表示する柔軟なコンテナは何と呼ばれますか？

A. .container-flex
B. .card
C. .block

正解

解答: B. .card

新人エンジニア向けHTML講座の一覧に戻る

HTMLの学び方（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる