HTMLの基礎を学ぼう

Webページは、「HTML」と「CSS」という２つの言語を組み合わせて作られています。

HTMLは、Webページといった文書の構造を作ることが役割で、CSSは、HTMLで作成された文書の見た目を調節することが役割です。

HTMLとCSSを学ぶことで、Webサイトの基本的な仕組みを理解できるようになります。

また、Rubyなどのプログラミング言語を学んでWebアプリケーションを開発したい人もHTMLとCSSの知識は必要になるので、基礎を押さえておきましょう。

HTMLの概要を理解しよう

リンクをコピーしました

HTMLは簡単に説明すると、Webページを作成するための言語です。
手を動かしながら、HTMLがどのような言語なのかを確認していきましょう。

ページのソースを確認しよう

リンクをコピーしました

まずは、Google Chromeで「おすすめのテキストエディタ11選」のページを開きましょう。

ページを開いたら画面上（画像がない箇所）で右クリックして、以下のようにメニューから「ページのソースを表示」をクリックしましょう。

クリックすると、以下の画像のように別タブでページが開かれます。Chromeの画面上には、記号や英単語、日本語が組み合わさったテキストがたくさん表示されていますね。

これは「おすすめのテキストエディタ11選」のページを構成するHTMLです。

上記のようなWebページなどの「元となる情報」は、ソースコードやソースと呼ばれます。

試しに、以下の箇所のHTMLを見てみましょう。

まずは、以下の動画のようにテキストエディタは、プログラミングを行う上で必須のツールです。をコピーしましょう。

続いて、以下の動画ようにソースコードが表示される画面で「検索バー」を開き、先ほどコピーしたテキストを貼り付けて検索しましょう。

よく見ると、テキストはpという記号で囲われていますね。
こちらのpは、「Paragraph」の略で段落に付ける記号になります。

１つ下のテキストも、以下の画像のようにpで囲われていますね。

よく見ると、markやstrongという記号で囲われる箇所があります。markは、目立たせたいテキストに付ける記号で、strongは強調したい重要なテキストに付ける記号になります。

このようにHTMLでは、文章の意味を考えて適切な記号で囲うことで、Webページを作成します。記号は、タグと呼ばれます。

HyperText Markup Language

リンクをコピーしました

HTMLとは「HyperText Markup Language」の略で、Webページを作成する為に開発されたマークアップ言語です。

• HyperText - 画像やリンクを埋め込める高機能なテキストのこと
• Markup - 文書の各部分をタグで囲い、意味をつけること
• Language - 決まりごと（ルール）

HyperText（ハイパーテキスト）

リンクをコピーしました

HyperTextとは、ハイパーリンク（クリックすると別のページに移動するリンク）を挿入することができるテキストのことです。

他にも、画像や動画などのデータをリンクとして埋め込むことができます。

HyperTextの仕組みを使うことで、関連するWebページ同士を閲覧できるように結びつけ、情報を整理することができます。

Markup（マークアップ）

リンクをコピーしました

Markup（マークアップ）とは、コンピュータが文書の構造を認識できるように、文書の各部分をタグと呼ばれる記号で囲み、意味をつけることです。

先ほどのソースコードでも、pという記号で囲われる部分がありましたね。pは段落に付ける記号なので、「この部分は段落」という意味づけを行なっているのです。

コンピュータは人間のように「見出し」や「段落」をデザインやレイアウトから認識して判断することができないので、このようなマークアップが必要になります。

文書の各部分をタグで囲み、意味づけを行うことを「マークアップする」と呼びます。

マークアップすることで、具体的にはWebブラウザがWebページ内の各部分の意味を理解して表示できるようになります。

HTMLを書いてみよう

リンクをコピーしました

ここから先は「Visual Studio Code」を使って、実際にHTMLを書きます。

前回学習した「フォルダ作成」を参考に、デスクトップ上に作業用フォルダのhtml-basicを作成しましょう。フォルダ内にはindex.htmlを作成しておきましょう。

Visual Studio Code上で、以下の画面を表示できたら準備完了です。

HTMLタグの仕組み

リンクをコピーしました

<と>で囲まれた文字列の並びがタグです。タグの名前は、要素名と呼びます。

HTMLでは、タグでマークアップするときに、表現したい内容を<要素名>と</要素名>で囲みます。

開始タグ・終了タグ・要素

リンクをコピーしました

<要素名>を開始タグ、</要素名>を終了タグと呼びます。

多くの場合、開始タグと終了タグはペアで使われます。終了タグには、要素名の前に/が入るので注意してください。

開始タグと終了タグ、表現したい内容を含めた全体のことを「要素」と呼びます。

用語がたくさん出てきたので、以下のサンプルコードで整理しておきましょう。

1
<p>HTMLとは「HyperText Markup Language」の略です。</p>

適切なタグでマークアップしてみよう

リンクをコピーしました

こちらのテキストをHTMLのタグで囲っていきます。

1
2
HTMLの概要を学ぼう
HTMLとは「HyperText Markup Language」の略です。

まずは、上記のテキストをWebブラウザで表示させてみましょう。

テキストをindex.htmlに書き、command + Sでファイルを保存しましょう。
そして、動画のようにChromeにドラッグ&ドロップして画面に表示させます。

テキストには、タグで囲み意味付け（マークアップ）していないので、人間側が「ここは見出し」「ここは段落」と考えていても、Webブラウザは認識することができません。

そのため、以下のように解釈された画面を表示します。

Webブラウザが見出しと段落を解釈できるように、テキストをタグで囲み、意味を付けていきましょう。

マークアップする際には、テキストの意味を考えて、適切なタグを選びます。
以下のHTMLの概要を学ぼうでは「大見出し」の意味を付けて、HTMLとは~は「段落」の意味を付けます。

1
2
HTMLの概要を学ぼう <!-- 大見出しの意味を付ける -->
HTMLとは「HyperText Markup Language」の略です。<!-- 段落の意味を付ける -->

テキストの意味から、h1タグとpタグを選びます。h1は「1番大きな見出し」という意味を持ちます。pは「段落」でしたね。

それでは、以下のようにテキストをタグで囲み、意味を付けてみましょう。
※タグは、全て半角文字で書きましょう。

1
2
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>

index.htmlを再度保存し、動画のように先ほどのページを再読み込みしましょう。

ページを再読み込みすると、Webブラウザによって「h1要素の見出し」と「p要素の段落」が解釈され、以下のように表示されます。

マークアップする前と比較しても、見出しの文字が大きくなったり、段落をあけて表示されていますね。

このようにHTMLでは、テキストの意味を考えて適切なタグで囲むことによって、文書の構造を作ることができます。

属性

リンクをコピーしました

要素には、属性を指定することができます。
属性とは、要素の動作を調整するために開始タグ内で使用される文字列のことです。

属性を指定するには、開始タグを<要素名 属性名="属性値">という形式で書きます。

例えば、ハイパーリンクを意味するa要素では、以下のようにhref属性を使って、リンク先のURLを指定します。aは「Anchor」の略です。

1
<a href="https://pikawaka.com/tips/texteditor">おすすめのテキストエディタ11選</a>

要素に属性を指定してみよう

リンクをコピーしました

それではa要素にhref属性を使って、リンク先のURLを指定してみましょう。

リンク先には、HTMLについて調べるときにおすすめのリファレンスサイト「HTMLクイックリファレンス」を設定します。URLはhttp://www.htmq.comです。

以下の内容をindex.htmlに書いて、ハイパーリンクを設定しましょう。

1
2
3
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>

動画のようにファイルを保存し、ページの再読み込み後にリンクをクリックすると「HTMLクイックリファレンス」に移動することができます。

属性は、複数指定することができます。

例えばhref属性に加えて、リンク先のページを開くウィンドウを指定できるtarget属性を加えることもできます。属性と属性の間も半角スペースで区切ります。

以下の内容をindex.htmlに書いて、target属性を指定しましょう。

1
2
3
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com" target="_blank">HTMLクイックリファレンス</a>

target="_blank"は、新規ウインドウでリンクを開くことを示します。

動画のようにファイルを保存し、ページの再読み込み後にリンクをクリックすると、新規ウインドウでページが開かれていますね。

このように要素に属性を指定することで、特定の機能を追加することができます。

空要素

リンクをコピーしました

HTMLではタグでマークアップするときに、表現したい内容を「開始タグ」と「終了タグ」で囲むと説明してきましたが、空要素は例外になります。

空要素は、内容を持たない要素のことで「開始タグ」だけで利用することができます。

imgタグで画像を表示させよう

リンクをコピーしました

それでは、imgタグを使って見出しの前に画像を表示させてみましょう。

画像を表示するには、img要素にsrc属性を指定する必要があります。
src属性値には、画像ファイルの場所（パス）を書きます。

1
<img src="画像ファイルの場所">

まずは、サンプル画像をダウンロードするために、以下のリンクをクリックしましょう。

logo.png

次にhtml-basicフォルダ内にimgという画像ファイルを管理するフォルダを作成しましょう。

以下の動画のようにimgフォルダを作成します。

続いて、先ほどダウンロードしたlogo.pngを作成したimgフォルダに入れます。

ダウンロードフォルダにあるlogo.pngをドラッグ&ドロップして、以下の動画のようにimgフォルダに入れましょう。

そして、index.htmlの１行目にsrc属性値が空のimgを追加しましょう。

1
2
3
4
<img src="">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com" target="_blank">HTMLクイックリファレンス</a>

src属性値には、logo.pngがある場所を設定する必要があります。

以下の動画のようにlogo.png上で右クリックし、メニューに表示される「相対パスをコピー」をクリックして、src属性値に貼り付けてファイルを保存しましょう。

フォルダの区切りは/になります。logo.pngはimgフォルダ内にあるので、src属性値にはimg/logo.pngを指定しました。

1
<img src="img/logo.png">

最後にChromeで表示するページを再読み込みして、ロゴを表示させましょう。

見出しの前にロゴ画像を表示できたら、完了です。

特別な意味を持たないタグ

リンクをコピーしました

これまで「pタグで囲った部分は『段落』、h1タグで囲った部分は『大見出し』を示す」というような意味を持つタグについて説明してきましたが、HTMLのタグには、特別な意味を持たないタグもあります。

意味を持たないタグには、主にdivタグとspanタグがあります。

divタグとは

リンクをコピーしました

divは「DIVison（区分）」の略で、タグ自体に特別な意味を持ちませんが、他の要素をまとめてグループ化することができます。

要素をグループ化するには、以下のようにdivタグで囲います。

1
2
3
4
<p>いただきます</p>
<p>ごちそうさま</p>
<p>おはよう</p>
<p>おやすみなさい</p>

1
2
3
4
5
6
7
8
9
<div>
  <p>いただきます</p>
  <p>ごちそうさま</p>
</div>

<div>
  <p>おはよう</p>
  <p>おやすみなさい</p>
</div>

この時点ではdivタグで囲っても、ブラウザの表示結果は特に変わりません。

しかし、div要素にclass属性を指定することで、グループ化した部分のデザインを変えることができます。

例えば、最初のdiv要素にclass="box"を指定し、CSSで.box {background: green;}とすることで、最初のdiv要素だけ背景色を緑にすることができます。

See the Pen Untitled by miyajima yuya (@pikawaka) on CodePen.

※CSSでデザインを適用する方法については、次の「CSS基礎」で詳しく説明します。

このようにdivは、タグ自体には意味を持ちませんが、他の要素をグループ化することで、その部分のデザインを変えることができます。

spanタグとは

リンクをコピーしました

spanタグはdivタグ同様に単体では特別な意味を持ちませんが、要素の一部をグループ化することができます。

要素の一部をグループ化するには、以下のようにspanタグで囲います。

1
<p>WWWは、World Wide Webの略です。</p>

1
<p>WWWは、<span>World Wide Web</span>の略です。</p>

この時点では、spanタグで囲っても、ブラウザの表示結果は特に変わりません。

しかし、先ほどのdiv要素のようにspan要素にもclass属性を指定することで、グループ化した部分のデザインを変えることができます。

span要素の場合は、ある要素の一部だけデザインを変えることができます。

例えば、span要素にclass="text-red"を指定し、CSSで.text-red {color: red;}とすることで、p要素の一部（span要素）の文字色を赤に変えられます。

See the Pen Untitled by miyajima yuya (@pikawaka) on CodePen.

このようにspanは、単体では意味を持ちませんが、要素の一部をグループ化することで、その部分のデザインを変えることができます。

divとspanの違い

リンクをコピーしました

divとspanは、どちらも単体では意味を持たないタグであり、タグで囲うことでグループ化することができますが、レイアウトの初期値が違います。

例えば、ほとんどのブラウザではdiv要素の前後に改行が挿入されますが、span要素の前後には改行が挿入されません。

この辺のレイアウトの違いについては、次のCSSで詳しく学びます。

現段階ではdivとspanはレイアウトの初期値の違いがあり、「他の要素をまとめてグループ化する場合はdiv、要素の一部をグループ化したい場合はspanを使う」とだけ頭に入れておきましょう。

その他のタグを学ぼう

リンクをコピーしました

「その他のタグを学ぼう」では、コードペンを使ってタグの使い方を学んでいきます。

コードペンとは、Webの見た目を即座に確認するためのオンラインコードエディターです。HTMLやCSSのコードを書き、結果をリアルタイムでプレビューできます。

コードペンでHTMLのその他のタグの使い方を学んでいきましょう。

以下の画像がコードペンになります。左側の緑色の枠線で囲まれているエリアにHTMLを書いていきます。

そして右側のResultラベルがある緑色の枠線で囲まれているエリアには、HTMLで書いた結果をリアルタイムでプレビューできます。

コードペンはブラウザ上で直接文字を打ち込めます。

以下の動画のように左側のHTMLの枠内に「コードペン」と文字を打ち込むと、右側のプレビューに表示されますね。

以下の左側のHTMLの枠内の２行目に「コードペン」と文字を打ち込んで、プレビューに表示されていることを確認してみましょう。

See the Pen 2023_08_workshop by miyajima yuya (@pikawaka) on CodePen.

こちらのテキストをHTMLのタグで囲っていきます。

1
2
HTMLの概要を学ぼう
HTMLとは「HyperText Markup Language」の略です。

上記のテキストをコードペンで反映させると、以下のような表示になります。

See the Pen 2023_08_workshop_02 by miyajima yuya (@pikawaka) on CodePen.

テキストには、タグで囲み意味付け（マークアップ）していないので、人間側が「ここは見出し」「ここは段落」と考えていても、Webブラウザは認識することができません。

テキストをマークアップして、以下のようにWebブラウザが見出しと段落を解釈できるように変えてみます。

マークアップする際には、テキストの意味を考えて、適切なタグを選びます。
以下のHTMLの概要を学ぼうでは「大見出し」の意味を付けて、HTMLとは~は「段落」の意味を付けます。

1
2
HTMLの概要を学ぼう <!-- 大見出しの意味を付ける -->
HTMLとは「HyperText Markup Language」の略です。<!-- 段落の意味を付ける -->

テキストの意味から、h1タグとpタグを選びます。h1は「1番大きな見出し」という意味を持ちます。pは「段落」でしたね。

それでは、テキストをタグで囲み、意味を付けてみましょう。

See the Pen 2023_08_workshop_03 by miyajima yuya (@pikawaka) on CodePen.

テキストをタグで囲んで、以下のプレビュー画面のように「見出し」と「段落」が表示されていれば、タグの反映が完了です。

マークアップする前と比較しても、見出しの文字が大きくなったり、段落をあけて表示されていますね。

このようにHTMLでは、テキストの意味を考えて適切なタグで囲むことによって、文書の構造を作ることができます。

見出しの要素は <h1> 要素以外にも、 <h2> 〜 <h6> 要素があります。 h はheading（見出し）の略になります。
<h1> が一番大きな見出しで、 h に続く数字が大きくなるにつれて、以下のコードペンのように小さい見出しになります。

See the Pen 2023_08_workshop_heading by miyajima yuya (@pikawaka) on CodePen.

bタグ

リンクをコピーしました

以下のように、bタグで文字を囲むと太文字にできます。

1
<b>太文字の文章</b>

以下のコードペンのHTML側の文字にbタグを追加して、「結果」と同じプレビューの表示になるように修正しましょう。

See the Pen 2023_08_workshop_04 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

uタグ

リンクをコピーしました

以下のように、uタグで文字を囲むと、囲んだ文字に下線を引けます。

1
<u>下線付きの文章</u>

以下のコードペンのHTML側の文字にuタグを追加して、「結果」と同じプレビューの表示になるように修正しましょう。

See the Pen 2023_08_workshop_07 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

ulタグ

リンクをコピーしました

ulタグは、以下の様にリスト項目を表すliタグとセットで記述することで、箇条書きリストを作成できます。

1
2
3
4
5
<ul>
  <li>ポチ一つ目</li>
  <li>ポチニつ目</li>
  <li>ポチ三つ目</li>
</ul>

以下のコードペンのHTML側の文字にulタグとliタグのセットを追加して、「結果」と同じプレビューの表示になるように修正しましょう。

See the Pen 2023_08_workshop_06 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

olタグ

リンクをコピーしました

olタグは、以下の様にリスト項目を表すliタグとセットで記述することで、順序付きの箇条書きリストを作成できます。

1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

See the Pen html-basic_2023_01 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

tableタグ

リンクをコピーしました

HTMLで表を作成する際は <table> タグを使用します。
ただ <table> タグだけでは表を作成できません。行や列にデータを表示するその他の関連するタグと<table> タグを一緒に使用することで、表を作成できます。

行や列にデータを表示するその他の関連タグは、主に以下のタグがあります。

1. <table> : テーブルを始めるタグ
2. <tr> : テーブルの行を定義するタグ
3. <td> : テーブルのデータセルを定義するタグ
4. <th> : テーブルのヘッダセルを定義するタグ。このセルのテキストは通常太字で表示されます。

以下のように<table>~</table>の間に関連するタグを組み合わせることで、表を作成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>30</td>
  </tr>
</table>

※ table要素内にある border="1" は枠線を表示するためのオプションになります。codepenで表のイメージをつけるために追加しているオプションになるので、borderオプションについては気にしなくて大丈夫です。

以下のコードペンのHTML側の文字表を作成するためのタグを追加して、「結果」と同じプレビューの表示になるように修正しましょう。

See the Pen 2023_08_workshop_08 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

formタグ

リンクをコピーしました

HTMLで入力・送信フォームを作成する際は <form> タグを使用します。ただ<form>タグだけではフォームを作成できません。入力欄や実行ボタンなどフォームを構成する部品を作るタグを一緒に使用することで、目的のフォームを作成することができます。

フォームを構成する部品を作るタグは、主に以下のタグがあります。

• <form> : フォームを始めるタグ
• <label> : 項目名を明記するタグ（構成部品と関連付けることができる）
• <input>: 入力欄を作成するタグ
• <textarea> : 複数行の入力が可能な入力欄を作成するタグ

以下のように<form>とフォームを構成する部品を作成するタグを組み合わせることで、フォームを作成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
  <div>
    <label>名前:</label>
    <input type="text">
  </div>

  <div>
    <label>メールアドレス:</label>
    <input type="email">
  </div>

  <div>
    <label>メッセージ:</label>
    <textarea></textarea>
  </div>
</form>

inputタグのtype属性の値を指定することで、さまざまなフォームの部品を作り出すことができます。

1
2
3
<form>
  <input type="">
</form>

例えば、以下のようにinputタグのtype属性の値をtextにすると、１行のテキストボックス（入力欄）を作ることができます。

1
2
3
4
<form>
  <label>名前:</label>
  <input type="text">
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_07 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

数値だけを入力させたい場合

リンクをコピーしました

さらにテキストボックスに数値だけを入力させたい場合は、以下のように<input>のtype属性の値をnumberします。

1
2
3
4
<form>
  <label>数量:</label>
  <input type="number">
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_06 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

ラジオボタン

リンクをコピーしました

<input>では、type属性の値をradioに指定することで、ラジオボタンを作成することができます。name属性はラジオボタンをグループ化することができます。value属性は、どのラジオボタンが選択されているか識別するために必要です。

1
2
3
<form>
  <input type="radio" name="" value="">
</form>

例えば、以下のようにラジオボタンで学年を選ぶことができます。

1
2
3
4
5
6
7
8
9
<form>
  <label>学年:</label>
  <input type="radio" name="grade" value="１年生">１年生
  <input type="radio" name="grade" value="２年生">２年生
  <input type="radio" name="grade" value="３年生">３年生
  <input type="radio" name="grade" value="４年生">４年生
  <input type="radio" name="grade" value="５年生">５年生
  <input type="radio" name="grade" value="６年生">６年生
</form>

name属性に同じ値（grade）を設定することで、同じグループのラジオボタン
になります。グループ化することで、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択が解除されます。

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_05 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

チェックボックス

リンクをコピーしました

<input>では、type属性の値をcheckboxに指定することで、チェックボックスを作成することができます。

1
2
3
<form>
  <input type="checkbox" value="">
</form>

例えば、以下のようにチェックボックスで好きな科目を選ぶことができます。

1
2
3
4
5
6
7
8
<form>
  <label>好きな科目:</label>
  <input type="checkbox" value="国語">国語
  <input type="checkbox" value="社会">社会
  <input type="checkbox" value="算数">算数
  <input type="checkbox" value="理科">理科
  <input type="checkbox" value="英語">英語
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_04 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

送信ボタン

リンクをコピーしました

フォームで欠かせない部品といえば、送信ボタンです。

<input>では、type属性の値をsubmitに指定することで、送信ボタンを作成することができます。value属性の値には、ボタンのラベルとして表示される文字列を入れます。

1
2
3
<form>
  <input type="submit" value="送信">
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるように修正しましょう。

See the Pen html-basic_2023_03 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

セレクトボックス（選択式のメニュー）

リンクをコピーしました

HTMLのフォーム内にセレクトボックス（選択式のメニュー）を作成する際は<select>タグを使用します。メニューの選択肢は<option>タグで指定します。

1
2
3
4
5
<form>
  <select>
    <option value=""></option>
  </select>
</form>

1
2
3
4
5
6
7
8
9
<form>
  <label>血液型:</label>
  <select>
    <option value="A">A型</option>
    <option value="B">B型</option>
    <option value="O">O型</option>
    <option value="AB">AB型</option>
  </select>
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_02 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

入力案内や入力例を表示する

リンクをコピーしました

<input>ではplaceholder属性を指定することで、入力欄に入力案内や入力例を表示することができます。

1
2
3
4
<form>
  <label>氏名:</label>
  <input type="text" placeholder="田中太郎">
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_08 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

フォーム検証（バリデーション）

リンクをコピーしました

フォームに入力されたデータをサーバ側に送信する前に「データが正しい書式で入力されていることを保証する」ことが重要になります。HTML5のフォーム検証機能を利用すれば、簡単に入力チェックを実装することができます。

フォーム検証機能で利用できる属性は、以下の通りです。

• required - その項目を必須入力にする
• minlength - 最小文字数を制限する
• maxlength - 最大文字数を制限する

例えばテキストボックスにrequiredを指定する場合、空欄で送信ボタンをクリックすると修正すべき点を説明するエラーメッセージを表示して、ユーザーに再試行を促します。

1
2
3
4
5
<form>
  <label>氏名:</label>
  <input type="text" required>
  <input type="submit" value="送信">
</form>

最小文字数を制限するには、以下のように指定します。minlengthで指定された文字よりも少ない状態で送信しようとすると、エラー文が表示されます。

1
2
3
4
<form>
  <input type="text"  minlength="3">
  <input type="submit" value="送信">
</form>

以下のコードペンのHTML側に必要なタグを追加して、「結果」と同じプレビューの表示になるようにしましょう。

See the Pen html-basic_2023_09 by miyajima yuya (@pikawaka) on CodePen.

結果 ↓

HTMLの基本構造を理解しよう

リンクをコピーしました

HTMLでは文書全体に関するタグが用意されています。HTMLの基本構造やWebページのレイアウトを押さえておきましょう。

HTMLの基本構造

リンクをコピーしました

HTMLファイルは、次のような基本的な構造を持ちます。

最新バージョンであるHTML5では、以下のように記述します。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <!-- 文書に関する情報 -->
  </head>
  <body>
    <!-- 文書本体 -->
  </body>
</html>

ここまで学習してきたindex.htmlの内容は、body要素の中に配置させます。

1
2
3
4
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>

上記の内容をbody要素の中に配置することで、ブラウザ側に文書のコンテンツを示す部分だと解釈させることができます。

文書全体に関するタグを使ってみよう

リンクをコピーしました

それでは、index.htmlに各タグを使って基本的な構造を持たせてみましょう。

1
2
3
4
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <!-- 文書に関する情報 -->
  </head>
  <body>
    <img src="img/logo.png">
    <h1>HTMLの概要を学ぼう</h1>
    <p>HTMLとは「HyperText Markup Language」の略です。</p>
    <a href="http://www.htmq.com">HTMLクイックリファレンス</a>
  </body>
</html>

以下のようにブラウザ上の画面では特に何も変化は見られないですが、上記のように記述することでHTML文書としての基本的な構造を持たせることができました。

続いて、head要素に文書に関する情報を加えてみましょう。

ページのタブにタイトルを付けてみよう

リンクをコピーしました

head要素には、文書に関する情報を指定することができます。

例えばhead内でtitle要素を使うと、ページのタイトルを指定することができます。このタイトルはページが読み込まれたときにブラウザのタブに表示されます。

それでは、index.htmlにページのタイトルを指定しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>HTMLの基礎を学ぼう</title>
  </head>
  <body>
    <img src="img/logo.png">
    <h1>HTMLの概要を学ぼう</h1>
    <p>HTMLとは「HyperText Markup Language」の略です。</p>
    <a href="http://www.htmq.com">HTMLクイックリファレンス</a>
  </body>
</html>

ページのタイトルを指定したら、動画のようにindex.htmlを保存してブラウザを再読み込みさせましょう。

head内にtitle要素を指定することで、以下のようにブラウザのタグにページのタイトルとしてtitleタグで囲ったテキストが表示されますね。

文書の言語と文字コードを指定しよう

リンクをコピーしました

Webサイトで「文字化け」を起こしているページを見たことはないでしょうか。

文字化けとは、フォントが反映されず文字が別の文字として表示されてしまうことですが、以下の内容を追加することで、文字化けを対策することができます。

以下のハイライト箇所の内容を追加しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの基礎を学ぼう</title>
  </head>
  <body>
    <img src="img/logo.png">
    <h1>HTMLの概要を学ぼう</h1>
    <p>HTMLとは「HyperText Markup Language」の略です。</p>
    <a href="http://www.htmq.com">HTMLクイックリファレンス</a>
  </body>
</html>

<html lang="ja">では、html要素にlang属性を追加して文書の言語を「日本語」に指定しており、<meta charset="UTF-8">では、文字コードをHTML5で推奨されるUTF-8に指定しています。

これにより、文字化けを防ぐことができます。

基本的なWebサイトのレイアウト

リンクをコピーしました

さまざまな形のWebサイトがありますが、「ヘッダー、フッター、メイン」を持つ基本的なWebサイトのレイアウトを押さえておきましょう。