HTML

留学生りゅうがくせいのためのHTML基礎（きそ）ガイド：JavaScriptを学ぶ前に

Web開発かいはつを勉強べんきょうするみなさん、こんにちは。このガイドでは、プログラミングのJavaScriptを勉強する前に、とても大切たいせつな「HTML」と「CSS」をわかりやすく説明せつめいします。

I. はじめに：ウェブページを構成する「3つの力」

Webサイトを作（つく）るときには、3つの技術（ぎじゅつ）を使（つか）います。それはHTML、CSS、そしてJavaScriptです。これらを「家」に例たとえて考（かんが）えてみましょう。

HTML：家の「柱」や「壁」です。建物（たてもの）の骨組ほねぐみを作（つく）る役割（やくわり）があります。
CSS：家の「ペンキ」や「インテリア」です。色（いろ）を塗（ぬ）ったりして、見みた目（め）をきれいに整（ととの）えます。
JavaScript：家の「電気（でんき）」や「機械（きかい）装置（そうち）」です。ボタンを押（お）すとライトがつくような、動うごきや機能（きのう）を作ります。

HTMLはウェブページの土台どだいです。HTMLの骨組ほねぐみが正（ただ）しくないと、あとからJavaScriptを使っても、うまく動うごきません。まずは、ページの見みえない部分（ぶぶん）である「設定せってい」から理解（りかい）しましょう。

II. HTMLのメタ情報（じょうほう）：ウェブページの「設定せってい」を理解する

ウェブページには、ユーザーには見えませんが、ブラウザや検索けんさく（けんさく）エンジンにとって大切たいせつな情報があります。これを「メタ情報（じょうほう）」と呼（よ）び、<head>タグの中（なか）に書きます。

<title>タグ：ブラウザのタブに表示ひょうじされる名前（なまえ）です。そのページの内容（ないよう）を伝（つた）えます。
文字（もじ）コードの設定せってい：日本語などが正しく表示ひょうじされるようにするための設定せっていです。

もし、文字コードの設定せっていが正しくないと、文字が「読（よ）めない記号（きごう）」になってしまいます。これを「文字化（もじば）け」と言（い）います。設定せっていが終わったら、次は実際（じっさい）に画面がめんで見みえるコンテンツを作（つく）りましょう。

III. いろいろなHTMLタグ：情報（じょうほう）の意味（いみ）を決める

ウェブページをつくるための「HTMLタグ」と「特殊（とくしゅ）記号」について、やさしい日本語で説明します。

HTMLタグとは？

HTMLは、ウェブページの 「骨組ほねぐみ」 をつくるための言葉です。タグは、< と > で名前を囲（かこ）んで書きます。たいていの場合、始まりのタグ（例れい：<p>）と終わりのタグ（例れい：</p>）で文字をはさみます。タグはタグで囲まれた部分が、HTMLの中でどのような仕事をしているかを示します。

1. 見出し（Heading）: `<h1>` 〜 `<h6>`

ページのタイトルや、中身の「見出し」に使います。

<h1> が一番大きく、<h6> が一番小さいです。
文字を大きくするためではなく、ページの内容（構造）をわかりやすくするために使います。

タグ	表示ひょうじ
`<h1>1番大きな見出し</h1>`	1番大きな見出し
`<h2>2番目に大きな見出し</h2>`	2番目に大きな見出し
`<h3>3番目に大きな見出し</h3>`	3番目に大きな見出し
`<h4>4番目に大きな見出し</h4>`	4番目に大きな見出し
`<h5>5番目に大きな見出し</h5>`	5番目に大きな見出し
`<h6>6番目に大きな見出し</h6>`	6番目に大きな見出し

2. リンク（Link）: `<a>`

他のページへ行くためのボタンや文字をつくります。

href という「属性ぞくせいお話はなし」を使って、行きたい場所の住所（URL）を書きます。
（例れい） <a href="https://www.mozilla.org/">Mozilla</a>

この埼玉コンピュータ医療事務専門学校という文字をクリックすると、学校のホームページが表示ひょうじされます。

3. 強調きょうちょう（Emphasis）: `<strong>`

大事な言葉を強調きょうちょう（強く見せる）するときに使います。ブラウザでは、太い文字 のように表示ひょうじされます。

4. 水平線（Horizontal rule）: `<hr>`

話題（わだい）が変わるときなどに、横に長い線を引きます。

上の線が水平線です。

5. 段落だんらく（Paragraph）: `<p>`

ふつうの文章のまとまり（段落だんらく）をつくるときに使います。文章を書くときに一番よく使います。

<p>長い文章をずっと読み続けるのは大変（たいへん）ですよね。そこで、<strong>「同じ内容（ないよう）のお話し」</strong> をひとつにまとめて、区切くぎりをつけたものが「段落（だんらく）」です。</P>

<p>段落（だんらく）より大きなグループに、「節」や「章」があります。</p>

これは下のように表示ひょうじされます。

長い文章をずっと読み続けるのは大変（たいへん）ですよね。そこで、「同じ内容（ないよう）のお話し」 をひとつにまとめて、区切くぎりをつけたものが「段落（だんらく）」です。

段落（だんらく）より大きなグループに、「節」や「章」があります。

6. 改行かいぎょう（Line break）: `<br>`

新しい段落だんらくをつくらずに、次の行（ぎょう）へ行きたいときに使います。これには終わりのタグ（</br>）はありません。

<p>長い文章をずっと読み続けるのは大変（たいへん）ですよね。<br>そこで、<strong>「同じ内容（ないよう）のお話し」</strong> をひとつにまとめて、区切くぎりをつけたものが「段落（だんらく）」です。</P>

これは下のように表示ひょうじされます。

長い文章をずっと読み続けるのは大変（たいへん）ですよね。
そこで、「同じ内容（ないよう）のお話し」 をひとつにまとめて、区切くぎりをつけたものが「段落（だんらく）」です。

7. イメージ（Image）: `<img>`

ページに写真やイラストを表示ひょうじします。

src: 画像がぞうがある場所（パス）を書きます。
alt: 目が見えない人や画像がぞうが出なかったときのために、画像がぞうの説明せつめいを書きます。

<img src="img/駅.jpg" alt="駅の写真">

8. 整形せいけい済みテキスト: `<pre>`

プログラムのコードなどを、書いた通りの形で表示ひょうじします。

スペースや改行かいぎょう（かいぎょう）がそのまま画面がめんに出ます。

<h1>1番大きな見出し</h>のように、書いたまま、表示ひょうじされます。

9. リスト（List）: `<ul>`, `<ol>`, `<li>`

箇条かじょう書がき（かじょうがき）をつくります。

<ul>: 点（・）がつくリストです。
<ol>: 1, 2, 3… と数字がつくリストです。
<li>: リストの中の、ひとつひとつのアイテムに使います。

ulの例れい

olの例れい

特殊記号（とくしゅきごう）

HTMLでは、< や > は「タグ」として使われます。そのため、これらを「文字」として画面がめんに出したいときは、特別な書かき方かたをする必要があります。

記号	名前	HTMLでの書かき方かた	なぜ大事か
&	アンパサンド	`&`	特殊記号の始まりを教える記号だからです。
<	小なり	`<`	タグの始まり（`<`）とまちがわれるからです。
>	大なり	`>`	タグの終わり（`>`）とまちがわれるからです。
“	ダブルクォーテーション	`"`	属性ぞくせい（例れい：`class="name"`）を書くときに使うからです。

これらを使わないと、ブラウザが「これはタグかな？それとも文字かな？」と迷（まよ）ってしまい、ウェブページが正しく表示ひょうじされないことがあります。

アドバイス: HTMLで構造をつくり、CSSで「見みた目め（色やサイズ）」を整（ととの）え、JavaScriptで「動うごき」をつけます。まずはこのHTMLタグをしっかり覚（おぼ）えましょう！

JavaScriptのための「目印（めじるし）」：タグには、JavaScriptが場所（ばしょ）を見みつけるための名前を付（つ）けることができます。

id属性ぞくせいお話はなし：そのページで「たった1つ」の要素（ようそ）に付（つ）ける固有（こゆう）の名前です。
class属性ぞくせいお話はなし：複数（ふくすう）の要素を「グループ化（か）」するための名前です。

次は、データを見やすく整理（せいり）する「テーブル」について学（まな）びましょう。

IV. テーブル：データをおさめて表示ひょうじする

たくさんのデータを並（なら）べて見せるときは、表（テーブル）を使（つか）います。テーブルは、タグの中（なか）にタグを入（い）れる「入（い）れ子（こ）」の構造こうぞうになっています。

テーブルの構成（こうせい）：

<table>タグ：表（ひょう）の全体（ぜんたい）を囲（かこ）む大きな箱（はこ）です。
<thead>テーブルヘッダ：表の見出し部分です。
<tbody>テーブルボディ：表の内容部分です。
<tr>タグ：表の「行（ぎょう）」、つまり横（よこ）の一列（いちれつ）を作ります。
<th>または<td>タグ：行の中にある一（ひと）つのマス目（め）です。<th>は見出し、<td>はデータを書きます。

コードの例れい：

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>点数</th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td>田中さん</td>
      <td>80点</td>
    </tr>
    <tr>
      <td>佐藤さん</td>
      <td>65点</td>
    </tr>
</tbody>
</table>

このHTMLは下のように表示ひょうじされます。

名前	点数
田中さん	80点
佐藤さん	65点

V. フォーム：ユーザーからの入力にゅうりょくを受け取る

「フォーム」は、Webサイトがユーザーとコミュニケーションを取（と）るための大切たいせつな場所（ばしょ）です。

<input type="text">：名前（なまえ）などを書く一列（いちれつ）の箱（はこ）です。
<input type="password">：パスワード用（よう）です。文字（もじ）が隠（かく）れます。
<input type="radio">：ラジオボタンです。いくつかの中から「1つだけ」選びます。
<input type="checkbox">：チェックボックスです。好きなだけ選（えら）べます。
<input type="submit">：送信そうしん（そうしん）ボタンです。これはデータを送（おく）るための「引き金（ひきがね）」になります。

送信そうしんボタンを押（お）すと、データは「道（みち）」を通（とお）ってサーバーへ運（はこ）ばれます。

    <form action="#" method="post">

        <div class="form-group">
            <label>お名前（おなまえ）：</label>
            <input type="text" name="username" placeholder="例（れい）：Yamada Taro">
        </div>

        <div class="form-group">
            <label>パスワード：</label>
            <input type="password" name="userpass">
        </div>

        <div class="form-group">
            <label>性別（せいべつ）：</label>
            <input type="radio" name="gender" value="male" id="m"> <label for="m" style="display:inline;">男</label>
            <input type="radio" name="gender" value="female" id="f"> <label for="f" style="display:inline;">女</label>
        </div>

        <div class="form-group">
            <label>好きな日本料理（にほんりょうり）：</label>
            <input type="checkbox" name="food" value="sushi"> 寿司（すし） 🍣
            <input type="checkbox" name="food" value="ramen"> ラーメン 🍜
            <input type="checkbox" name="food" value="curry"> カレー 🍛
        </div>

        <div class="form-group">
            <input type="submit" value="データを送る（おくる）">
        </div>

    </form>

ここをクリックしてみましょう。上のHTMLがどんなふうに表示ひょうじされるかわかります。

まだ実際にデータを送信そうしんすることはできません。

データの受け取り：GETとPOSTの違い（ちがい）

フォームで入力にゅうりょくされたデータがサーバーに送（おく）られるとき、2つのルール（メソッド）があります。

GET（ゲット）：データがURLの中に含（ふく）まれます。検索けんさく（けんさく）キーワードなど、人（ひと）に見みられても困（こま）らないデータに使（つか）います。
POST（ポスト）：データがURLには見みえない形（かたち）で送られます。パスワードや個人（こじん）情報（じょうほう）など、秘密（ひみつ）にしたいデータに向（む）いています。

JavaScriptを学習（がくしゅう）すると、このデータの送信そうしん（そうしん）をコントロールしたり、入力にゅうりょくミスがないかチェックしたりできるようになります。

6. まとめ

Web制作（せいさく）では、HTMLで「骨組み」を作り、CSSで「見みた目め」を整え、JavaScriptで「動うごき」を加えます。これらが組くみ合あわさって、素晴らしいWebサイトが完成します。

プログラミングの学習は、一歩いっぽずつ進めば大丈夫です。

HTML基礎のまとめ

HTMLはウェブページの「骨組ほねぐみ」です。
<head>タグの中にある設定せっていが正しくないと、文字化（もじば）けが起（お）きます。
idは「1つだけ」、classは「グループ」のための目印（めじるし）です。
テーブルは、<table>の中に<tr>、その中に<th>や<td>を書く構造こうぞうです。
データの送信そうしん（そうしん）には、GETとPOSTの2つの方法（ほうほう）があります。

皆さんの学習を心から応援（おうえん）しています。では、次は CSS について学びましょう。

Keyboard shortcuts

留学生のためのJavaScript学習ガイド

1番大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し