ホームページ制作のロードマップ：一枚のページで学ぶ順番を決める

この記事の目次

HTMLの次は何を勉強すればよいのか。教材を増やす前に、一枚のページを少しずつ仕上げる道筋を作ってみましょう。ここで紹介するホームページ制作のロードマップは、初心者が次の練習を選ぶための編集上の提案です。習得期間や仕事を受けられる時期を示すものではありません。

題材は架空の星空観察会の案内です。会の内容、持ち物、集合場所を一枚にまとめます。申し込みシステムや参加者の情報管理は今回の範囲に含めず、掲載内容も練習用であると分かるようにします。

最初は「学ぶ名前」より、残すものを決める

紙に三つの見出しと短い本文を書き、案内を読む人がどの順で知りたいかを考えます。最初の成果物は、凝った画面ではなく案内の原稿です。情報が足りなければ、コードを書く前に不足をメモします。

作る範囲を決める段階は、初めてのホームページの企画も参考にできます。今回のロードマップでは、決めた原稿を同じ題材のまま加工し、練習ごとに作り直す範囲を小さくします。

HTMLはページの内容を構造化するために使います。まず見出し、説明の段落、持ち物の一覧を、役割に合わせて配置します。この段階の成果物は、装飾が少なくても内容をたどれるページです。

MDNの初めてのWebサイト制作では、HTMLによる内容の構造化、CSSによる装飾、JavaScriptによる対話的な動作、公開を扱っています。ここではその技術の役割を踏まえ、確認項目を付けて練習を分けます。

最初の確認は「会の内容と持ち物が別のまとまりとして読めるか」です。文字を大きくする方法で詰まったら、構造を決める作業と見た目を整える作業を混ぜていないか見直してください。

CSSでは文字や余白、配置などの見た目を扱います。色を増やす前に、本文の幅と見出しの間隔を決めます。成果物はHTMLを別のものへ作り替えるのではなく、先ほどの案内にスタイルを加えた版です。

広い画面だけで整えて終えず、狭い幅でも本文と持ち物の一覧を読みます。横にはみ出したら、その箇所を一つだけ記録して直します。点検にはスマートフォン表示で確認する項目を使えます。

「CSSを全部覚えたら次へ」では、終わりが決まりません。まず自分で選んだ二つの幅で必要な情報が読める状態を、今回の通過点にしてください。これであらゆる端末への対応が完了するという意味ではありません。

JavaScriptは、操作に応じた表示の変更などに使います。例えば持ち物の確認結果を表示する小さな練習を、案内とは別の練習ファイルで試します。入力、操作、結果の三つを言葉にしてから取り組みましょう。

静的な案内だけで目的を満たすなら、動きを付けるためにページの完成を待たせる必要はありません。一方、動作を作った場合は、想定外の入力や操作し直した場合も確認項目へ入れます。動いた一例だけを根拠に完了としないようにします。

コードを写して終わったと感じるなら、入力を変えて結果を予想する練習へ進めます。理解できていない箇所が見つかったら、その部分だけ前の段階へ戻って構いません。

手元の表示確認を終えたら、公開する場所を選び、公開先のURLで同じ案内が読めるかを調べます。手元で開けることと、他の人が公開先へアクセスできることは、別の確認です。さらに持ち物を一項目直し、変更が反映される手順も残します。

15分を目安に「原稿、構造、見た目、動作、公開」の五欄を作り、今ある成果物と未確認の項目を書いてください。時間は計画づくりの目安です。ページ全体をこの時間で完成させる課題ではありません。

次に取り組む一欄を選び、「見出しと一覧を置く」のように一つの作業へ絞ります。構造から始める場合は、無料のHTMLレッスンで提出物と確認項目を照らし合わせてみましょう。

記事についてのお問い合わせ

記載内容へのご質問や訂正のご連絡は、hello@junkbranding.comまでお願いします。