【HTML５・CSS３】 ワークショップ「HTML」

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

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

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

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

HTMLの書き方を学ぼう

リンクをコピーしました

以下のペンマークのアイコンが表示されたら、実際に手を動かしてコードを書いてみましょう！

ページのソースを確認してみる

リンクをコピーしました

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

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

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

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

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

ソースコードと「おすすめのテキストエディタ11選」のページを見比べてみます。

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

その他にも、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タグの仕組み

リンクをコピーしました

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

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

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

リンクをコピーしました

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

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

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

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

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

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

リンクをコピーしました

コードペンとは、Webの見た目を即座に確認するためのオンラインコードエディターです。コードペンを使うと、HTML・CSSのコードを書き、結果をリアルタイムでプレビューできます。このコードペンを使ってHTML・CSSの使い方を学んでいきましょう。

以下の画像がコードペンになります。左側の緑色の枠線で囲まれているエリアに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.

HTMLでは今回勉強した h1 ~ h6 や p 以外にも多くのタグがあるので、その他のタグについても確認していきましょう。

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

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

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

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

結果 ↓

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

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

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

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

結果 ↓

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.

結果 ↓

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

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

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

以下のように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.

結果 ↓

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

リンクをコピーしました

これまで「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>

spanタグとは

リンクをコピーしました

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

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

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

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

divとspanの違い

リンクをコピーしました

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

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

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

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

以下のコードペンのHTML側の文字にdivタグを追加して、「結果」のようにdivタグの前後が改行されるように修正しましょう。

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

結果 ↓

以下のコードペンのHTML側の文字にspanタグを追加して、「結果」のようにspanタグの前後が改行されないことを確認しましょう。

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

結果 ↓

HTMLの問題を解いてみよう

リンクをコピーしました

問題1

リンクをコピーしました

以下の表に書かれている指示に従って「見本」と同じプレビューになるように、見出しを作成しなさい。

[ 見本 ]

[ 問題 ]

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

問題2

リンクをコピーしました

以下の表に書かれている指示に従って「見本」と同じプレビューになるように、「見出し」と「段落」を作成しなさい。
※ 段落は適切なタグで囲って意味付けを行うこと

[ 見本 ]

[ 問題 ]

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

問題3

リンクをコピーしました

「問題」のコードペン内にあるテキストを修正して、適切なタグを使って「HTML」を太文字にして下さい。

[ 見本 ]

[ 問題 ]

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

問題4

リンクをコピーしました

「問題」のコードペン内にあるテキストを修正して、適切なタグを使って「オンラインコードエディター」に下線を引いて下さい。

[ 見本 ]

[ 問題 ]

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

問題5

リンクをコピーしました

「見本」と同じプレビューになるように、「箇条書きリスト」を作成しなさい。

[ 見本 ]

[ 問題 ]

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

問題6

リンクをコピーしました

以下の表に書かれている指示に従って「見本」と同じプレビューになるように、「表」を作成しなさい。

[ 見本 ]

[ 問題 ]

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

問題7

リンクをコピーしました

以下の表に書かれている指示に従って「見本」と同じプレビューになるように、マークアップして下さい。
また「段落」と「箇条書きリスト」と「表」に関する指示はありません。「段落」と「箇条書きリスト」と「表」の要素がどこに必要か考え、マークアップして下さい。

[ 見本 ]

[ 問題 ]

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

役に立ったらSHARE♪

• twitter
• facebook
• はてブ