目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- Webサイトの「企画」を正しく説明している文章はどれですか
- Webサイトの目的やコンセプトを考えること
- Webサイトを制作すること
- Webサイトをデザインすること
- Webサイトを更新すること
- Webサイトの情報を集めること
- Webサイトの「実装」を正しく説明している文章はどれですか
- Webサイトのコーディングやプログラミングをすること
- Webサイトの目的やコンセプトを考えること
- Webサイトのデザインをすること
- Webサイトの動作確認をすること
- Webサイトのバージョンアップをすること
- Webサイトの「メンテナンス」を正しく説明している文章はどれですか
- Webサイトの情報を更新したり、プログラムのバージョンアップをすること
- Webサイトの目的やコンセプトを考えること
- Webサイトのデザインをすること
- Webサイトのコーディングやプログラミングをすること
- Webサイトの動作確認をすること
- CMS「Studio」の特徴として間違っている文章はどれですか
- Studio専用のソフトウェアが必要である
- コードを書かずにWebサイトを作成できる
- テンプレートを使わずWebサイトを作成できる
- 他の人と一緒にWebサイトを作成できる
- ブラウザだけでWebサイト作成ができる
- Webサイトの制作工程で正しい順番はどれですか
- 企画と設計＞デザインと実装＞公開とメンテナンス
- 企画と設計＞公開とメンテナンス＞デザインと実装
- 公開とメンテナンス＞デザインと実装＞企画と設計
- 公開とメンテナンス＞企画と設計＞デザインと実装
- デザインと実装＞企画と設計＞公開とメンテナンス
WebサイトとWebページ
Webサイトの構造
Webサイトは1ページ以上のWebページの組み合わせです。
ある会社のWebサイトの構造（サイトマップ）
- トップページ
- 会社について
- アクセス
- 会社沿革
- リクルート情報
- CSR情報
- 商品とサービス
- 検索
- 商品一覧
- サービス一覧
- サポート
- お知らせ
- お知らせ一覧
- お問い合わせページ
- よくある質問と回答
- プライバシーポリシー
Webページの構造
Webページはその構造がおおむね決まっています。また、その構造を指定するためのHTMLタグが準備されています。
| header | ヘッダー | ロゴ、ヘッダーメニュー（nav）などを収める Webサイト内で共通していることが多い |
|---|---|---|
| footer | フッター | コピーライト、フッターメニュー（nav）などを収める Webサイト内で共通していることが多い |
| main | メイン | コンテンツを収める ページごとに内容が異なる |
| nav | ナビゲーション | メニューやパンくずリストを収める |
| article | 記事 | 記事を収める |
| section | セクション | 段落や写真を収める |
| div | 意味のない箱 | いろいろな要素を収める |
Studio：ボックス
Studioにログインしてください。
Studioで作ったWebサイトは「ボックス」と呼ばれる部品を組み合わせることでできています。
- Studioはボックスを組み合わせてレイアウトします
- 画像もテキストもアイコンもすべてボックスです
- ボックスは並べ方のルールを決めることができます
- ボックスの中にボックスを入れる（入れ子構造にする）ことができます
ボックスを体験する
プロジェクトからデザインエディタを起動して、ボックスを体験してみましょう。
- ボックスを配置してみよう（divを上から下に3つ）
- ボックスのサイズを変更してみよう（3つとも横幅を最大に、真ん中の縦幅を640pxに）
- ボックスの種類を変更してみよう（最上部をheaderに、真ん中をmainに、最下部をfooterに）
- ボックスに名前をつけてみよう（IDによる命名）
- mainボックスの中に別のボックスを配置してみよう（入れ子構造）
- 新しく追加したボックスをドラッグアンドドロップでmainボックスの中に移動させてみよう
- ボックスの中にテキストボックス（上から1、2、3）を追加してみよう
- mainボックス内での位置を指定してみよう（左上、真ん中上、右上、真ん中左、中央、真ん中右、左下、真ん中下、右下）
- mainボックスの中にさらに4つのボックスを配置してみよう
- 追加したボックスの中にテキストボックス（4、5、6、7）を追加してみよう
- mainボックス内での方向と折り返しを設定してみよう
マージンとパディング
ボックスにはそれぞれ、マージン（外側の余白）とパディング（内側の余白）を設定することができます。ボックスの周囲にカーソルを持っていくと、その位置で「サイズ変更モード」「マージン変更モード」「パディング変更モード」が切り替わります。
| サイズ | ブラックの矢印 |
|---|---|
| マージン | オレンジの矢印 |
| パディング | グリーンの矢印 |
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。