WP-LOAD

LESSON / WP LOAD

制作課題：最初の自己紹介ページを完成させる

HTML・CSS・JavaScriptをつないだ自己紹介ページを完成させ、DevToolsで確認してGitへ保存します。

目安 120分 コース進捗 0 / 17

GOAL

このレッスンでできるようになること

  • 自分の内容へ変更した自己紹介ページを完成させられる
  • DevToolsを使って表示と動作を検証できる
  • 完成状態をGitの履歴として保存できる

制作課題で確認すること

ここまでに作ったページを、自分の内容へ変更して「最初の自己紹介ページ」を完成させます。

完成例とまったく同じ見た目にする課題ではありません。HTML、CSS、JavaScriptを正しくつなぎ、ブラウザで確認できることが目的です。

最初に完成条件を作業へ分ける

制作課題では、いきなりコードを書き換えず、制作要件をHTML、CSS、JavaScript、確認、Gitの作業へ分けます。1つ終わるごとにブラウザで確認してください。

次の図では、「最初に完成条件を作業へ分ける」で押さえる違いを左右で比較しています。

「最初に完成条件を作業へ分ける」で押さえる違いを左右で比較した図
「最初に完成条件を作業へ分ける」で押さえる違いの比較
  1. HTMLの見出しと紹介文を自分の内容へ変更する
  2. 必要なら画像を1枚追加し、内容に合う代替テキストを書く
  3. CSSで色、余白、文字サイズを調整する
  4. JavaScriptでボタン操作後の内容を変更する
  5. DevToolsで画面幅、Console、Networkを確認する
  6. 差分を確認してGitへコミットする

制作要件

制作要件を満たした自己紹介ページのパソコン表示例です。内容や配色は自分のテーマへ置き換えてください。

最初の制作課題として完成させる自己紹介ページのパソコン表示例
最初の制作課題として完成させる自己紹介ページのパソコン表示例

同じページをスマートフォンで開き、文章や画像が1列で読みやすく表示されることも確認します。

自己紹介ページをスマートフォン幅で1列に表示した例
自己紹介ページをスマートフォン幅で1列に表示した例
  • index.html、css/style.css、js/main.jsを分けて作ります。
  • ページ内に自分で考えた見出しと紹介文を表示します。
  • CSSで背景色、文字色、余白のうち2つ以上を変更します。
  • ボタンを押すと、紹介文または別のメッセージが変わるようにします。
  • 横幅320px程度まで狭くしても、横スクロールが発生しないようにします。
  • Chrome DevToolsのConsoleに赤いエラーがない状態にします。
  • 完成した状態をGitでコミットします。

HTMLは読む順番を優先する

CSSを外した状態でも、見出し、紹介文、ボタンの順番が自然に読めるHTMLにします。見た目の位置を合わせるためだけに、空の要素や改行を何個も追加しません。

次の図では、「HTMLは読む順番を優先する」の仕組みや関係を確認できます。

「HTMLは読む順番を優先する」の仕組みや関係を示す図
「HTMLは読む順番を優先する」の仕組みと関係

ボタンを押して内容を変える場合は、リンクではなくbuttonを使います。画像が内容を伝える場合は、何の画像か分かるaltを設定します。

進め方

  1. 前のレッスンで作ったファイルを保存します。
  2. HTMLの見出しと紹介文を自分の内容へ変更します。
  3. CSSの色や余白を変更します。
  4. JavaScriptで、クリック後に表示する文章を変更します。
  5. ブラウザを更新し、見た目とボタンの動きを確認します。
  6. DevToolsでConsoleとNetworkを確認します。
  7. git statusで変更を確認し、コミットします。

提出前に第三者の操作を想定する

自分はページの使い方を知っていますが、初めて見る人は知りません。ボタンの文言だけで何が起きるか分かるか、文字が小さすぎないか、Tabキーでも操作できるかを確認します。

ブラウザの表示幅を320px程度から広い画面まで動かし、途中の幅でも横スクロールや重なりが発生しないことを確認してください。

採点基準

次の4項目をすべて満たせば、STEP 01の制作課題は完了です。

  • 構造：HTML、CSS、JavaScript、画像用フォルダーが決めた構成で整理されています。
  • 表示：HTMLからCSSが読み込まれ、狭い画面でも内容がはみ出しません。
  • 動作：ボタンを押したときにJavaScriptで表示内容が変わります。
  • 確認と保存：DevToolsに読み込みエラーがなく、完成状態のGitコミットがあります。

うまくいかないときの確認順

  • ファイルを保存したか確認します。
  • HTML内のCSSとJavaScriptのパスを確認します。
  • Elementsで必要なHTMLがあるか確認します。
  • NetworkでCSSとJavaScriptを読み込めているか確認します。
  • ConsoleでJavaScriptのエラーと行番号を確認します。

原因を修正したら、同じ確認をもう一度行います。すべて満たせたら完了条件へチェックを入れ、完了ボタンを押してください。

完成後に振り返る

  • 最初に止まった場所はどこか
  • 原因をどのDevToolsパネルで確認したか
  • 次に同じ作業をするとき先に確認したいことは何か
  • HTML・CSS・JavaScriptのうち、まだ説明できないコードはどれか

説明できないコードが残っていても、すべてを暗記する必要はありません。どのファイルの何を変えると画面がどう変わるかを、自分の言葉で確認します。

STEP 01の到達点

これで、Webページが届く仕組みを理解し、自分のパソコンでHTML・CSS・JavaScriptをつないだページを作って確認できる状態になりました。

STEP 02では、完成見本画像を読み取り、HTMLとCSSの書き方を詳しく学びながらLPを制作します。

CHECK POINT

完了条件