女性向けエンジニアスクール
HTML入門の導入スライド
そもそも、ブラウザって何？
Chrome や Safari など、Web ページを見るためのアプリです。アドレスを受け取ると、ページの材料を取りに行き、読みやすい画面に組み立てます。
表示されたWebページ
パン屋さんのお知らせ
新しいメニューを公開しました。
ブラウザの役割
取りに行く → 読む → 画面にする
ブラウザはインターネットそのものではありません。インターネットを通して材料を受け取り、私たちが読める画面にするアプリです。
1 / 4
Webページの正体は文字のファイル
Web ページの土台は、文字が書かれた HTML ファイルです。最初はタグや記号がなくても、書いた文字をブラウザがそのまま表示します。
山田 太郎
左のファイルに書いた1行が、右の画面へそのまま出ています。何も飾られていないのが、今は正解です。
2 / 4
HTML入門 - 打ってから画面が出るまで
URLを開くと、ファイルが届く
1区間ずつ進めて、ブラウザが頼み、サーバーがファイルを返す流れを追いましょう。
- URL は、開きたいページの場所を示す住所
- ブラウザは「このページをください」とサーバーへ頼む
- 返ってきたファイルを、ブラウザが画面に表示する
3 / 4
考えてみよう外しても進めます
空の HTML ファイルに、タグを使わず「山田 太郎」と1行だけ書くと、ブラウザにはどう表示されますか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
同じ名前に、見出しという役割を足す
前回は名前をそのまま表示しました。h1タグで囲むと、文字は消えずに残り、その1行がページの見出しだとブラウザへ伝わります。
前回 タグなし
山田 太郎
文字として表示される
今回 h1で囲む
山田 太郎
ページの見出しとして表示される
大きく太く見えるのは、ブラウザが『これは見出し』と受け取った結果です。文字そのものを書き換えたわけではありません。
1 / 4
h1要素は3つで1組
開始タグと終了タグで中身を挟んだ全体を、要素と呼びます。前回の名前は消さず、前と後ろへタグを足すだけです。
終了タグにはスラッシュが付きます。左右のタグ名がどちらもh1なら、1組として名前を囲めています。
2 / 4
HTML入門 - タグは飾りではなく意味付け
h1は大きくするためのタグではない
h1が伝えるのは『この1行がページの主な見出し』という意味です。大きさや太さは、ブラウザがその意味を見た目へ変えた結果です。
文字を好きな大きさや色に変えるのは、次のレッスンで学ぶCSSの仕事です。HTMLでは、まず正しい役割を選びます。
| 受け取る相手 | h1から分かること |
|---|---|
| ブラウザ | ページの主な見出しとして画面に表示する |
| 検索エンジン | ページの主題を読み取る手掛かりにする |
| 読み上げソフト | 見出しだと知らせ、見出し間の移動に使う |
3 / 4
考えてみよう外しても進めます
自己紹介ページの名前をh1で囲む理由として、最も正しいものはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
HTML入門 - HTML と CSS の役割分担
CSS を外すと中身は減らない
CSS を外して、同じ中身の並び方と大きさがどう変わるか見比べてください。
- CSS を外しても中身は1つも減らない。縦に積まれるだけ
- HTML が何が書いてあるかを決め、CSS がどう見えるかを決める
- 文章を変えずに色や大きさだけ直したいときは、CSS の側だけ書き替えれば済む
1 / 3
CSS の決まりを3つに分ける
今回書くCSSでは、h1で相手を選び、colorで変えるものを示し、最後に青の値を書きます。
h1どの要素に当てるかcolor色を変える#0071e3青を表す値このかたまりを <style> と </style> で囲み、前回のh1の下へ足します。HTMLの文章そのものは変えません。
2 / 3
考えてみよう外しても進めます
書いた style のかたまりをまるごと消すと、ページはどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - head と body の役割
HTMLを包む4つの役割
本当の HTML ファイルには最初から決まった型があります。手紙に宛名と本文の欄があるのと同じで、置く場所が決まっています。
中は2つに分かれます。head は設定を書く場所、body は画面に出す中身を書く場所です。
先頭の1行は「これは今の HTML です」という宣言です。その下の html が、ページ全体を包む一番外側の入れ物になります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>山田 太郎</h1>
</body>
</html>1 / 4
HTML入門 - head と body の役割
head と body の振り分け
1行ずつどちらの区画に置くか切り替えて、画面とタブの名前がどう変わるか見てください。
- 読む人に見せたいものは body、ブラウザへの申し送りは head
- title と meta は head に置く行で、画面に文字としては出ない
- h1 や p は head に置けない行。書いてもブラウザが body へ送る
2 / 4
考えてみよう外しても進めます
名前の h1 をうっかり head の中に書いてしまいました。画面はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
HTML入門 - head と body の役割
完成したかを3か所で確かめる
見た目がほぼ同じでも、構造は書き換わっています。今回の課題と採点が見る場所を順に確認します。
ブラウザは置き場所の間違いを直して表示することがあります。見た目だけでなく、コードの入れ子も確認してください。
| 確認する場所 | 完成の目印 |
|---|---|
| ファイル全体 | 先頭が DOCTYPE で、html の中に head と body がある |
| body の中 | 名前の h1 があり、表示する中身が設定と分かれている |
| 画面の見た目 | style が無くなり、名前がブラウザ既定の黒に戻る |
4 / 4
HTML入門 - 文字化けは読む規則のずれ
head に3つの申し送りを足す
lang・charset・title を1つずつ足し、言語、本文の読み方、タブの名前のどこが変わるか追ってください。
- lang は、このページが日本語だと読み上げや翻訳へ伝える
- charset は、日本語をどの規則で読めばよいかブラウザへ伝える
- title は、画面の本文ではなくブラウザのタブ名になる
1 / 4
HTML入門 - 文字化けは読む規則のずれ
3つを書き足した完成形
前回は空だった head に meta と title を入れ、html の開始タグには lang を足します。body の中身は変えません。
この5行を前回の雛形へ書き足せば、これから育てるページの土台が完成します。
lang は html の開始タグ、meta と title は head の内側です。3つとも画面本文を増やす行ではありません。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>山田 太郎のプロフィール</title>
</head>2 / 4
考えてみよう外しても進めます
画面の「山田 太郎」はそのままで、ブラウザのタブだけを「プロフィール」に変えたい。どれを書きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
HTML入門 - 文字化けは読む規則のずれ
3つの役割と置き場所
同じ設定の仲間でも、langだけはhtmlの開始タグに書きます。metaとtitleはhead、画面に見せるh1はbodyです。
採点では、lang、文字コードの指定、タブに出るページ名の3点を確認します。
| 書く場所 | 効く先 |
|---|---|
| <html lang="ja"> | ページ全体の言語。読み上げと翻訳が使う |
| <meta charset="UTF-8"> | headの中。ブラウザが文字を読む規則になる |
| <title>...</title> | headの中。タブと検索結果へページ名を渡す |
| <h1>山田 太郎</h1> | bodyの中。読む人が画面で見る見出しになる |
4 / 4
HTML入門 - 見出しは大きさではなく階層
見出しの数字はまとまりの深さ
h1 はページ全体、h2 はその中の章です。同じ深さのまとまりには同じ数字を使います。
さらに細かいまとまりが必要なときだけ、その中を h3 に分けます。
名前の下に並ぶ3つのまとまりは同じ深さなので、3つとも h2 で書きます。
<h1>山田 太郎</h1>
<h2>自己紹介</h2>
<h2>趣味</h2>
<h2>経歴</h2>1 / 4
見出しを拾うと構造が見える
見出しの階層は、ブラウザや検索エンジンがページの構造を理解する手がかりになります。
見出しから見たページの構造
| 段 | 文字 | 何のまとまりか |
|---|---|---|
| h1 | 山田 太郎 | ページ全体 |
| h2 | 自己紹介 | ページの中の1章 |
| h2 | 趣味 | ページの中の1章 |
| h2 | 経歴 | ページの中の1章 |
囲った h1 がページ全体、その下の h2 が同じ深さの3つの章です。
これは見出しから構造を確認する表です。画面に目次が自動で表示されるという意味ではありません。
2 / 4
考えてみよう外しても進めます
名前の下に同じ深さで「自己紹介」「趣味」「経歴」を置くとき、正しい並びはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
ここでつまずく
見出しは画面を壊さずに間違えられるので、見た目ではなく階層を確認します。
h1 を何個も置く
ページ全体の名前が複数になる
文字の大きさで h4 を選ぶ
まとまりの深さと見た目がずれる
h2 を飛ばして h3 にする
親のない下位まとまりになる
この回は見出しの骨組みだけです。本文は次のレッスンで埋めます。
4 / 4
連続した空白と改行は1つに潰される
エディタでエンターキーを押しても、画面上は改行されません。ブラウザは連続した空白や改行をまとめて1つの空白として扱うからです。
はじめまして。書いたときは2行画面に出るもの
| 行 | 出るか |
|---|---|
| はじめまして。 山田 太郎です。 | 1行につながって出る |
| 書いたときの改行 | 空白1つに潰される |
改行が消えたのではなく、空白1つとして扱われています。
だから「ここからここまでが1つの段落」であることを、タグで伝えてあげる必要があります。
1 / 4
p と br の使い分け
文章のかたまりは p で包みます。同じ段落の中で行だけ変えたいときに br を使います。br は文字をはさまないので終了タグがありません。
<p>ここから1つの段落<br>同じ段落の中で行を変えるp は話題ごとの文章を段落として伝えるタグです。ブラウザの既定余白は見た目上の結果で、p を選ぶ理由そのものではありません。
2 / 4
考えてみよう外しても進めます
宛先の住所を3行に折り返して書きたいとき、使うのはどちらですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
ここでつまずく
p と br はどちらも画面上で行が分かれますが、話題を分けるか、同じ話の中で行だけ変えるかで選びます。
br を並べて余白を作る
余白の量が中身に縛られ、あとから CSS で直せない
話題が変わるのに br でつなぐ
見た目は分かれるが、1つの段落として扱われる
br に終了タグを書く
br は文字をはさまないため終了タグは要らない
余白を広げたいだけなら CSS の仕事です。br は行を変えたいときだけに使います。
4 / 4
HTML入門 - 見た目ではなく役割で選ぶ
同じ見た目でも役割が違う
4つのタグを切り替え、ブラウザの既定表示と HTML 上の役割を見比べましょう。
- strong は内容の重要性を表す
- em は文の語調を強調する
- 太字・斜体にしたいだけなら CSS を使う
1 / 3
HTML入門 - 見た目ではなく役割で選ぶ
文全体ではなく単語を包む
自己紹介の段落の中で、重要性を伝える HTML は strong、語調を強調する CSS は em で包みます。
採点では HTML と CSS の単語だけが、それぞれ段落内の strong と em に入っているかを確認します。
強調したい語の直前に開始タグ、直後に終了タグを置きます。段落の p はそのまま残します。
<p>
2026 年から <strong>HTML</strong> と
<em>CSS</em> を学びはじめました。
</p>2 / 3
考えてみよう外しても進めます
「この申込期限は今日です」の「今日」が重要・緊急だと示したいとき、どのタグを選びますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - 順番の意味で ul と ol を選ぶ
番号をリストに任せる
ul、ol、番号の手打ちを切り替え、2番目に項目を足して変化を見比べましょう。
- ul は順番に意味がない箇条書き
- ol は順番そのものが情報になるリスト
- ol の番号は項目を足すと自動で振り直される
1 / 3
HTML入門 - 順番の意味で ul と ol を選ぶ
趣味は ul、経歴は ol
順番に意味がない趣味は ul、時系列で読む経歴は ol で包みます。どちらも1項目ずつ li にします。
ol の li に「1.」や「2.」は書きません。画面の番号はブラウザが自動で付けます。
ul と ol はリスト全体の入れ物、li は中の1項目です。li は ul か ol の中へ入れます。
<h2>趣味</h2>
<ul>
<li>朝のさんぽ</li>
<li>写真をとる</li>
<li>コーヒーをいれる</li>
</ul>
<h2>経歴</h2>
<ol>
<li>2024 年 事務の仕事をはじめる</li>
<li>2026 年 HTML と CSS を学びはじめる</li>
</ol>2 / 3
考えてみよう外しても進めます
「サーバーを起動する → ブラウザを開く → URL へアクセスする」を書くとき、どのリストを選びますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
href が行き先、文字が押せる場所
a タグで文字を囲み、href に行き先を書きます。この1行で、読める文字がクリックできるリンクになります。
href行き先を書くhttps://yumesaku.tech外部サイトのURL_blank新しいタブで開く押せる文字は「こちら」ではなく、文字だけでも行き先が分かる名前にします。
1 / 3
HTML入門 - href に何を書くか
外部サイトとメールで href を使い分ける
このレッスンでは、外部サイトを開くリンクと、メール作成画面を開くリンクを1本ずつ作ります。
target="_blank" は外部サイトのリンクへ付けます。mailto の行き先は mailto: に続けてメールアドレスを書きます。
| やりたいこと | aタグの書き方 |
|---|---|
| 外部サイトを新しいタブで開く | <a href="https://…" target="_blank">サイト名</a> |
| メール作成画面を開く | <a href="mailto:taro@example.com">メールを送る</a> |
2 / 3
考えてみよう外しても進めます
外部サイトへのリンクに target="_blank" を付けると、何が変わりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
img は src と alt を1行に書く
src に画像の場所、alt に画像の内容を書きます。今回は自己紹介の見出しの直後へプロフィール画像を置きます。
srcどこの画像かalt何が写っているかimg は文字をはさまない空要素なので、終了タグ </img> は書きません。
1 / 3
HTML入門 - 画像が出ないときに見えるもの
画像が届かないとき、alt が内容を伝える
srcを正しい名前・綴り違い・空に切り替え、altが画面と読み上げにどう残るか確かめましょう。
- srcが正しければ画像が表示される
- srcが壊れてもaltの言葉が内容を伝える
- 内容のある画像でaltを空にすると情報が失われる
2 / 3
考えてみよう外しても進めます
内容のあるプロフィール写真の alt を空にしました。いちばん情報を受け取れなくなるのは誰ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
コメントは <!-- で始めて --> で閉じる
何の部分か分かる言葉を内側に書きます。コメントはHTMLには残りますが、ブラウザの画面には表示されません。
<!--コメント開始-->コメント終了ページのソースを開けば誰でも読めます。パスワードなどの秘密は書きません。
1 / 3
HTML入門 - 画面に出ないメモを残す
コメントは残したまま、画面からだけ隠せる
目印を書く／タグをはさむを切り替え、閉じる記号を忘れたときにどこまで消えるか確かめましょう。
- 目印のコメントは画面に出ない
- タグをはさむとソースに残したまま表示を止められる
- --> を忘れると、その先までコメントとして扱われる
2 / 3
HTML入門 - 画面に出ないメモを残す
5つの区切りを書き、趣味を4件にする
各見出しの直前へ、その部分の名前をコメントで置きます。読み返して見つけた不足も同時に直します。
コメントは見出しの直前、追加する li は趣味の ul の中へ置きます。
| 置く場所 | 追加するコード |
|---|---|
| 名前の前 | <!-- 名前と肩書き --> |
| 自己紹介の前 | <!-- 自己紹介 --> |
| 趣味の前 | <!-- 趣味 --> |
| 経歴の前 | <!-- 経歴 --> |
| リンクの前 | <!-- リンク --> |
| 趣味ulの最後 | <li>本を読む</li> |
3 / 3
HTML入門 - 見出しごとに中身を点検する
6つの観点でページ全体を読み返す
新しいタグは増やしません。コードを上から下へ読みながら、ここまで使ったタグと中身がそろっているか確認します。
今回見つける不足は経歴の3件目です。ほかの項目も崩していないか一周します。
| 見る場所 | 完成している状態 |
|---|---|
| 見出し | h1が1つ、h2が4つ |
| 文章 | p・br・strong・em |
| リスト | 趣味4件、経歴3件 |
| リンク | httpsとmailtoの2本 |
| 画像 | srcと内容が分かるalt |
| コメント | 5つの区切りが見出しの前 |
1 / 3
HTML入門 - 見出しごとに中身を点検する
開始タグと終了タグを線で確かめる
正しい・閉じ忘れ・交差を切り替え、ol と li の相手が最後までつながるか見比べます。
- 終了タグが必要な ol と li は1組ずつ対応する
- 内側で開いたliから先に閉じる
- 線が行き止まりや交差になった場所を直す
2 / 3
考えてみよう外しても進めます
経歴の3件目 <li>これから Web の仕事に移りたい</li> は、どこへ追加しますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - 属性のきほん
属性は「名前」と「値」の1組
属性は、開始タグの中に詳しい情報を足します。属性名と値を1組にして、タグがどう働くかを指定します。
- 複数の属性は、半角スペースで区切る
- このコースでは 属性名="値" と書く。width の値を変えると、画面に出る画像の幅も変わる
1 / 3
今回確認する3つの属性
画像には width と height を追加し、外部リンクは target が残っているか確認します。
width="160"今回追加：幅height="160"今回追加：高さtarget="_blank"前回から確認2 / 3
考えてみよう外しても進めます
既存のプロフィール画像を 160 × 160 にするには、src のあとをどう書きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - div と span は囲む相手が違う
同じ文章でも、内側が div なら段が分かれる
外側の div は変えず、名前を囲む内側のタグだけ切り替えます。
- span は文章と同じ行の中で、囲んだ文字ぶんだけをまとめる
- 内側の div は1段を使い、前後の文字も別の段へ分ける
1 / 3
写真と段落は div、名前だけは span
自己紹介の img と p を外側の div に入れ、p の文章のうち名前だけを span で囲みます。
<div>写真と段落をまとめる<span>山田 太郎</span>名前だけを囲む2 / 3
考えてみよう外しても進めます
自己紹介の img と p を1つにまとめ、p の文章のうち名前だけを囲むには、外側と内側にどのタグを使いますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - header・main・footer は見た目ではなく役割を分ける
見た目が同じでも、タグは役割の手掛かりになる
「見た目」「読み上げ」「検索エンジン」を切り替え、div と header・main・footer の違いを比べます。
- CSS 未指定のこの例では、3つのタグに置き替えても配置は同じ
- main を div に戻すと、header と footer は残るが、本文へ移る目印と主な内容を示す手掛かりが1つ減る
1 / 3
中身を消さず、3つの外箱へ移す
既存の中身を削らず3領域へ移し、旧「リンク」の h2 だけ外します。
<header>名前と肩書き<main>自己紹介・趣味・経歴<footer>著作権とリンクbody 直下は header → main → footer。自己紹介の div / span は中身ごと残します。
2 / 3
考えてみよう外しても進めます
「名前と肩書き」「自己紹介・趣味・経歴」「著作権表示とリンクのリスト」は、body の上からどのタグへ順に入れますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
nav はメニュー、section は話題、article は1作品
既存の中身は残し、header の nav に4リンクを置き、main は同じ順の4つの section に分けます。works の div 直下には article を3つ置きます。
<nav>4リンクのメニュー<section id="works">作品という話題<article>切り出せる1作品1 / 3
HTML入門 - navで移動先を結び、sectionとarticleで中身を分ける
href の # のあとと id が同じ場所へ飛ぶ
メニューと id の書き方を切り替え、完全一致・1文字違い・重複で飛び先がどう変わるか比べます。
- href="#hobby" は id="hobby" と完全一致した section を探す
- 綴り違いでは一致先がなく、同じ id が複数なら最初の要素が選ばれて後の要素を直接指せない
2 / 3
考えてみよう外しても進めます
作品へのメニューと、作品一覧・1作品の組み合わせとして正しいものはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML入門 - 表は行ごとに書く
各 tr のセル数をそろえる
列の数を変えたり「CSS」の行だけ td を1つ減らしたりして、セル数がそろう状態とそろわない状態を比べます。
- thead の1行は th、tbody の3行は td を同じ列数だけ並べる
- 空の td は自動で足されず、書き忘れた行だけセル数が1つ減る
1 / 1
form の3部品
読む人が文字を打ち込む場所をフォームと呼びます。form が全体を囲み、その中に入力欄とボタンを置きます。どこへ送るかの action と、どう送るかの method は form 自身が持ちます。
action="/contact"どこへ送るかmethod="post"どう送るかname="name"送るときのその欄の名前受け取る側の用意はこのコースでは作りません。今回書くのは、中の入力欄とボタンまでです。
1 / 4
HTML入門 - 送る先と送り方
送り方で値の載る場所が変わる
送り方を切り替えて、打ち込んだ値がどこに載るか見比べてください。
- 片方は URL の後ろに値が並ぶ。だから履歴にも残る
- もう片方は URL に出ず、本文の側に載る
- どちらも届く中身は同じ。違うのは載る場所と、人の目に触れるかどうか
2 / 4
考えてみよう外しても進めます
入力欄に name を書き忘れました。その欄に打った文字はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
ここでつまずく
フォームは画面上は打てているように見えるので、間違いが目に見えません。
label の for と入力欄の id がずれる
ラベルを押しても入力欄にカーソルが入らない
label を付けない
何を書く欄なのかが読み上げソフトに伝わらない
複数行の入力に input を使う
1行しか入らず、長い文が打ちにくくなる
type をいつも text にする
スマホのキーボードが切り替わらず、打ちにくいまま
for と id をそろえると、ラベルの文字を押すだけで入力欄に入れます。指で操作する人ほど効く工夫です。
4 / 4