この教材で学んだ内容を、ブラウザ上で実際にコードを書いて確認できる練習問題です。ひな形コードをTry itで開き、自分の手で書き換えながら理解度を試してください。
超入門の練習問題(Try it連動)
ここでは、この教材で学んだ基本(HTMLとは何か・作業環境の準備・HTMLファイルの作成と表示確認)に、見出しと段落のタグを少しだけ先取りして使いながら、3問の腕試し問題で理解度を確認します。各問題のひな形コードはTry itボタンからブラウザで開き、書き換えた結果をその場でプレビューできます。
まず自力で解き、詰まったらヒントを読み、それでも分からなければ解答と解説に進んでください。答えを見た後も、必ず自分の手で同じコードを書き直すと定着します。
腕試し問題
問1: HTMLファイルの基本骨格を完成させる
次のひな形には、HTML文書に必要な要素が足りません。head要素とbody要素を追加し、ページのタイトルを「私のページ」、本文に「こんにちは」という段落を表示してください。
<!DOCTYPE html>
<html lang="ja">
<!-- この下に head と body を追加してください -->
</html>
ヒント: head要素には文字コードの指定(<meta charset="UTF-8">)とtitle要素を入れます。ブラウザの画面に表示されるのはbody要素の中身だけです。
問2: 見出しと段落で自己紹介ページを作る
h1(見出し)とp(段落)は次の教材で詳しく学びますが、ここでは真似して書いてみましょう。
次のひな形のbody要素の中に、大見出し(h1要素)で名前を1つ、段落(p要素)で自己紹介文を2つ追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
<body>
<!-- ここに見出しと段落を追加してください -->
</body>
</html>
ヒント: 見出しは<h1>〜</h1>、段落は<p>〜</p>で囲みます。開始タグと終了タグの対応を崩さないように注意してください。
問3: 文字化けを防ぐ設定を追加する
次のひな形には、文字コードの指定がありません。このままファイルとして保存して開くと、環境によっては日本語が文字化けする原因になります。head要素の中に適切な1行を追加してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>文字コードの練習</title>
</head>
<body>
<p>この文章が正しく表示される設定を追加しましょう。</p>
</body>
</html>
ヒント: 文字コードとは、文字をコンピュータ上のデータとして表す割り当てのことです。HTMLでは、meta要素のcharset属性でファイルの文字コードをブラウザに伝えます。
解答と解説
問1の解答
基本骨格を完成させた解答例は、次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のページ</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
HTML文書は「DOCTYPE宣言→html要素→その中にheadとbody」という骨格が土台です。head要素はページの設定情報、body要素は画面に表示する本文と、役割が分かれている点を押さえてください。title要素の内容はページ内ではなく、ブラウザのタブに表示されます。
問2の解答
見出しと段落を追加した解答例は、次の通りです。名前や自己紹介文は自由に変えてかまいません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
<body>
<h1>山田太郎</h1>
<p>はじめまして。HTMLの勉強を始めたばかりです。</p>
<p>将来は自分のWebサイトを作るのが目標です。</p>
</body>
</html>
h1要素はページ全体の主題を表す大見出しで、原則1ページに1つだけ使います。段落を増やしたいときは、1つのp要素に詰め込まず、内容のまとまりごとにp要素を分けるのがきれいな書き方です。
問3の解答
文字コードの指定を追加した解答例は、次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字コードの練習</title>
</head>
<body>
<p>この文章が正しく表示される設定を追加しましょう。</p>
</body>
</html>
追加するのは<meta charset="UTF-8">の1行で、head要素内のできるだけ先頭に置きます。UTF-8は現在のWebで標準的に使われる文字コードで、ファイルをUTF-8で保存し、HTMLでも同じ文字コードを宣言することで文字化けを防げます。3問とも解けたら、次の教材「HTMLのタグとは」に進みましょう。
