コーダーから「ここの見出しはh2でいいですか？」と聞かれて、返事に詰まる。
Webデザインの仕事を始めると、この場面が必ず来ます。
このレッスンでは、HTMLの役割とタグの読み方を扱います。ゴールは書けることではなく、読めて会話できること。
読み終えるころには、さっきの質問に「h2でお願いします。理由はこうです」と返せるようになりますよ◎
HTMLはページの文書構造を作る言語
HTML（HyperText Markup Language）は、Webページの中身に「これは見出し」「これは段落」と意味の札を付けていく言語です。この札がタグ。ブラウザはタグを読んで、ページを組み立てます。
たとえばこう書きます。
<h1>自己紹介</h1>
<p>山田はなです。Webデザインを勉強しています。</p>1行目が「ページ全体の見出し」、2行目が「段落」という宣言です。世界中のWebページが、この仕組みの上に載っています。
気をつけたいのは、HTMLは見た目を決めないことです。色も、文字の大きさも、配置も決めません。見た目の担当は次のレッスンで扱うCSSで、HTMLの仕事は意味と構造だけ。この分担を先に押さえておくと、この編全体がすっと読めます。
タグの読み方：部品は3つだけ
タグの形は最初は暗号に見えます。でも部品は3つしかありません。開始タグ・中身・終了タグです。
<p>で始めて、</p>で閉じる。挟まれた中身が「段落」の意味を持ちます。終了タグに付くスラッシュ（/）が「ここまで」の合図です。
もう1つだけ覚えるなら属性です。開始タグの中に書く補足情報で、リンクのaタグなら「href=”〜”」でリンク先を、画像のimgタグなら「alt=”〜”」で画像の説明文を指定します。
altは画像が表示できないときの代わりの文章で、目の不自由な人の読み上げにも、検索エンジンの理解にも使う大事な属性です。デザイナーが文言を考える場面も多いですよ。
よく使うタグはまず8つ
タグは100種類以上ありますが、全部を覚える必要はありません。まずこの8つが読めれば、ページの大半は読めます。
| タグ | 意味 | 読み方のヒント |
|---|---|---|
| h1〜h3 | 見出し | hはheading。数字が階層で、h1がいちばん上 |
| p | 段落 | pはparagraph。本文のかたまり |
| ul・li | 箇条書きと項目 | ulがリスト全体、liが1行ずつ |
| a | リンク | href属性のURLへ飛ぶ |
| img | 画像 | src属性が画像ファイル、altが説明文 |
| strong | 強調 | 重要な語句。多くのブラウザで太字になる |
| div | 意味を持たないまとまり | レイアウト用の箱。とても頻繁に出てくる |
| br | 改行 | 終了タグがない、めずらしいタイプ |
実際のページのHTMLは、ブラウザの「ページのソースを表示」でいつでも見られます。右クリックのメニューにあります。
今この表の8つを知っただけで、ソースの景色が変わって見えるはずです。
ソースの最初に見える<!DOCTYPE html>やmetaはページの情報なので、今は読み飛ばして大丈夫です。
もう1つ、タグとセットでよく見るのがclass（クラス）属性です。要素に付ける名前で、こう書きます。
<p class="lead">ここは導入文です。</p>class自体は見た目を何も変えません。次のレッスンで学ぶCSSが、この名前を目印に「leadという名前の段落はこう見せる」と指定します。実際のサイトのソースがclassだらけなのは、このためです。
タグは入れ子で文書構造を作る
タグは箱の中に箱を入れる形で書きます。これを入れ子と呼びます。ulの中にliが入る、というあの形です。
ページ全体も同じ作りで、htmlという一番外の箱の中に、headとbodyの2つの箱が入っています。
- head：ページのタイトルやCSSの読み込みなど、ページの情報を書く場所。画面には出ません
- body：画面に見える中身をすべて書く場所。見出しも本文も画像もここです
そしてbodyの中では、見出しの階層が文書構造の背骨になります。ルールはシンプルで、h1はページに1つ、h2以降は番号順に使う。h2の次の階層はh3で、h2からいきなりh4へ飛ばしません。
この見出し構造は、検索エンジンもページを理解する手がかりにしています。SEOとの関係はWebデザイナーのためのSEO基礎で詳しく扱います。
ページの部位を表すタグもある
bodyの中では、divのほかに部位の名前を持つタグもよく見かけます。第6章の「Webページの構成要素」で覚えた部位名と、そのまま対応しています。
| タグ | 対応する部位 |
|---|---|
| header | ヘッダー（ページ上部） |
| nav | ナビゲーション（グローバルナビ） |
| main | メインコンテンツ（そのページの本体） |
| footer | フッター（ページ下部） |
役割はdivと同じ「まとまりの箱」で、違いは名前で部位を宣言できることです。ソースでheaderを見つけたら「ここからヘッダー」と読めます。部位名の復習はWebページの構成要素でどうぞ。
デザイナーはどこまで読めればいいか
書けなくて大丈夫、と最初に言いました。では「読める」の合格ラインはどこか。次の3つができれば十分です。
- ソースを見て、見出し・段落・リスト・リンク・画像を区別できる
- 「ここはh2に」「この画像のaltはこの文章で」と指定できる
- 文字で組む部分と、画像にして載せる部分を分けて考えられる
3つ目は実務で特に効きます。文字で組んだ部分は検索の対象になり、あとからの修正も一瞬です。画像にした文字はどちらもできません。
「この見出しは文字で組んでください」と言えるデザイナーは、それだけで信頼されます。
ミニ実践：メモ帳だけでページを1枚作る
読むだけより、1回作ると一気に腑に落ちます。使うのはパソコンに最初から入っているメモ帳（Macならテキストエディット）だけ。10分で終わります。
- メモ帳を開く（Macのテキストエディットは、メニューの「フォーマット」から「標準テキストにする」を選んでおきます）
- 次の内容を打ち込む。headとbodyの入れ子が、本文で見た形そのままです。中身は自分の情報に変えてOKです
<!DOCTYPE html>
<html>
<head>
<title>自己紹介</title>
</head>
<body>
<h1>山田はなの自己紹介</h1>
<p>Webデザインを勉強しています。</p>
<ul>
<li>好きなもの：コーヒー</li>
<li>いま練習中：バナー制作</li>
</ul>
<a href="https://webdesign-mame.com/">よく読んでいるサイト</a>
</body>
</html>1行目の<!DOCTYPE html>は「これはHTMLです」という宣言で、毎回書く決まり文句です。
- 「jikoshokai.html」という名前で保存する。拡張子を .txt ではなく .html にするのがポイントです
- 保存したファイルをダブルクリックする。ブラウザが開いて、あなたの書いたHTMLがWebページとして表示されます
- 仕上げに、liを1行増やして上書き保存し、ブラウザを再読み込みする。書いた構造がそのまま画面に反映されるのを確認できたら成功です
飾りのない素朴なページですが、これは正真正銘のWebページです。ここに色と配置を足していくのが、次のレッスンのCSSです💡
よくある質問
次に学ぶこと
最後に整理します。
- HTML：中身に意味の札を付ける言語。見た目は決めない
- タグ：開始タグ・中身・終了タグの3部品。補足情報は属性（href・alt・class）
- まず読む8つ：h1〜h3・p・ul・li・a・img・strong・div
- 入れ子：箱の中に箱。head（情報）とbody（見える中身）
- 部位のタグ：header・nav・main・footer。第6章の部位名と対応
- 見出し：h1は1つ、番号順に。大きさで選ばず階層で選ぶ
骨組みが読めたら、次は見た目の番です。色・余白・配置をコードでどう指定するのか、CSSの基礎へ進みましょう。
この編の全体像はWeb制作・コーディング編トップ、コース全体の並びはデザイン基礎コースの目次からどうぞ。
友だち追加