講座終了課題

• 課題概要
• サイト全体のコーディング要点
• 使用する画像について
• 1.一覧ページ
• 全体
• event.html ＆ info.html
• about.html
• 2.詳細ページ

課題概要

下図にある、index.html以外の5ページを作成してください。

• イベント一覧 ----------- event.html
• お知らせ一覧 ------------- info.html
• ズーロッパとは -------- about.html
• アライグマの握手会 --- event1.html
• 園長からの挨拶 ------- about1.html

サイト全体のコーディング要点

• レスポンシブにコーディングする
• フォルダを使った、ページの階層化はしなくて良い
• スタイルシートファイルは style.css 1つのみで作成する

index.htmlを作成時に書いたCSSクラス、スタイル指定も活用してください。
新しく作成するページにも対応できるよう、必要に応じてクラス名やセレクタ、スタイル指定は調整して頂いて構いません。

◆ Advance編について

本レッスン以降にある【Advance】編は、ステップアップのための追加解説になっています。
ご受講は任意です。

ここまでで学習した内容でも、課題ページのコーディングは可能です。
そのまま進めても、【Advance】の内容でコーディングをしてから他ページの制作をされても構いません。

使用する画像について

Webページに使用する画像は、当レッスンの“レッスン素材”よりダウンロードいただけます。

【design-kadaiフォルダの中身】

• images ： Webページ制作用画像
• 一覧ページ（画像）：デザイン画像
• 詳細ページ（Ai）：詳細ページのデザインデータ

1.一覧ページ

全体

一覧ページ全体に共通する設定は、以下のとおりです。

• サイトロゴを囲うタグをh1以外にする（divなど）
• ヘッダー下にパンくずリストを作る
• コンテンツ最上部の見出しをh1にする

5色線の上にある見出しのフォントサイズは、index.htmlの各セクション見出しと同じにします。

event.html ＆ info.html

基本レイアウトはindex.htmlの「楽しいイベントいっぱいだよ」「お知らせ」セクションと同じです。
違いは下記の２つ。

• 1ページに表示する記事の数は8件
• 下部にページネーションを追加

about.html

基本レイアウトはindex.html「ズーロッパ東京とは」のセクションと同じです。

ただし、記事が複数並ぶ性質から、about.htmlではタブレット幅から画像とタイトル等が横並びになる設定です。
ここだけ変更してください。

2.詳細ページ

デザイン詳細、画面幅によるレイアウト変更は aiファイルをご確認ください。