フロントエンド
どの Web ページも、基本的に次の三つの部分でできています。
構造層
- HTML コード：Web ページの基本構造です。
<html>、<body>、<head>、<h1>、<p>、<img>などの HTML タグを使い、ページ内の要素とその関係を定義します。人の骨格のように、ページ全体の内容表示とレイアウトの土台になります。 - セマンティックタグ：
<article>、<section>、<nav>、<footer>などです。これらのタグは要素の役割を明確にし、検索エンジンが内容を理解しやすくします。また、アクセシビリティと SEO にも役立ちます。
表現層
- CSS スタイル：フォント、色、サイズなど、Web ページ要素の見た目を制御します。内容と表示を分けることで、保守とデザイン変更がしやすくなります。
- 画像とマルチメディア：ページ内容を豊かにし、視覚と聴覚の効果を強めます。ユーザーの注意を集め、情報を伝えやすくします。
- アイコンフォント：特殊なフォント形式です。サイズ、色、位置を柔軟に調整でき、ページに視覚要素とインタラクションを追加できます。
動作層
- JavaScript スクリプト：主に Web ページの動的効果とインタラクションを実現します。クリック、マウス移動、キーボード入力などに反応し、メニューの開閉、画像のスライド、フォーム検証、非同期データ読み込みなどを行います。
- イベント処理：JavaScript と Web ページ要素が連携する重要な方法です。
click、mouseover、keydownなどのイベントを監視し、対応する JavaScript 関数を実行して、ユーザー操作にリアルタイムで反応します。
HTML
テンプレート
Web ページには基本テンプレートがあります。
html
<!-- 文書タイプは HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文字コードは UTF-8 -->
<meta charset="UTF-8">
<!-- ブラウザの互換性を設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<!-- Web ページの内容 -->
<!-- body 内で定義する文字は大文字小文字を区別しないが、一般的には小文字で書く -->
</body>
</html>先に述べたように、HTML コードは一つ一つのタグで構成されます。これらのタグは、それぞれ異なるコンポーネントを定義します。 Web ページにコンポーネントを追加したい場合は、対応するタグを書けばよいです。
基本タグ
| タグ | 説明 | 使用例 |
|---|---|---|
<h1>~<h6> | 見出しを定義します。h1 は一番大きい見出しです | <h1>これは見出しです</h1> |
<p> | 段落を定義します | <p>これは段落です。</p> |
<a> | ハイパーリンク | <a href="https://www.runoob.com">これはリンクです</a> |
<br> | 改行 | |
<hr> | 水平線 |
画像と音声
<img>：画像を表示します。<audio>：音声を再生します。MP3、WAV、OGG などの形式に対応します。<video>：動画を再生します。MP4、WebM、OGG などの形式に対応します。
よく使う属性
src：画像、音声、動画の URL を表します。height：要素の高さを設定します。単位はpxまたは%です。width：要素の幅を設定します。単位はpxまたは%です。片方だけ設定すると、もう片方は比率を保って変化します。controls：<audio>と<video>に再生コントロールを追加します。
ハイパーリンク
<a> タグは HTML でハイパーリンクを作るために使います。他のページ、ファイル、位置、リソースへリンクできます。
属性
href：リンク先のリソースアドレスを指定します。例：href="http://example.com"。target：リンク先を開く方法を設定します。主な値は次の通りです。_self：デフォルト値です。現在のページでリンク先を開きます。_blank：新しい空白ページでリンク先を開きます。
表
| タグ | 説明 |
|---|---|
<table> | 表を定義します |
<tr> | 表の行を定義します |
<td> | 表のセルを定義します |
<th> | 表のヘッダーセルを定義します |
タグ属性
<table> タグ属性
| 属性 | 説明 |
|---|---|
border | 表の枠線の幅を指定します |
width | 表の幅を指定します |
cellspacing | セル間の空白を指定します |
<tr> タグ属性
| 属性 | 説明 |
|---|---|
align | 表の行内の内容の揃え方を定義します |
<td> タグ属性
| 属性 | 説明 |
|---|---|
rowspan | セルがまたぐ行数を指定します |
colspan | セルがまたぐ列数を指定します |
時間割の例：
html
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th colspan="2">時限</th>
<th>月曜日</th>
<th>火曜日</th>
<th>水曜日</th>
<th>木曜日</th>
<th>金曜日</th>
</tr>
<tr align="center">
<th rowspan="2">午前</th>
<td>1</td>
<td> </td>
<td>デジタル回路</td>
<td>ソフトウェア</td>
<td> </td>
<td>センサー</td>
</tr>
<tr align="center">
<td>2</td>
<td>マイコン</td>
<td>毛概</td>
<td>マイコン</td>
<td>確率論</td>
<td>確率論</td>
</tr>
<tr align="center">
<th rowspan="2">午後</th>
<td>1</td>
<td>体育</td>
<td> </td>
<td>毛概</td>
<td>デジタル回路</td>
<td>国家安全</td>
</tr>
<tr align="center">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>フォーム
- フォームは
<form>タグで定義します。 - フォーム項目には、さまざまな種類の
<input>要素、ドロップダウンリスト、テキストエリアなどがあります。
関連タグと説明
| タグ | 説明 |
|---|---|
<form> | フォームを定義します。 |
<input> | フォーム項目を定義します。type 属性で入力形式を制御します。例：テキスト入力、パスワード入力、チェックボックスなど。 |
<label> | フォーム項目のラベルを定義します。フォームの使いやすさとアクセシビリティを高めます。 |
<select> | ドロップダウンリストを定義します。 |
<option> | ドロップダウンリストの項目を定義します。<select> タグ内で使います。 |
<textarea> | テキストエリアを定義します。複数行のテキスト入力に使います。 |
<form> 属性
action：フォームデータを送信する URL を指定します。指定しない場合、フォームデータは現在のページに送信されます。method：フォームデータの送信方法を指定します。主に次の二つがあります。get：フォームデータを URL の後ろに付けて送信します。URL の長さに制限があるため、データサイズは約 4KB までです。post：データを HTTP リクエストボディに入れて送信します。理論上、データサイズの制限はありません。
注意点
フォーム項目には必ず name 属性を設定します。これにより、フォーム送信時に対応するデータを送信できます。
例
html
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>フォーム要素
| タグ | 説明 |
|---|---|
<input> | フォーム項目です。type 属性で入力形式を制御します |
<select> | ドロップダウンリストを定義します。<option> タグと一緒に使います |
<textarea> | テキストエリアを定義します |
<input> の type 属性値と説明
type 値 | 説明 |
|---|---|
text | デフォルト値です。1 行の入力フィールドを定義します |
password | パスワードフィールドを定義します。入力内容は隠して表示されます |
radio | ラジオボタンを定義します。複数の選択肢から一つを選びます |
checkbox | チェックボックスを定義します。複数の選択肢を同時に選べます |
file | ファイルアップロードボタンを定義します。ローカルファイルを選んでアップロードできます |
hidden | 非表示の入力フィールドを定義します。ページには表示されませんが、フォームと一緒に送信されます |
submit | 送信ボタンを定義します。クリックするとフォームデータをサーバーへ送信します |
reset | リセットボタンを定義します。クリックするとフォーム内のデータを消します |
button | クリックできるボタンを定義します。特定の機能には JavaScript を組み合わせます |
フォーム操作を改善する方法
- 選択範囲を広げる：
<label>タグを使ってフォーム項目と関連付けます。for属性とフォーム項目のidを対応させると、<label>内の文字をクリックしても対象を選択できます。例：<label for="username">男</label>。 - 排他関係を設定する：二つのラジオボタンを互いに排他にしたい場合、同じ
name属性を設定します。例：<input type="radio" name="sex">。 - 送信データを明確にする：開発では、送信データの意味を明確にするため、フォーム項目に
value属性を追加します。例：<input type="radio" name='sex' value='1'>。
<select> タグの例
html
<select name="city">
<option>北京</option>
<option>上海</option>
<option>河北</option>
</select>上のコードはドロップダウンリストを作ります。ユーザーは「北京」「上海」「河北」から一つを選べます。選択した値はフォーム送信時に送られます。
リストとリストリンク
リストの種類とタグ
- 順序付きリスト：
<ol>タグで定義します。各項目は<li>タグで表します。項目は一定の順序、通常は数字順で表示されます。 - 順序なしリスト：
<ul>タグで定義します。同じく<li>タグで項目を表します。項目は記号、通常は丸点で表示され、順序はありません。
サンプルコード
- 順序付きリストの例：
html
<ol>
<li>コーヒー</li>
<li>牛乳</li>
</ol>この順序付きリストでは、ブラウザが自動で番号を付け、「1. コーヒー」「2. 牛乳」のように表示します。
- 順序なしリストの例：
html
<ul>
<li>コーヒー</li>
<li>牛乳</li>
</ul>この順序なしリストでは、各項目の前にデフォルトの丸点が表示されます。
<ol> タグの type 属性
<ol> タグの type 属性は、項目記号の種類を設定します。よく使う値は次の通りです。
1（デフォルト）：数字（1, 2, 3...）を使います。A：大文字アルファベット（A, B, C...）を使います。a：小文字アルファベット（a, b, c...）を使います。I：大文字ローマ数字（I, II, III...）を使います。i：小文字ローマ数字（i, ii, iii...）を使います。
リストとリンクの組み合わせ
リスト項目 <li> タグの中で <a> タグを使い、リストリンクを作れます。例：
html
<ul>
<li><a href="https://www.example1.com">リンク1</a></li>
<li><a href="https://www.example2.com">リンク2</a></li>
</ul>このようにすると、ユーザーはリスト項目内のリンクをクリックして、対応するページへ移動できます。