コンテンツのページの構造化

CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。

前提条件: この評価課題を実施する前に、コースの他の部分を履修しておく必要があります。 コースの残りの部分、 特に、文書とウェブサイトの構造に重点を置いて学習してください。
目的: ウェブページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。

開始地点

この評価を開始するには、すべての開始資産を含む zip ファイルを入手してください。

zip ファイルには以下のものが含まれています。

  • 構造的マークアップを追加する必要がある HTML
  • マークアップをスタイルするための CSS
  • ページで使用されている画像

例はローカルコンピュータで作成するか、あるいは CodePen, jsFiddle, Glitch などのサイトを使用して作業してください。

Note: もし行き詰まったら、私たちに助けを求めてください。このページの下にある評価またはさらなるヘルプの節をご覧ください。

プロジェクト概要

このプロジェクトでは、あなたの仕事はバードウォッチングのウェブサイトのホームページのコンテンツを取り、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは次のようなものです。

  • ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダー。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら 2 つの項目の下に表示されます。
  • ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの 2 つの列を含むメインコンテンツ領域。
  • 著作権情報とクレジットを含むフッター。

以下に適したラッパーを追加する必要があります。

  • ヘッダー
  • ナビゲーションメニュー
  • メインコンテンツ
  • ウェルカムテキスト
  • 画像サイドバー
  • フッター

また、する必要があることは次のものです。

  • 開始時に提供された既存の CSS のすぐ下に別の <link> 要素を追加して、提供された CSS をページに適用します。

ヒント

  • W3C Nu HTML Checker を使用して HTML、CSS、 SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。
  • この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
  • 提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。
  • 行き詰まって、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。

次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。

評価のための完成例。「バードウォッチング」という見出し、鳥の写真、ウェルカムメッセージを記載した、バードウォッチングに関するシンプルなウェブページ。

評価またはさらなるヘルプ

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方。

  1. 作品をオンラインの共有可能なエディター、例えば CodePen, jsFiddle, or Glitch に置いてください。
  2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    • 「手紙のマークアップのための評価希望」のようなわかりやすいタイトル。
    • すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    • 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください(上記のステップ 1 で述べたとおり)。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    • 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。

このモジュール内