ダレカン和泉Web制作・開発基礎カリキュラム

Step 2 共通基礎 » 授業3

STEP 2 | 授業 3/7

はじめてのHTML

いよいよWebページの「骨組み」を自分の手で書きます。やることはシンプルで、「タグ」という印で文章をはさんでいくだけ。書いて、保存して、ブラウザで確かめる。この繰り返しで進みます。

この授業のゴール 見出し・段落・リスト・リンク・画像の入ったページを、自分の手で書けるようになる。

1. タグ ― 文章をはさむ印

HTMLの書き方は、たった1つのルールでできています。「文章を、意味を表す印(タグ)ではさむ」です。

<h1>こんにちは</h1>
  • <h1> が「ここから大見出し」という開始の印
  • </h1> が「ここまで」という終了の印(スラッシュ / がつきます)
  • はさまれた「こんにちは」が、画面に大見出しとして表示されます
大事な約束: タグはすべて半角で打ちます。< や > が全角だと動きません。日本語入力をオフ(半角/全角キー)にしてからタグを打つ習慣をつけましょう。

2. ひな形 ― ページの決まり文句

HTMLファイルには、毎回最初に書く「決まり文句」があります。VS Codeなら一瞬で出せます。

  1. web-renshu フォルダに renshu.html を作る授業2「VS Codeをはじめる」の4章と同じ手順です。(エクスプローラーの「新しいファイル」アイコン)
  2. 半角で ! と打って Tab キーひな形が一気に展開されます。これがEmmet(エメット)という時短機能です。
  3. <html lang="en"> を <html lang="ja"> に直す「このページは日本語です」という意味になります。
  4. <title> の中身を「練習ページ」にするここはブラウザのタブに表示される名前です。

ひな形はこんな形をしています。意味もざっくり知っておきましょう。

<!DOCTYPE html>          ← 「これはHTMLです」という宣言
<html lang="ja">         ← ページ全体のはじまり
  <head>                 ← ページの「設定置き場」(画面には出ない)
    <title>練習ページ</title>
  </head>
  <body>                 ← 画面に表示される中身は、全部この中に書く
  </body>
</html>

これから書くものは、すべて <body> と </body> の間に入れていきます。

3. 見出しと段落

<body> の中に、次の3行を書いて保存し、Go Live で確かめましょう。

<h1>私の練習ページ</h1>
<h2>今日やったこと</h2>
<p>HTMLの書き方をならいました。タグで文章をはさむだけ!</p>
  • h1〜h6 が見出しです。数字が大きいほど小さな見出しになります。h1 はページに1つだけが基本です。
  • p は段落(paragraph)。ふつうの文章はこれではさみます。

4. リスト ― 箇条書き

箇条書きは、2種類のタグの組み合わせで作ります。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>
  • ul が「ここからリスト」という外側の箱、li が1行1行の項目です。
  • ul を ol に変えると、「1. 2. 3.」と番号つきになります。試してみましょう。
  • タグの中にタグが入る形を「入れ子(いれこ)」と呼びます。HTMLはこの入れ子の積み重ねでできています。

5. リンクと画像

Webらしさの代表、リンクと画像です。これも renshu.html の <body> の中に書き足して、保存 → Go Live で確かめます。

<a href="https://www.yahoo.co.jp/">Yahoo! JAPANへ</a>

<img src="neko.png" alt="猫の写真">
  • a がリンクのタグ。href="..." の中に行き先のURLを書きます。このような「タグへの追加情報」を属性(ぞくせい)と呼びます。
  • img が画像のタグ。src="..." に画像ファイルの名前を書きます。画像ファイルは、HTMLと同じフォルダに置いておきます。
  • alt="..." は、画像が表示できないときや、目の不自由な方が読み上げソフトを使うときに使われる説明文です。かならず書くのがプロのマナーです。
  • img には終了タグ(</img>)がありません。こういう「はさまない」タグも少しだけあります。
練習用の画像は、こちらに用意してあります: 猫 (neko.png) / パン (pan.png) / 花 (hana.png)。リンクを右クリック →「名前を付けてリンク先を保存」で、web-renshu フォルダの中に保存してから、ファイル名を src に書きます。拡張子(.png)まで正確に。授業1で拡張子を表示する設定にしたのが、ここで効いてきます。(慣れたら、フリー素材サイトの画像を自分で探して使ってもOKです)

6. やってみよう ― 「好きなものリスト」ページ

やってみよう

今日の全部を使って、小さなページを1枚完成させます。

  1. suki.html という新しいファイルを作り、! + Tab でひな形を出す。(lang="ja" に直すのも忘れずに)
  2. h1 で「好きなもの」という見出しをつける。
  3. h2 と ul/li で、「好きな食べもの」「好きな時間」など、2つ以上のリストを作る。
  4. 関係するサイトへのリンクを1つ入れる。(好きなお店のサイトなど)
  5. 画像を1枚入れて、alt も書く。(画像は上の「練習用の画像」から保存して使えばOK)
  6. Go Live で確認して、できあがった画面をスタッフに見せる。
答えを用意してあります: suki-mihon.html (見本・答え) ― まずこれをブラウザで開いて完成形を見てから、写して作って大丈夫です。コピペでもOKです。余裕があれば手で写すと、打つこと自体が練習になっておすすめです。写せたら、リストの中身を自分のものに変えれば、それはもう「自分の作品」です。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • table(表)に挑戦してみましょう。tr が行、th が見出しセル、td がふつうのセルです。1週間の予定表を作ってみてください。
  • header、main、footer という「意味を伝えるための入れもの」タグを調べて、suki.html を整理してみましょう。見た目は変わりませんが、読み上げソフトや検索エンジンへの親切になります(セマンティックHTMLと呼びます)。
  • わざとタグを1つ閉じ忘れて保存し、ページがどう崩れるか観察してみましょう。「崩れ方を知っている」ことは、直す力に直結します。

できたチェック