授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 「部品を組み合わせて作る」ことに関係のない言葉はどれですか
- ユニバーサル
- モジュール
- コンポーネント
- ユニット
- プラグイン
- Webページの基本的な構造を指定するHTMLタグではないものはどれですか
- p
- header
- main
- footer
- nav
- Studioの「コンポーネント」について、間違っているものはどれですか
- 編集するときは全ページを編集する
- パーツを共通化して再利用できる
- 共通ヘッダーで使える
- 共通フッターで使える
- 共通ナビゲーションで使える
- Webサイトの作り方でもっとも適しているものはどれですか
- 部品を組み合わせてつくる
- 全体を一度につくる
- デザインを先につくる
- 最後までひとりでつくる
- すべてゼロからつくる
- Studioで要素を好きな位置に配置したい場合の指定はどれですか
- 絶対位置
- 相対位置
- 追従位置
- 相関位置
- 任意位置
Webサイトに必要なページ
Webサイトには、役割の異なる複数のページが存在します。
一般的なWebサイトでよく使われるページの種類と役割を学びましょう。
トップページと下層ページ
Webサイトにおいて、トップページは特別なものです。多くのユーザーは、トップページからWebサイトを利用することを好みます。また、多くのWebサイトはトップページから閲覧される前提で制作されています。
トップページは「インデックスページ」とも呼ばれ、index（目次）の役割を果たすことが多いです。また、LP（ランディングページ）のように、トップページだけで構成されるWebページもあります。
トップページは他のページと比べて、デザインやWebページの構成が異なる場合が多いです。
一方、トップページ以外のページは「下層ページ」と呼ばれます。下層ページはデザインの共通点が多く、ヘッダーやフッターを共通パーツとすることが多いです。
| トップページ | ・他の下層ページとは異なるデザイン ・インデックスページとも呼ばれる ・トップページから利用されることが多い |
|---|---|
| 下層ページ | ・他の下層ページと共通のデザイン ・検索エンジンやAI経由では下層ページから利用されることもある |
ページの種類とページの役割
一般的なWebサイトでよくあるページの種類と役割を学びましょう。
| ページの種類 よく使われるページ名 | ページの役割 |
|---|---|
| トップページ / | Webサイトの表紙になるページ。Webサイトの概要や、各ページへのリンクを掲載する。 |
| 紹介ページ /about | Webサイトで紹介したい企業や団体、サービスなどを詳しく紹介するページ。 |
| お問い合わせ /contact | ユーザーからの問い合わせを受けるためのページ。 |
| FAQ /faq | |
| プライバシーポリシー /privacy-policy | お問い合わせだけでなく、アクセスの際に利用する個人情報とその範囲を示すページ。「ウェブサイトポリシー」の場合も。 |
| お知らせ /information | 最新のニュースなどを時系列で紹介するページ。各お知らせの詳細ページがあることが多いです。 |
| 検索ページ /search | サイト内検索ができるページ。ページ数が多い場合などに便利。 |
| サイトマップ /sitemap | Webサイトを構成する各ページを整理してまとめたページ。 |
「任天堂（https://www.nintendo.com/）」のWebサイトにアクセスして、上記ページを探してください。見つけたら、テキストエディタ（VSCode）を使ってURLをまとめましょう。
課題の提出
課題を提出しましょう。
CampusApp
- 「出欠・課題」から提出しましょう
- 課題セクションにある今日の授業の欄から提出できます
Studio：ページの追加とリンク設定
Studioにログインしてください。
下層ページとして「ABOUT」と「CONTACT」を追加します。
「ABOUT」はページの追加で、「CONTACT」はABOUTのページを複製することで作成します。
その後、各ページを自由に移動できるように、リンクの設定をします。
ページの編集（復習）
- 「HOME」を編集します
- headerとfooterの間にボックスを追加する
- ボックスを横幅100%、縦幅640pxにする
- ボックスのタグの種類を「main」にする
- mainにテキストボックスを追加し、内容を「ABOUT」にする
- テキストボックスのタグの種類を「h1」にする
- テキストサイズを「40」にする
ページの追加
新しくページを追加します。
- 左メニューを開き「ページ」タブをクリック
- 現在のページ名をダブルクリックし、ページ名編集モードに
- ページ名を「HOME」にする
- 「ページ」を追加する
- ページ名をダブルクリックし、ページ名編集モードに
- ページ名を「ABOUT」にする
- ページ名右側のアイコンをクリックし、設定画面を表示する
- ページのパスを「about」にする
- 左メニューの「追加」タブをクリック
- 「コンポーネント」を追加する
- コンポーネント「header」を追加する
- コンポーネント「footer」を追加する
- headerとfooterの間にボックスを追加する
- ボックスを横幅100%、縦幅640pxにする
- ボックスのタグの種類を「main」にする
- mainにテキストボックスを追加し、内容を「ABOUT」にする
- テキストボックスのタグの種類を「h1」にする
- テキストサイズを「40」にする
ページの複製
既存のページをコピーして、新しいページを追加します。
- 左メニューを開き「ページ」タブをクリック
- 「ABOUT」を複製する
- ページ名をダブルクリックし、ページ名編集モードに
- ページ名を「CONTACT」にする
- ページ名右側のアイコンをクリックし、設定画面を表示する
- ページのパスを「contact」にする
- テキストボックスの内容を「CONTACT」にする
- テキストボックスのタグの種類を「h1」にする
- テキストサイズを「40」にする
リンクの設定
コンポーネント「header」のテキストボックス「HOME」「ABOUT」「CONTACT」に、それぞれリンクを設定して、ページを移動できるようにしましょう。
- 前提：テキストへのリンクは、以下の2種類の方法で設定できます
- 「テキストボックス」ではテキスト全体に設定することができます
- 「リッチテキスト」内では一部のテキストにリンクを設定することができます
- リスト要素へのリンクは左メニューの「リスト」タブから行います
- リストの「＋」から「URL」を追加します
- それぞれの文字列にリンクを設定します
- URLが有効（青丸が点灯）になっていない場合、ドラッグして接続します
- 「ライブプレビュー」を起動して、ページ間が移動できるかどうか確認してください
- ライブプレビューはStudioにおいて、現在の制作状況をリアルタイムで確認できる機能です
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。