HTML

HTML教材

HTMLとは

これからHTMLを学んでいただきますが、その前に「HTMLとは何なのか」というところから説明していきます。

そもそもHTMLとは「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）」のことで、一般的には「HTML（エイチティーエムエル）」と呼ばれています。

では、このHTMLを使うとどんなことができるのでしょうか？
それはWEBページの基本的な表示と構造を決めることができます。

例えば、たった今皆さんが読んでいるこちらの教材もHTMLを使用して作成されています。

このように、HTMLはブラウザに表示している文字や画像、音声、動画などをデータとして表現することができ、WEBページの基礎を作ることができます。

さらに、WEBページで表示する文字や画像、音声、動画などの要素をグループ化したり、WEBページをどのような作りにするかなどの骨組みを作る役割も果たします。

つまり、HTMLはブラウザに表示する要素の基礎を作成するものであり、HTML抜きでWEB開発を行うことはできないと言っても過言ではありません。

そんなとても重要なHTMLですが、実はマークアップ言語の一つであり正確に言うとプログラミング言語ではありません。
しかし、今日存在するほとんどのWEBページでHTMLが使用されており、WEBエンジニアになるためには絶対に知っておかなければならない言語の一つです。

そんなWEB開発の基礎であるHTMLの世界から足を踏み入れていきましょう！

★検索ワード
・HTMLとは
・マークアップ言語とは

HTMLフォルダ&HTMLファイル作成

フォルダ名：「make_folder」

まずは、以前のレクチャーでデスクトップに作成したProgrammingフォルダの中に、HTML学習用のフォルダとHTMLファイルを作成していきます。

フォルダ作成方法がわかる方は、すぐ下の「フォルダ作成ができる方向け」の指示に従ってフォルダを作成して下さい。
フォルダ作成方法がわからない方は、少し下に「フォルダ作成がわからない方向けの説明」があるので、そちらを見ながら指示に従って作成して下さい。

フォルダ作成ができる方向け

Programmingフォルダの中にtasksフォルダとtextsフォルダを作成して下さい。
tasksフォルダは課題の際に使用するのでそのままで大丈夫です。
textsフォルダは教材で使用するので、その中にHTMLフォルダを作成して下さい。
そのHTMLフォルダの中に今回のレクチャー用のフォルダmake_folderを作成して下さい。
最後に、そのmake_folderの中にindex.htmlファイルを作成して下さい。
これで準備は完了です。

フォルダ作成がわからない方向けの説明

実は、前回インストールしたVSCodeからフォルダを作成することができます。

  • VSCodeを開く
    スクリーンショット 2022-04-02 21.00.02.png

  • 画面左上のファイルをクリックして、フォルダーを開く...をクリック

Macをお持ちの方:
スクリーンショット 2022-04-02 21.13.15.png
Windowsをお持ちの方：
p3-1.png

  • デスクトップ内のProgrammingフォルダをクリックして開くをクリック
    スクリーンショット 2022-04-02 21.18.20.png

  • 下記画像のようにProgrammingフォルダが表示されていればOKです。
    ※VSCodeでファイルを開くと、全て大文字になるのでPROGRAMMINGでOKです。
    スクリーンショット 2022-04-02 21.42.26.png

  • 次に、下記画像の赤枠で囲われたフォルダ作成マークをクリックして新規フォルダを作成し、教材用フォルダとしてtextsと名前を付ける。
    スクリーンショット 2022-04-02 22.12.48.png

  • 一度下記画像を参考にtextsフォルダの下辺りをクリックして、もう一度フォルダ作成マークをクリックして新規フォルダを作成し、課題用フォルダとしてtasksと名前を付ける。
    ※こちらのtasksフォルダは課題を保存する際に使用するので、教材閲覧中は使用しません。
    スクリーンショット 2022-04-02 22.14.13.png

  • 次に、textsフォルダをクリックし、フォルダ作成マークをクリックすると、textsフォルダの下に新規フォルダが作成されるので、HTMLと名前を付ける。
    スクリーンショット 2022-04-02 22.19.20.png

  • もう一度フォルダ作成マークをクリックすると、HTMLフォルダの下に新規フォルダが作成されるので、make_folderと名前をつける。
    スクリーンショット 2022-04-02 22.23.16.png

  • make_folderフォルダをクリックし、ファイル作成マークをクリックすると新しいファイルが作成されるので、index.htmlと名前を付ける。
    スクリーンショット 2022-04-02 22.27.20.png

これでフォルダの作成とHTMLファイルが作成できました。

Programmingフォルダ

最終的に、Programmingフォルダ内にtasksフォルダとtextsフォルダが作成され、textsフォルダの下にはHTMLフォルダがあり、その下にはmake_folderフォルダ、さらにその下にindex.htmlというHTMLファイルが存在していればOKです。

Programming
├── tasks
└── texts
    └── HTML
        └── make_folder
            └── index.html

VSCodeでは下記画像のような見た目になります。
スクリーンショット 2022-04-02 22.35.19.png

これで課題用のフォルダtasksと教材用のフォルダtextsを作成することができました。
また、HTMLの教材を進めるためのHTMLフォルダをtextsフォルダの下に作成し、本レクチャー用のフォルダmake_folderと本レクチャー用のHTMLファイルindex.htmlを作成することができました。

次のレクチャーからは、レクチャーの最初に「フォルダ名」が記述してあります。
そのフォルダ名に従って、HTMLフォルダの中に新しくレクチャー用のフォルダを作成し、作成したフォルダの中にindex.htmlという名前のHTMLファイルを作成していきます。

フォルダの作成方法等わからないことがありましたら、下記の検索ワードで検索してみましょう。
それでもわからない場合は講師に質問して下さい。

★検索ワード
・VSCode フォルダ 開く
・Mac VSCode フォルダ 開く
・Mac VSCode フォルダ作成 方法
・Mac VSCode ファイル作成 方法
・Windows VSCode フォルダ 開く
・Windows VSCode フォルダ作成 方法
・Windows VSCode ファイル作成 方法

HTMLの書き方（タグ、要素、属性）

フォルダ名：「how_to」

初めてレクチャーごとのフォルダを追加するので、画像を使用してわかりやすく説明します。
フォルダ作成方法がわかる方は、textsフォルダ下のHTMLフォルダ内に今回のレクチャー用フォルダであるhow_toフォルダを作成して、その中にindex.htmlファイルを作成して下さい。

それでは画像を使用してレクチャーごとのフォルダ作成方法を説明します。
以降のレクチャーでも下記の手順と同じようにフォルダとHTMLファイルを作成して下さい。

  • VSCode上でtextsフォルダ下のHTMLフォルダをクリックしてから、フォルダ作成マークをクリックし、新しくできたフォルダにhow_toと名前を付ける。
    スクリーンショット 2022-04-02 22.40.48.png

  • how_toフォルダをクリックしてからファイル作成マークをクリックし、新しくできたファイルにindex.htmlと名前を付ける。
    スクリーンショット 2022-04-02 22.44.54.png

最終的に下記画像のようになっていればOKです。
スクリーンショット 2022-04-02 22.47.37.png

正しくフォルダとHTMLファイルを作成すると、先ほどのレクチャー用のmake_folderと今回のレクチャー用のhow_toがHTMLフォルダの下にある状態になります。
これから各レクチャーごとに毎回新しいフォルダとHTMLファイルを作成し、作成したHTMLファイル内にレクチャーで学習するHTMLを記述して下さい。

それでは、本題に移っていきましょう！

タグ・要素・属性について

HTMLの書き方を学習する前に、HTMLの基本である「タグ」と「要素」、「属性」という3つについて学習していきます。
それでは、さっそくこの3つがどのような役割を果たしているのかを確認していきましょう。

タグ

HTMLでは、「タグ」と呼ばれる<>の記号で囲まれた呪文のようなものをたくさん使用して記述していきます。

タグの記入方法は、基本的に<開始タグ>と</終了タグ>の2つを1セットとして使います。
また、終了タグには開始タグとは違い、タグ名（要素名）の前に/（スラッシュ）を付けます。

例えば、HTMLで用意されているpタグというものを使用して「これはHTMLです。」というテキストをブラウザに表示させたい場合は下記のようになります。

<p>これはHTMLです。</p>

他にもHTMLで用意されているタグには、画像を表示させるためのimgタグや、リンクを作成するためのaタグ、どのようなサイトなのかを表すtitleタグなど様々なタグが存在しています。

それらのタグをすべて覚える必要は全くありません。
使いながら少しずつ慣れていけばOKです！

要素

次は「要素」について見ていきましょう。

要素とは、開始タグから終了タグまでの全体を指します。
開始タグと終了タグはもちろん、開始タグから終了タグまでの間にある内容も全て含めて要素となります。

イメージしやすいように画像も使って説明していきます。
html_2.png
なるべくイメージしやすいように、今回の例でもタグを説明したときに使用したpタグを使用しています。

開始タグの<p>から終了タグ</p>はもちろん要素の一部ですが、開始タグと終了タグの間にある「HTMLの書き方」というテキストも含めて全てが要素となり、pタグを使用しているので全体でp要素と呼ぶことができます。

このように開始タグから終了タグまでを要素と呼ぶことは覚えておきましょう。
また、タグ名は要素名とも呼ばれており、もし画像を表示するためのimgタグというタグが使用されていた場合は、imgタグで記述されている全体を表す場合はimg要素と呼びます。

属性

「タグ」と「要素」について学んだので、最後に「属性」について見ていきましょう。

属性とは、簡単に説明すると要素の詳細を設定をするための技です。
いわば要素のオプションだと思って下さい。

属性を設定するには下記のように記述します。

<要素名 属性=”属性値”></要素名>

要素を指定するポイントは下記の3つです。

  1. 開始タグの要素名の後ろに半角スペースを入れる
  2. 属性の後ろに=（イコール）を付ける
  3. 属性値は”（ダブルクオート）で囲む

また、属性は複数指定することも出来ます。

<要素名 属性=”属性値” 属性=”属性値”>

その場合は上記のように、それぞれの属性を半角スペースで区切って記述します。

イメージしやすいようにpタグを使用したパターンを画像で説明していきます。
html_3.png
今回は、pタグにalign属性を設定した場合の例です。

align属性とは、属性値にcenterやleft、rightのような値を設定することによって文字の中央寄せや左寄せ、右寄せをすることができます。

今回の例の場合はleftが指定されているので、「HTMLの書き方」というテキストは左寄せで表示されます。
もちろんrightを指定した場合は、右寄せで表示されます。

また、本来align属性のようにデザインを整える役割はHTMLではなくCSSで行いますが、今回は属性というものをわかりやすく説明するためにalign属性を使用しています。

念の為、HTMLでも最低限の見た目を整えることもできるということは覚えておいてください。

このようにHTML要素に対して属性を設定することで、様々な操作が可能となります。
他にもたくさんの属性がありますが、こちらも徐々に慣れていけばOKです！

★検索ワード
・HTML タグとは
・HTML 要素とは
・HTML 属性とは
・HTML align 使い方

はじめてのHTML

フォルダ名：「first_html」

まずは、textsフォルダ下のHTMLフォルダ内にレクチャー用のフォルダfirst_htmlを作成をしてください。
次に、作成したfirst_htmlフォルダの下にindex.htmlというHTMLファイルの作成をしてください。

それではHTMLの書き方について学習していきましょう。
まず、HTMLには決まって記述しなければならないコードである「雛形」というものが存在しています。
言葉で説明をする前に、実際にどのようなものなのか記述してみましょう。

first_htmlフォルダ内で作成したindex.htmlを下記の通り編集してください。

<!DOCTYPE html>

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>

</body>

</html>

すべて記述し終えたら、変更した箇所を保存しなければならないのでCommand + s(Windowsの方はCtrl + s)を押してください。
これで変更した箇所を保存することができます。

これより先、ファイルを変更した場合は必ず保存を行ってください。
この保存を忘れてしまうと記述した内容がブラウザにうまく反映されず、学習が先に進まなくなってしまいます。

変更した内容が反映されていない場合は、保存することを忘れていないかしっかり確認しましょう！

では、保存が完了したので今回記述したコードについて解説していきます。

いきなり内容が難しくなった感じがしますが安心してください。
一つひとつ整理していけばあまり難しいことではありません。

<!DOCTYPE html>

文書型宣言と呼ばれ、HTMLのバージョンを宣言しています。
HTMLは必ずこのDOCTYPEを記述することから始まります。
特にこのタグの意味を覚える必要はありませんが、HTMLを記述する場合は必ず最初に記述してください。

<html lang="ja"> 〜 </html>

HTMLを記述する場合はまずhtmlタグを記述して、その中にWEBページの内容を記述していくことがルールになっています。

また、lang属性を指定しており、属性値をjaとすることで、このHTMLファイルが日本語のHTMLファイルであることを明示しています。

lang属性のlangは「Language」の略です。
もちろんjaは「Japanese」の略ですね。

英語の内容のHTMLファイルを作成したい場合は、lang="en"のようにlang属性の属性値をenにすればOKです。

<head> 〜 </head>

次に、headタグをhtml要素内に記述します。

このhead要素の中では、HTMLファイルのさまざまな情報を指定することができます。
ユーザーがブラウザで閲覧できるような情報ではなく、ファイルの設定などをこのhead要素の中に記述するイメージです。

<meta charset="UTF-8">

head要素内に記述する代表例がこのmeta要素です。
通常HTMLが用意しているタグには閉じタグが存在していますが、このmetaタグには閉じタグが存在しません。

このmetaタグは、ページを記述する文字コードやそのコンテンツに関する著者、期限、キーワードといった「メタデータ」を表現するHTML要素です。

今回のコードでは、文字コードをUTF-8に設定してあります。
文字コードを簡単に説明すると、「文字をコンピュータで処理したり通信したりするために，文字ごとに一意の番号を割り振ったもの」です。

というのも、コンピュータは基本的に0と1という2つの数字しか理解することができません。
そのため、私たち人間が文字を入力してもコンピュータは文字のままでは理解できないため、0と1の組み合わせの数値に変換しなければなりません。

その変換時のルールを定めているのが文字コードです。
例えば、とある文字コードでは「あ」を「01」と変換し、別の文字コードでは「あ」を「10」のように変換しているということです。

このように「あ」を表現するための0と1の組み合わせは文字コードによって異なるため、文字コードの指定がずれていると文字化けが起こってしまいます。
つまり、文字化けが起こる原因は、文字コードの設定がファイル側と読み込む側で合っていないからということになります。

文字コードには、今回指定しているUTF-8の他にもShift JISなどがありますが、近年のWEB開発ではUTF-8を指定していれば大丈夫ですので、<meta charset="UTF-8">と記述しておけばOKです。

<title> 〜 </title>

head要素内に記述するもう1つの代表例がtitleタグです。
titleタグでは、WEBページのタイトルを決めることができます。

WEBページのタイトルと言われてもピンとこないかもしれないので、試しに今回のレクチャーで作成したindex.htmlをブラウザで表示させてみましょう。

ブラウザを開いて、index.htmlをその上にドラック＆ドロップしてみてください。
コツは、VSCode上のindex.htmlのファイルをドラッグしながら、Chromeの新しいタブの真上までポインターを持っていって、ドロップすることです。
VSCodeからHTMLファイルを読み込む.gif
するとどうでしょうか？

下記画像のようにタイトルがHTMLの学習になっていませんか？
なっていない場合は、保存を忘れていないか、Chromeで正しくファイルを読み込めているかを確認してみましょう！
スクリーンショット 2022-04-08 23.17.54.png
では、なぜWEBページのタイトルが「HTMLの学習」となっていたのでしょうか？
それは、雛形で<title>HTMLの学習</title>と記述していたためです。

つまり、<title></title>の中身を変更することで、WEBページのタイトルを自由に決められるということです。
例えば、<title>HTMLの学習って楽しい！</title>と記述した場合、「HTMLの学習って楽しい！」とWEBページのタイトルに表示されるようになります。

このようにWEBページのタイトルは自由に決められるので、ぜひ色々なタイトルにして確認してみてください！

<body> 〜 </body>

次にhtml要素内に記述しているのはbodyタグです。
bodyタグの中身には、テキストや画像など、実際にブラウザの画面上に表示される内容を記述していきます。

今回はHTMLの雛形の説明なので、body要素内には何も記述していません。
そのため、先ほどブラウザで確認していただいたときも、WEBページのタイトルは確認できましたが、それ以外は何も表示されていませんでした。

次のレクチャーからは、このbodyタグの中に色々なタグを書いていきますので楽しみにしていてください！

ちなみに、これだけたくさんのコードが出てきましたが、雛形をすべて覚える必要は全くありません。
なぜかというと、雛形を覚えていなくても、HTMLに雛形があることを認識していて、雛形の書き方を検索でき、その雛形をコピー&ペーストしてHTMLファイルを作成できれば十分だからです。

また、VSCodeにはemmet(エメット)という拡張機能がデフォルトで備わっており、HTMLファイルを作成後、!(半角のエクスクラメーションマーク)を入力し、エンターを押すと自動でHTMLの雛形が出来上がります。

これらの便利機能を覚えておくことのほうがむしろ大切なこともあるので、出てきたことすべてを暗記することにとらわれず、楽な姿勢で学習していくのが理想です！

★検索ワード
・HTML 雛形
・HTML 文書型宣言
・HTML htmlタグ 使い方
・HTML headタグ 使い方
・HTML metaタグ 使い方
・HTML titleタグ 使い方
・HTML bodyタグ 使い方
・文字コードとは
・vscode emmet

見出しの実装

フォルダ名：「header」

まずは、textsフォルダ下のHTMLフォルダ内にレクチャー用のフォルダheaderを作成をしてください。
次に、作成したheaderフォルダの下にindex.htmlというHTMLファイルの作成をしてください。

ここから先のレクチャーでは、フォルダ作成&ファイル作成指示は省略させていただきますので、皆さん自身で作成して下さい。

それではさっそく見出しについて学習していきましょう！
そもそも見出しとは、下記画像の赤枠で囲まれた部分のことを指しています。
スクリーンショット 2023-01-13 15.34.08.png
つまり、見出しとは「WEBページを見てくれた人に伝えたいことやタイトルなどをわかりやすくするために使用するもの」となります。
そんな見出しをHTMLで実装するには、h1タグやh2タグといったものを使用します。

まずは実際にHTMLを使用して見出しを実装してみましょう！
作成したindex.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>HTMLの学習</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>h1は1番大きな見出し</h1>
    <h2>h2は2番目に大きな見出し</h2>
    <h3>h3は3番目に大きな見出し</h3>
    <h4>h4は4番目に大きな見出し</h4>
    <h5>h5は5番目に大きな見出し</h5>
    <h6>h6は6番目に大きな見出し</h6>
</body>

</html>

HTMLのお決まりである雛形を記述してから、h1タグ〜h6タグまでを記述しています。
各タグの閉じタグも忘れないようにしましょう！

すべて記述できたら、さっそくHTMLファイルをブラウザで読み込んでみましょう。
読み込み方は以前学習した通り、VSCode上のindex.htmlのファイル名をドラッグしながら、Chromeの新しいタブの真上までポインターを持っていって、ドロップすることです。
VSCodeからHTMLファイルを読み込む.gif
下記画像のように表示されていればOKです！
html_5.png

ブラウザに表示してみると、h1タグからh6タグにかけて徐々に文字が小さくなっているのがわかると思います。
見出しをつける時の基本は、大見出しとなるh1タグから使っていき、中見出しにh2タグ、小見出しにh3タグと順番に使っていくことです。

「見た目がいいから！」という理由で、いきなりh4タグなどを使うといったことはご法度です。
なぜなら、HTMLは表示と構造を指定する言語なので、文字の大きさなどのデザイン部分を整えるのは後ほど学習するCSSで行うからです。

HTMLで見出しを作成するタグはh1タグからh6タグの全部で6つです。
h7タグやh8タグなどは存在しないので注意しましょう。

なお、h1タグは最も大きな見出しです。
WEBページの主題を表すために1ページに一度だけ使うのが理想です。
「そのページに何が書いてあるのか」という主題に対して、1度だけ使用してください。

なお、h2タグ以下は1ページ中に何度でも使用していただいて構いません。

例えば、見出しタグを使って自己紹介をするWEBページを作成する場合は、下記の画像のようになります。
スクリーンショット 2023-01-13 16.32.57.png
実際のコードはこのようになっています。

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>HTMLの学習</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>自己紹介</h1>
    <h2>出身</h2>
    <p>東京都</p>
    <h3>東京のおすすめスポット</h3>
    <ul>
        <li>新宿</li>
        <li>渋谷</li>
        <li>池袋</li>
    </ul>
    <h2>趣味</h2>
    <ul>
        <li>ゲーム</li>
        <li>ランニング</li>
    </ul>
    <h2>将来の夢</h2>
    <p>WEBエンジニア</p>
</body>

</html>

pタグやulタグ、liタグの使い方は別のレクチャーで説明しますので、まずは見出しタグであるh1タグからh3タグについて注目してください。

今回は自己紹介をするためのWEBページを作成しているので、大見出しとして「自己紹介」という文字を主題であるh1タグを使用して記述しています。

次に、「出身」や「趣味」、「将来の夢」などの中見出しにh2タグを使用して記述しており、出身に付随した「東京のおすすめスポット」は小見出しとしてh3タグを使用しています。

このように、見出しを記述する際にはテーマが大きい順にh1タグからh6タグを使用してみてください！

★検索ワード
・HTML 見出しタグ 使い方

コメントアウト

フォルダ名：「comment_out」

続いて「コメント」を記述する方法について説明していきます。

実はHTMLのコードにはコメントなるものを記述することができます。
コメントとして記述した文字は、以前学習した見出しなどと違ってブラウザに表示されることはありません。

つまり、コメントであれば、ブラウザの表示に影響なく文字や文章を書き残すことができます。
ちなみに、コメントすることをコメントアウトと呼んだりするので覚えておきましょう。

ではまず、index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <h1>コメントについて</h1>
    これはコメントされません
</body>

</html>

保存が完了したら、HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
スクリーンショット 2023-01-13 17.09.45.png
「これはコメントされません」という文章がブラウザに表示されてしまっていますね。

実はHTMLの場合、タグで文字を囲まなくてもブラウザに記述した文字は表示されてしまいます。
では、どのようにコメントを実装すればいいのでしょうか？

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <h1>コメントについて</h1>
    <!-- これはコメントされません -->
</body>

</html>

保存が完了したら、HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
スクリーンショット 2023-01-13 17.17.24.png
今度は「これはコメントされません」という文章がブラウザに表示されていないことがわかると思います。

つまり、HTMLでコメントをしたい場合は、<!-- -->の中に記述すればいいということがわかります。

また、コメントは下記の例のように複数行にまたがってもOKです！

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <h1>コメントについて</h1>
    <!-- これはコメント
    されません -->
</body>

</html>

実は、VSCodeにはコメントアウトの「ショートカットキー」も存在しています。
VSCode上でコメントしたい行をクリックして下記のショートカットキーを押してみましょう。
・Mac：Command + /
・Windows：Ctrl + /

ショートカットキーを押すと、選択した行がまるまる<!-- -->で囲まれます。
とても便利なので、今のうちに覚えておきましょう！

このように、ちょっとメモを残しておきたいときに使うのがコメントです。
後で見返したいことなどをコメントとしてファイルに残しておくと便利です！
ぜひ活用してみましょう！

★検索ワード
・HTML コメントアウト
・HTML コメントアウト ショートカットキー

段落の実装

フォルダ名：「paragraph」

続いて「段落」を実装する方法について説明していきます。

HTMLで段落を実装するためのタグは、これまでに何度か登場していますがpタグというタグを使用します。
pタグのpは「Paragraph」の略です。

では、さっそくpタグを使用して段落を実装してみましょう！
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <p>これは段落1です</p>
    <p>これは段落2です</p>
    <p>これは段落3です</p>
    <p>これは段落4です</p>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_7.png
このように、pタグを使用することで段落のある文章を簡単に作成することができます。
段落のない長い文章はとても読みづらくなるので、適切な箇所でpタグを使用して段落を分けて表示するようにしましょう。

★検索ワード
・HTML pタグ 使い方

改行の実装

フォルダ名：「break」

続いて、文章を簡単に「改行」する方法について説明していきます。
先ほどのpタグやh1タグの中で、膨大な文章が並んでいると読みにくいことがあります。

そんな時のために、HTMLではbrタグを使用することで任意のタイミングで改行することができます。
なお、metaタグと同じようにbrタグも閉じタグは必要ありません。

さっそく使ってみましょう！
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <h1>これは改行前見出し<br>これは改行後見出し</h1>
    <p>これは改行前テキスト<br>これは改行後テキスト</p>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_8.png
brタグを記述した後の文章が改行されていることがわかると思います！
文章の途中などでどうしても改行したい場合はbrタグを使用してみましょう！

★検索ワード
・HTML brタグ 使い方

画像の実装

フォルダ名：「image」

続いて「画像」を表示させる方法について説明していきます。
HTMLで画像を表示させる場合はimgタグを使用します。

imgタグは、<img src=”画像” alt="テキスト">のように記述します。
src属性の属性値である画像部分に画像のファイルパスやURLを指定することで、指定した画像を表示することができます。

また、alt属性を設定すると、何か不具合があってブラウザに画像が表示されなかった場合に、画像の代わりに指定したテキストを表示してくれるようになります。
なお、imgタグにも終了タグは必要ありません。

それでは、実際にWEBページに表示する画像を用意してみましょう。
まずは好きな画像を今回のレクチャーで作成したimageフォルダ内に保存してください。
※画像検索等でダウンロードした画像でも大丈夫です。

  • おすすめ画像サイト：unsplash

今回のレクチャーで作成したimageフォルダの中に画像が保存できたら、準備完了です。
index.htmlを下記の通り編集して、画像を表示させてみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <img src="nothing.png" alt="この画像は表示されません。">
    <br>
    <!-- 下記のsrc=""の中身は、皆さんが保存した画像の名前を入れましょう -->
    <!-- 下記のalt=""の中身は、皆さんが保存した画像に関連したテキストを入れましょう -->
    <img src="ichigo.png" alt="いちご">
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_9.png

最初のimg要素で指定された画像はimageフォルダ内に存在しないため、alt属性で指定した属性値である「この画像は表示されていません。」というテキストが出力されます。

2つ目のimg要素ではファイルパスが合っていれば皆さんの保存した画像が表示されるはずです。
また、今回教材のimageフォルダの中身は用意した画像(ichigo.png)とindex.htmlが入っています。
html_10.png
そのため、src属性の属性値にはichigo.pngを入力し、alt属性の属性値にはいちごの画像ということで、わかりやすくいちごと入力しています。
もし、画像ファイルパスが間違っていたりして画像が表示されない場合は、「いちご」という文字が画面に表示されることになります。

また、どうしても画像が表示されない場合は、記述ミスや画像ファイルパスが間違っていないかの確認をしてください！

ファイルパスとフォルダパスについて

今回のレクチャーで「ファイルパス」という新しい言葉が出てきたので説明します。

ファイルパスは「ファイルの置いてある場所」のことを指します。
※「フォルダの置いてある場所」はフォルダパスと言います。

言葉では難しいと思うので、下記のようなfile_pathというフォルダがあった場合の例を見てみましょう。
html_11.png

index.htmlからichigo.pngを指定する場合

※index.htmlはfile_pathフォルダの下のhtmlフォルダの中にあります。
※ichigo.pngはfile_pathフォルダの下のimageフォルダの中にあります。

以上の前提があった場合、index.htmlからichigo.pngを指定する場合はsrc="../image/ichigo.png"と記述します。

ここで../という謎の暗号が出てきましたが、これは一つ上の階層という意味を持っています。
index.htmlから見て一つ上の階層ということは、cssフォルダ、htmlフォルダ、imageフォルダのことを指しています。

そのため、ichigo.pngが保存されているimageを../の次に記述し、最後に画像の名前であるichigo.pngを記述します。
これで上記のようなファイル構成をしていた場合は、いちごの画像を表示することができます。

test.htmlからcss_childの下のstyle.cssを指定する場合

※test.htmlはfile_pathフォルダの下のhtmlフォルダの中にあります。
※style.cssはfile_pathフォルダの下のcssフォルダのさらに下のcss_childフォルダの中にあります。

まだCSSの学習はしていませんが、ファイルパスを学習するためにHTMLファイルからCSSファイルを適用させるパスを考えていきます。
通常HTMLからCSSを適用するためには、どのCSSファイルを適用するのかの指定をHTML上で行います。

その時に使うのが、linkタグというものです。
そのlinkタグのhref属性に「CSSファイルのパス」を記述することで適用させることができます。

例えばlinkタグを使用してCSSの適用をさせるためには、以下のようなコードをhead要素内に記述します。

<link rel="stylesheet" href="../css/css_child/style.css">

../は一つ上の階層という意味なので、test.htmlから見て一つ上の階層ということは、cssフォルダ、htmlフォルダ、imageフォルダのことを指しています。

css_childフォルダが保存されているのは、cssフォルダなので、../cssとします。
次に、css_childを記述して、最後に適用したいCSSの名前style.cssを入力すると無事にHTMLへCSSが適用されます。

なお、プログラミングの世界ではフォルダのことをディレクトリと呼んだりするので、この機会にぜひ覚えておきましょう。

拡張子

今回のレクチャーで初めて画像ファイルを扱ったので、拡張子についても説明していきます。

先ほど使用した画像の名前をよく見ると、最後に.pngや.jpegなどの文字が付いているのに気がついた方もいるかと思います。
それらをまとめて拡張子と呼んでいます。

拡張子を簡単に説明すると、パソコンやスマホで扱うファイルの種類を識別するための文字列のことです。
ファイルの最後にこれらの拡張子を付けることで、そのファイルがどのようなファイルなのかを指定することができます。

拡張子は他にもたくさん存在しており、テキストファイルの場合は.txt、音楽ファイルでよく使われている拡張子には.mp3などがあります。

そして、今までHTMLファイルをたくさん作成していただいていますが、index.htmlの.htmlももちろんHTMLファイルを意味する拡張子です。

★検索ワード
・HTML imgタグ 使い方
・ファイルパスとは
・拡張子とは

インデントとは

フォルダ名：「indent」

続いて、コードの可読性を上げるための「インデント」について説明します。

そもそもインデントとは、文章の行頭に空白を挿入して先頭の文字を右に押しやることです。
インデントは、HTMLを記述する上で非常に重要な概念なので必ず意識するようにしましょう。

それでは、さっそく下記のHTMLのmetaタグやtitleタグ、pタグを見てください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <p>これはインデント</p>
</body>

</html>

それぞれの開始タグの前にスペースが4つありますよね？
この空白こそがインデントです。

p要素を例に上げると、p要素はbody要素の中にあります。
この関係を親子の関係に例えて、body要素のことを親要素、p要素のことをbody要素の子要素と呼びます。

HTMLにおけるインデントは、この親子構造をわかりやすく可視化したものとイメージしてください。
ある要素がどの要素の親要素で、どの要素の子要素なのかがわかると、コードがとても見やすくなります。

「わかりやすいコードを書く」ということはとても大切なことです。
なぜなら、通常WEB開発の現場ではエンジニアが複数人で開発をする場合がほとんどだからです。

つまり、皆さんが書いたコードに別の人が追記したり、修正したりすることがよく発生するということです。
なので、他の人が見てもわかりやすいコードを書くことは、結果として作業の効率化に繋がります。

わかりやすコードを書くための一歩がインデントをしっかりするということなので、今のうちからしっかりと意識していきましょう。

現場や言語などの違いによって「半角スペースが2つ」だったり、「半角スペース4つ」だったりと多少ルールが異なりますが、HTML教材では半角スペース4つとします。

★検索ワード
・HTML インデントとは

リストの実装

フォルダ名：「list」

続いて「リスト」を実装する方法について説明していきます。
リストと言われてもイメージしにくいかと思いますので、下記の例を挙げておきます。

  1. リスト1
  2. リスト2
  3. リスト3
  • リスト1
  • リスト2
  • リスト3

このように箇条書きになっている箇所を「リスト」と呼んでいます。
それでは、さっそくHTMLでリストを実装していくので、index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <ul>
        <li>順序なしリスト1</li>
        <li>順序なしリスト2</li>
        <li>順序なしリスト3</li>
    </ul>

    <ol>
        <li>順序ありリスト1</li>
        <li>順序ありリスト2</li>
        <li>順序ありリスト3</li>
    </ol>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_12.png
リストには、大きく分けて2つのパターンがあり、基本的にulタグとliタグのセットとolタグとliタグのセットで使います。

使用タグ 内容
ulタグとliタグの場合 黒丸の箇条書き
olタグとliタグの場合 番号付きの箇条書き

上記のようにイメージしておけば大丈夫です。

ul要素とol要素内に記述するli要素は何個あっても構いません。
ちなみに、ulは「Unordered List」の略であり、olは「Ordered List」の略で、liは「List」の略です。

番号なしの箇条書きならulタグ、番号付きの箇条書きならolタグとなるので、とても覚えやすいですね！

また、インデントもしっかりと意識しておきましょう！
li要素はul要素かol要素の子要素となるので、さらに4つのスペースのインデントが必要です！
こちらもしっかりと抑えておきましょう！

★検索ワード
・HTML list 作り方
・HTML list ul 使い方
・HTML list ol 使い方

リンクの実装

フォルダ名：「link」

続いて「リンク」を実装する方法について説明していきます。
そもそもリンクを作成する前に、皆さんはリンクが何かを知っていますか？

リンクを簡単に説明すると、別のページと繋がっているポイントのことです。
下記のようなものを見たことはありませんか？
詳細はこちら

上の詳細はこちらという文字をクリックすると、Googleの検索ページへ飛んだと思います。
このように、あるページからあるページにジャンプすることができる要素こそが「リンク」です。

それでは、リンクが何かわかったところで、さっそく実装していきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <a href="https://twitter.com/">Twitterのリンクです</a>
    <br>
    <a href="https://facebook.com/">Facebookのリンクです</a>
    <br>
    <a href="https://instagram.com/">instagramのリンクです</a>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_13.png
aタグでは、href属性の属性値に「別ページのURL」や「メールアドレス」などを指定することで、指定したページへのリンクを作成することができます。

書き方は下記の通りです。
<a href=”リンク先のURL”>表示したいリンク名</a>

例えば、Twitterに飛ばしたいときは、TwitterのURLであるhttps://twitter.com/をhref属性の属性値に指定してあげます。
そうすると、リンクをクリックするだけでTwitterのページに飛ぶことができるようになります。

これがリンクというものです。
皆さんもネットサーフィンをしている際にたくさんリンクをクリックしていたのではないでしょうか？

このように、いつも使っているものがどのように作られているのかがわかるとHTMLを学ぶのがとても楽しく感じてくると思います。

ぜひこれからも学ぶことを楽しみながら読み進めてくださいね！

★検索ワード
・HTML リンク 作り方
・HTML aタグ 使い方

表の実装

フォルダ名：「table」

続いて「表」を実装する方法について説明していきます。
そもそも表とは下記のようなものを言います。

見出し 見出し 見出し
データ データ データ
データ データ データ
データ データ データ

では、さっそく上記のような「表」をHTMLで実装してみましょう！
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>見出し</th>
            <th>見出し</th>
            <th>見出し</th>
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
    </table>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_14.png
先ほどの例と少し見た目が違うものの、縦横3✕3の表が出来上がりました。
実際にHTMLのコードの中身を見ていただくと分かる通り、HTMLで表を作成する場合は複数のタグを使用して構成します。

よく使うタグは下記の通りです。

タグ名 役割
tableタグ テーブルを定義
trタグ 「table row」の略。テーブルの行を定義する。
thタグ 「table header」の略。テーブルの見出しを定義する。
tdタグ 「table data」の略。テーブルのデータを定義する。

また、HTMLだけで作成した表は先ほど例で出した表と見た目が少し違います。
というのも、表の見た目は本来CSSで調整するべきものだからです。
ですが、今回はHTMLの説明なので、CSSを使わずに表の枠線を付ける方法をお伝えします。

それが、tableタグに指定してあるborder属性です。
このようにborder="1"をtableタグに設定するだけで簡単に枠線を付けることができます。

もちろんborder属性を指定しない場合は下記のようになります。
スクリーンショット 2023-01-13 19.20.08.png
枠がないだけでとても見にくいですね。
なので、HTMLの学習で表を作る際にはborder属性を忘れずに指定してください！

セルを結合

次は表で「セルの結合」をする方法について学習していきます。
セルの結合がなんだかわかりにくいと思いますので、まずはコードを書いてみましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <table border="1">
        <tr>
            <td colspan="3">横方向にセルの結合</td>
            <!-- <td>結合されている</td> -->
            <!-- <td>結合されている</td> -->
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
    </table>

    <br>

    <table border="1">
        <tr>
            <td rowspan="3">縦方向にセルの結合</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <!-- <td>結合されている</td> -->
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <!-- <td>結合されている</td> -->
            <td>データ</td>
            <td>データ</td>
        </tr>
    </table>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_15.png
まず、1つ目の表を見ていただきたいのですが、1行目は「横方向にセルの結合」というセルのみがあり、その下の2行は3つのセルで1行になっています。

つまり、1行目のセルは3つのセルを横方向に結合して1つのセルになっているということです。
これが横方向のセルの結合です。

次に、2つ目の表をみていただきたいのですが、1列目は「縦方向にセルの結合」というセルのみがあり、その右側の2列は3つのセルで1列になっています。

つまり、1列目のセルは3つのセルを縦方向に結合して1つのセルになっているということです。
これが縦方向のセルの結合です。

これでセルの結合がどのようなものかはなんとなくわかったと思います。

実際に先ほど実装していただいたセルの結合を行ったコードを見てみてください。
セルの結合はthタグやtdタグにcolspan属性やrowspan属性を付けることで実装することができます。

colspan属性やrowspan属性についてわかりやすく表にまとめるとこんな感じになります。

属性 役割
colspan 横方向にセルを結合する。
rowspan 縦方向にセルを結合する。

注意点は、結合したいセルの数を属性値に記述することです。
各tr要素内のセルの個数がずれていると、うまく表示されないのでセルの個数は常に気を使いましょう。

テーブル要素の中にテーブル要素を入れる

実はtable要素の中に、もう1つ別のtable要素を入れることもできます。
近年ではあまり見かけることはありませんが、昔のWEBサイトではtable要素をいくつも組み合わせてWEBページの骨組みを作っていました。

2023年1月現在、俳優の「阿部寛」さんのホームページではtable要素でレイアウトを作成していますね。
http://abehiroshi.la.coocan.jp/

それでは、さっそくtable要素の中にもう一つのtable要素を入れてみましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="1">
                    <tr>
                        <td>ddd</td>
                        <td>eee</td>
                    </tr>
                    <tr>
                        <td colspan="2">fff</td>
                    </tr>
                </table>
            </td>
            <td>ggg</td>
        </tr>
        <tr>
            <td colspan="3">hhh</td>
        </tr>
    </table>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
スクリーンショット 2022-04-03 18.25.44.png
注意すべき点は、1つ目のtable要素のtd要素の中に2つ目の新しいtable要素を記述するということです。
というのも、2つ目のテーブル要素は1つのセルとして認識させなければならないからです。

今回の例では、1行が3つのセルで構成されています。
そのため、2つ目のテーブル要素が入っているtd要素を<td colspan="2">と記述し、横方向でセルの結合をすることで「ggg」のセルと合わせると3つのセルがあることとなります。

tr要素の直下に新しいtable要素を記述してしまうと、うまく表示されないので注意してください。

★検索ワード
・HTML 表 作り方
・HTML table 使い方

フォームの実装

フォルダ名：「form」

続いて「フォーム」を実装する方法について説明していきます。

まず、フォームとは何かを知っておきましょう。
フォームとは、ユーザーが入力した情報をサーバーに送信するための部品のことです。

いわゆる「ログイン画面」などでユーザーIDやパスワードを入力するあれです。
HTMLではサーバーに送るための処理を実装することはできないので、フォームの設置や構造のみを実装していきます。

フォームに入力された値をサーバーへ送る処理については、後に学ぶサーバーサイド言語の学習で行っていきますので、楽しみにしておいてください！

それでは、HTMLでフォームの見た目を実装するために使用するタグを紹介します。

HTMLでフォームを実装するにはformタグというタグを使用します。
また、form要素の中でlabelタグやinputタグ、textareaタグ、selectタグなどを適切に使用することで多種多様なフォームを実装することができます。

言葉で説明しても想像しづらいと思うので、まずはformタグの使い方から見ていきましょう！

formタグ

formタグはフォームを作る際に、必ず使用するタグです。
これからフォームを作ることをブラウザに宣言するためのようなタグになります。

また、属性を使用することで、「どこに値を渡すか」や「どのようにデータを送信するか」を決めることができます。

例として、下記のコードを見てみてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="create.php" method="POST">
        <!-- フォームの部品を配置する -->
    </form>
</body>

</html>

現時点では、フォーム内容をサーバーに送るようなことはしないので、下記の説明は参考程度に聞いてください。

まず、フォームに入力された値を送信するファイルを指定する場合には、action属性を使用します。
今回の場合は、例としてcreate.phpというPHPファイルにフォームの内容を送ることとしているので、action="create.php"と記述しています。

次に、フォームをどのように送信するのかのルールをmethod属性を使用して指定します。
今回の場合は、例としてフォームを送信する際によく使うPOSTを指定して送信することにしているので、method="POST"と記述しています。

action属性とmethod属性についてはバックエンド言語の教材で詳しく解説するので、まだ理解しなくてOKです。
ここまで記述できれば、あとはこのform要素にlabel要素やinput要素などのフォームを構成する要素を追加していくだけです。

labelタグ

labelタグは、それぞれのフォーム部品に対して名前（ラベル）を実装することができます。
言葉だけではわかりにくいと思いますので、実際にコードで確認してみましょう。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="" method="">
        <label for="name">名前</label>
        <br>
        <label for="email">メールアドレス</label>
    </form>
</body>

</html>

今回は、名前とメールアドレスについてのフォームを実装することと仮定し、それぞれのラベルを作成しました。
※HTMLの学習なので、form要素のaction属性とmethod属性は特に何も指定しないでOKです。
for="name"とfor="email"では、このあとに設置するフォームの入力部品を紐付けするために記述しています。

このようにフォームにはフォーム向けのタグが用意されているので積極的に活用していきましょう。

inputタグ

inputタグは、実際に入力するための入力フィールドを実装することができます。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="" method="">
        <label for="name">名前</label>
        <!-- ここから追加 -->
        <input type="text" id="name">
        <!-- ここまで追加 -->
        <br>
        <label for="email">メールアドレス</label>
        <!-- ここから追加 -->
        <input type="mail" id="email">
        <br>
        <input type="submit" value="送信">
        <!-- ここまで追加 -->
    </form>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_16.png
ここでは「名前」と「メールアドレス」、「送信」の部分に、inputタグを追加しました。

inputタグではtype="text"などtype属性で指定している部分があります。
このtype属性では、入力される値が単純な「テキストなのか」、「パスワードなのか」、または「ファイルなのか」などを決めることができます。

名前にはtype="text"とメールアドレスにはtype="mail"、送信ボタンにはtype="submit"を設定しました。
送信ボタンの「送信」というテキストは、value属性の中に記述します。
ここをsubmitなどと記述すると、submitというボタンが実装できます。

ちなみにinputタグのid属性で決めている属性値が、labelのfor属性と紐付いています。
inputとlabelはid,forと覚えてしまいましょう。

紐付けることで何がいいのかというと、試しにブラウザで表示されている「名前」というテキストをクリックして下さい。
そうすると、名前を入力する入力欄にフォーカスがあたり、ユーザーが文字を入力できるようになります。
これはユーザーにとても優しい機能なので、ぜひフォームを作る際はlabelタグを多用していきましょう。
※for属性は必須ではないので、適宜つけるようにしましょう。

textareaタグ

textareaタグでは、inputタグと似た入力欄を実装することができます。
ただし、このtextareaタグでは複数行のテキストも入力することができるようになっています。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="" method="">
        <label for="name">名前</label>
        <input type="text" id="name">
        <br>
        <label for="email">メールアドレス</label>
        <input type="mail" id="email">
        <br>
        <!-- ここから追加 -->
        <label for="content">内容</label>
        <textarea id="content"></textarea>
        <br>
        <!-- ここまで追加 -->
        <input type="submit" value="送信">
    </form>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_17.png
ここでは「内容」の部分に、labelタグとtextareaタグを追加しました。
textareaタグの場合は、type属性はありませんが、label要素と結びつけるためにid属性は付けておきましょう。

もちろんlabel要素のfor属性とtextarea要素のid属性の属性値は同じものを設定しましょう。
今回の場合はcontentです。

selectタグ

selectタグは、「プルダウンメニュー」を実装することができます。
メニューの選択肢は、select要素内に配置するoption要素で指定します。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="" method="">
        <label for="name">名前</label>
        <input type="text" id="name">
        <br>
        <label for="email">メールアドレス</label>
        <input type="mail" id="email">
        <br>
        <label for="content">内容</label>
        <textarea id="content"></textarea>
        <br>
        <!-- ここから追加 -->
        <label for="pref">都道府県</label>
        <select id="pref">
            <option value="tokyo">東京</option>
            <option value="saitama">埼玉</option>
            <option value="kanagawa">神奈川</option>
        </select>
        <br>
        <!-- ここまで追加 -->
        <input type="submit" value="送信">
    </form>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_18.png
試しに、東京をクリックすると、プルダウンメニューが出てくることを確認してみてください。
いつもの通りselect要素とlabel要素をid属性とfor属性で結びつけています。
value属性には、PHPなどのバックエンドに送信する値を指定しています。
こちらはPHP教材で詳しく説明しますが、このような書き方をするということは覚えておくといいでしょう！

これでひとまず、フォームの作り方は終わりです。

★検索ワード
・HTML form 作り方
・HTML label 使い方
・HTML input 使い方
・HTML textarea 使い方
・HTML select 使い方

divタグとspanタグについて

フォルダ名：「div_span」

今回のレクチャーでは、簡単そうで意外と初学者の皆さんからは難しいと聞く、divタグとspanタグについて学んできたいと思います。

divタグとspanタグとは

divタグはとても特殊なタグです。
pタグは段落を実装するタグで、h1タグやh2タグは見出しを実装するタグなど、今まで学習してきたタグにはそのタグ自体に意味がありました。
しかし、このdivタグはdivタグ単体では意味を持たないタグなのです。

それでは、divタグには何の意味があるのでしょうか？
それは、囲った部分をブロック要素としてまとめて扱うことができるようになるタグです。
簡単に言うと、関係性のある要素をdivタグで囲むことで、グルーピングすることができるということです。

divタグと同じく、単体では意味を持たないタグの1つにspanタグというものもあります。
なぜ2つも同じようなタグがあるのかを簡単に見ていきましょう。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <div>これはdivタグ1</div>
    <div>これはdivタグ2</div>

    <span>これはspan1</span>
    <span>これはspan2</span>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_19.png
反映した内容をブラウザでよく見ると、divタグで囲ったところは改行されているのに対して、spanタグで囲ったところは改行されていません。
ここで必要になる知識が、「ブロック要素」と「インライン要素」の違いです。

ブロック要素とインライン要素

ブロック要素

ブロック要素は、レイアウトを1つのまとまりとして扱うことができる要素です。
ブラウザに表示した通り、divタグを使った部分は1つの箱として扱われるイメージを持つのがいいです。

ブロック要素では、後のCSSで学習するmargin、paddingなどのレイアウトやwidth、heightなどのサイズも自由に決めることができます。
ブロック要素は、先ほどブラウザに表示した通り、特に何も設定していないと基本的には縦方向に並んでいきます。

インライン要素

インライン要素は行の一部（インライン）として扱われる要素です。
ブラウザに表示した通り、spanタグを使用するとHTML上では改行してあるのにも関わらず、1行で表示されてしまいます。

このspanタグではCSSで学習するwidth、heightなどのサイズの調整ができないという点に気をつけましょう。
spanタグはブロック要素とは違って、基本的には横方向に並んでいきます。

ブロック要素とインライン要素は、CSSを学ぶまではあまり恩恵がわからないかもしれません。
しかし、とても良く使う概念なので、CSSを学ぶ前になんとなくでも頭の片隅に入れておきましょう！

divタグの使い方

先ほどのサンプルでなんとなくイメージは掴めたかと思いますが、実際に使われている方法に近い形のコードを見ていきます。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
</head>

<body>
    <form action="" method="">
        <div>
            <label for="name">名前</label>
            <input type="text" id="name">
        </div>
        <div>
            <label for="email">メールアドレス</label>
            <input type="mail" id="email">
        </div>
        <div>
            <label for="password">パスワード</label>
            <input type="password" id="password">
        </div>
    </form>
</body>

</html>

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！
html_20.png
フォームの実装というレクチャーではform要素を使用して、簡単なフォームを実装しました。
そのフォームの実装というレクチャーでは、brタグを使用してフォームを改行していたのに対して、今回はdivタグを使っています。

ちなみに、今回パスワード入力欄のinputタグにはtype="password"というものを記述しています。
このようにtype属性にpasswordを指定することで、パスワード入力欄へパスワードを入力した時に●●●●のような形で表示されることも覚えておきましょう。

★検索ワード
・HTML divタグ 使い方
・HTML spanタグ 使い方
・HTML ブロック要素 インライン要素

おめでとうございます！

HTMLの教材を最後までお読みいただき、ありがとうございました。

どうでしょうか？
「HTMLでさえこんなに難しいのか。。。」と思った方がほとんどではないでしょうか？

安心してください。
講師をしている私たちでさえ、最初は「HTMLって難しいな」と感じていました。

ですが、少しずつでもいいので毎日手を動かしていけば大丈夫です。
最初は辛いこともあるかと思いますが、HTMLの教材を最後まで読み終えた皆さんであれば、最後まで完遂できます。

次はWEBページのデザイン部分を担当しているCSSという言語について学んでいきます。
HTMLの知識も活用していくので、CSSの教材を読むことでHTMLの知識もさらに付いてくるはずです。

皆さんなら大丈夫です。
次のCSSの教材にも頑張って取り組んでください！