問題1 : HTML宣言（ドキュメントタイプ宣言）
HTMLを書くには、「このファイルはHTML文書です。」ということを宣言する必要があります。
決まり文句のようなものです。
では、このHTML宣言を書いてみましょう。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>ちなみに使用しているエディターがvscodeであれば、拡張子が「○○.html」のファイルであれば「!+Enter」で上記のHTML宣言のコードを自動入力できます。
問題2 : 見出しタグを使用しよう
一番文字の大きい見出しを「見出し1」という文言で表示しましょう。
二番目に文字の大きい見出しを「見出し2」という文言で表示しましょう。
三番目に文字の大きい見出しを「見出し3」という文言で表示しましょう。
参考ソース
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
問題3 : 文章を表示するタグを使用しよう
「文章を表示するタグを使用します。」の文言をタグを使用して表示してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>文章を表示するタグを使用します。</p>
</body>
</html>divタグとpタグの違い
今回の問題3はpタグを使用しました。
divタグでも良いのですが、divタグは一つのかたまりとして扱う、pタグは段落を指定して扱うイメージです。
今回のように、単純な文章を入れる場合はpタグを使用します。
またpタグは改行と1行空白ができますが、divタグは改行されるだけになります。
下の画像のようになります。
上記画像のソースコード
<body>
<div style="border:solid 1px;">divタグ</div>
<div style="border:solid 1px;">divタグ</div>
<p style="border:solid 1px;">pタグ</p>
<p style="border:solid 1px;">pタグ</p>
</body>またdivタグとpタグは幅を何も指定しない場合は、親要素の最大幅と同じになります。
問題4 : 改行したくない場合のタグ
下記コードの「pタグ」の横に、改行しないで「あいうえお」の文字を追加し、その文字を赤色で表示させてください。
<body>
<p>pタグ</p>
</body>
文字色を変更する例
<タグ style="color:red"></タグ>
参考ソース
<body>
<p>pタグ<span style="color:red">あいうえお</span></p>
</body>
画面キャプチャ
spanタグは改行されません。
また文字色を赤色にしたようにcssを適用するのは、タグ単位で適用できます。
仮にpタグに対して赤色のcssを適用すると「pタグ」も文字も赤色になってしまいます。
問題5 : 箇条書き
「項目1」「項目2」「項目3」の文字列を箇条書きで表示してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
問題6 : 入力欄の作成
inputタグを使用して入力欄を作成してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" />
</body>
</html>
問題7 : プルダウンの作成
「選択肢1」「選択肢2」「選択肢3」を選択できるようにプルダウンを作成してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select>
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>
</body>
</html>
問題8 : チェックボックスの作成
「選択肢1」「選択肢2」「選択肢3」の選択ができるチェックボックスを作成してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox" value="選択肢1"/>
<label for="one">選択肢1</label>
<input type="checkbox" value="選択肢2"/>
<label for="two">選択肢2</label>
<input type="checkbox" value="選択肢3"/>
<label for="three">選択肢3</label>
</body>
</html>
問題9 : ボタンの作成
ボタンを作成してください。
参考ソース①
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="ボタン" id="btn" />
</body>
</html>
参考ソース②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">ボタン</button>
</body>
</html>
コメント