HTMLの画像とフォーム：パス・alt・labelを使って内容を充実させる
画像の相対パス、alt、幅と高さ、labelとinput、requiredを学び、CSSとJavaScriptの土台になるHTMLを完成させます。
第3回では、ページに説明図と入力フォームを追加します。ここで作るHTMLが、以降のCSSとJavaScriptの共通の土台になります。画像を表示できることに加え、画像が見えない場合の説明や、入力欄と見出しの対応も確認します。
画像ファイルを正しく読み込む
相対パスとフォルダーの関係
この回の完成コードZIPに含まれるworkshop.svgを、index.htmlと同じフォルダーに置きます。src="./workshop.svg"の./は現在のフォルダーを表します。画像をimagesフォルダーへ移したら、パスも./images/workshop.svgへ変更する必要があります。
自分の写真で試す場合は、使用する権利のある画像を使い、実際のファイル名と拡張子を一致させます。パソコン内で表示できても、公開先で大文字小文字が区別されることがあります。Photo.jpgとphoto.jpgの混在を避けましょう。
altと幅・高さを設定する
説明図には、そこで伝えている情報を短く表すaltを付けます。周囲の文章と重複する単なる装飾ならalt=""にして、不要な読み上げを減らせます。ファイル名だけを説明として使わないでください。
widthとheightは画像の縦横比をブラウザーへ伝える助けになります。今回は640×480の図です。画面に合わせた縮小はCSSで行います。最初に見える主要画像を遅延読み込みにせず、ページ下部の画像を追加する場合にloading="lazy"を検討します。
入力フォームの構造を作る
labelとinputを結び付ける
labelのfor="name"とinputのid="name"を対応させます。ラベルをクリックすると入力欄にフォーカスが移るか確認してください。入力前のヒントを示すplaceholderだけでは、入力後に項目名が消えるのでラベルの代わりにしません。
name="name"はデータの項目名で、idとは役割が違います。第9回ではFormDataを使ってnameから入力値を取得します。requiredは必須入力、maxlength="40"は長さの上限です。ブラウザーによるチェックだけで、サーバーが受け取るデータの安全性を保証できるわけではありません。
今回は送信を行わない
実際のフォーム送信には受け取り先が必要です。この連載では外部へ送信せず、画面内で入力内容を確認する練習をします。第9回までは送信ボタンをdisabledにし、JavaScriptの準備ができてから有効にします。実在の連絡先や秘密の情報を入力する必要はありません。
フォームのmethodやactionを省略したまま送信すると、通常は現在のURLへのGET送信になります。学習用ボタンを勝手に有効化して、個人情報をURLに含める使い方はしないでください。
共通のHTMLを完成させる
index.htmlを置き換える
以下がこの回のHTMLです。classは後からCSSを適用する目印で、idはページ内リンクやJavaScriptから要素を特定するために使います。同じclassは複数の要素で再利用できます。メニューとテーマのボタンは、JavaScriptを導入するまでhiddenで隠しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="HTML・CSS・JavaScriptで作る、学習会紹介サイトの制作サンプルです。">
<meta name="robots" content="noindex">
<title>まなびのアトリエ | Web制作の学習サンプル</title>
</head>
<body>
<a class="skip-link" href="#main">本文へスキップ</a>
<header class="site-header">
<div class="container header-row">
<a class="brand" href="#top">まなびのアトリエ<span aria-hidden="true">.</span></a>
<button id="menu-toggle" class="button button-secondary" type="button" aria-controls="site-nav" aria-expanded="false" hidden>メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<a href="#lessons">学べること</a>
<a href="#about">私たちについて</a>
<a href="#contact">体験フォーム</a>
</nav>
<button id="theme-toggle" class="button button-secondary" type="button" aria-pressed="false" hidden>ダークモード</button>
</div>
</header>
<main id="main">
<section id="top" class="hero">
<div class="container hero-grid">
<div>
<p class="eyebrow">LEARN / MAKE / SHARE</p>
<h1>学びを、かたちに。<br>サイトを作ろう。</h1>
<p>HTMLで内容を組み立て、CSSで整え、JavaScriptで動かす。小さな一歩を、公開できる作品へ。</p>
<a class="button" href="#lessons">学習の流れを見る</a>
</div>
<img src="./workshop.svg" alt="HTML、CSS、JavaScriptの順番でWebサイトを組み立てる図" width="640" height="480">
</div>
</section>
<section id="lessons" class="container section" aria-labelledby="lessons-title">
<p class="eyebrow">01 / CURRICULUM</p>
<h2 id="lessons-title">3つの技術を、ひとつの作品に。</h2>
<div class="cards">
<article class="card"><span class="badge">STEP 01</span><h3>HTMLで伝える</h3><p>見出し、文章、画像、リンクで、情報の意味と順序を作ります。</p><a href="#contact">HTMLの学習を相談する</a></article>
<article class="card"><span class="badge">STEP 02</span><h3>CSSで整える</h3><p>色と余白から、スマートフォンでも読みやすいレイアウトへ。</p><a href="#contact">CSSの学習を相談する</a></article>
<article class="card"><span class="badge">STEP 03</span><h3>JavaScriptで動かす</h3><p>クリックや入力に応じて、ページの状態を変更します。</p><a href="#contact">JavaScriptの学習を相談する</a></article>
</div>
</section>
<section id="about" class="section section-tint" aria-labelledby="about-title">
<div class="container about-grid">
<div><p class="eyebrow">02 / ABOUT</p><h2 id="about-title">仕組みがわかると、<br>作ることが楽しくなる。</h2></div>
<div><p>このページは、架空の学習会を題材にした制作サンプルです。完成形を一度に覚えず、ファイルを少しずつ変更して違いを確かめます。</p><ul><li>ブラウザーで結果を確認する</li><li>キーボードでも操作してみる</li><li>別の画面幅でも読みやすくする</li></ul></div>
</div>
</section>
<section id="contact" class="container section" aria-labelledby="contact-title">
<p class="eyebrow">03 / TRY IT</p>
<h2 id="contact-title">体験フォーム</h2>
<p id="form-help">入力確認の練習です。情報はサーバーへ送信されません。架空の名前で試してください。</p>
<form id="contact-form" aria-describedby="form-help">
<div class="field"><label for="name">お名前（必須）</label><input id="name" name="name" autocomplete="name" required maxlength="40"></div>
<div class="field"><label for="course">学びたい内容</label><select id="course" name="course"><option value="HTML">HTML</option><option value="CSS">CSS</option><option value="JavaScript">JavaScript</option></select></div>
<button id="confirm-button" class="button" type="submit" disabled>入力を確認する</button>
<p id="form-result" role="status" aria-live="polite"></p>
</form>
<noscript><p>入力確認にはJavaScriptが必要です。記事と学習内容はそのまま読めます。</p></noscript>
</section>
</main>
<footer class="site-footer"><div class="container"><small>まなびのアトリエ — Web制作の学習サンプル</small><a href="#top">先頭へ戻る ↑</a></div></footer>
</body>
</html>図とフォームを確認する
index.htmlを開くと説明図が表示され、入力欄と選択欄が操作できます。この段階で入力確認ボタンが押せないのは意図した状態です。noscriptはJavaScriptが無効な環境に向けた説明ですが、スクリプトの読み込み失敗すべてを検知する仕組みではありません。
HTMLだけで点検する習慣を付ける
キーボードで操作する
マウスを使わず、Tabキーでリンク・入力欄・選択欄を順に移動します。操作する対象が見えるか、ラベルがわかるかを確かめてください。disabledのボタンは通常フォーカス順から外れます。
練習問題
図を別の場所へ移し、相対パスを直して再表示してください。次に選択肢へ「HTMLとCSS」を追加します。optionの表示文字とvalueを対応させましょう。図の説明を自分の言葉で書き直したら、次回はこのHTMLへCSSを読み込みます。
参考資料
この回の完成版と学習の続き
第3回の見本をブラウザーで開く · 第3回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。