課題概要
下図にある、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ファイルをご確認ください。
