テーマ
これまで学んだ内容を使って、
自己紹介ページ、または 学科紹介ページ を作る
所要時間
約60分
課題内容
次のどちらかを選んで、1ページ作成してください。
- 自己紹介ページ
- 学科紹介ページ
つまり、授業全体の総まとめとして、
「内容・見た目・動き」をひとつのページにまとめる課題です。
必須条件
以下の項目を入れてください。
- タイトルを入れる
- 見出しを入れる
- 紹介文を入れる
- 箇条書きを3項目以上入れる
- 画像またはイラストの代わりになる要素を入れる
- ボタンを2つ置く
- ボタンを押したとき、文章が変わるなどの変化をつける（2箇所以上）
- CSSまたはBootstrapで少し見た目を整える
余裕がある人向け
- 色を変える
- カードデザインにする
- Bootstrapのボタンやカードを使う
- 文章を2段階で変える
- 学科紹介ページの場合、特徴を箇条書きで追加する
課題説明
この課題では、HTMLの雛形をこちらで用意しています。
そのため、ゼロから全部を書く必要はありません。
みなさんには、その雛形を使って中身を完成させてもらいます。
入れてほしい内容は次の通りです。
- タイトル
- 見出し
- 紹介文
- 画像、または画像の代わりになる要素
- ボタン
- ボタンを押したときの変化
- CSSまたはBootstrapによる見た目の調整
つまり今日のポイントは、
- 内容を書くこと
- 見た目を少し整えること
- ボタンで変化をつけること
の3つです。
雛形の説明
では、雛形をDownload（右クリック、対象をファイルに保存）しましょう。
メモ帳で開いて見てください。
この雛形には、最初から
- タイトルを書く場所
- 紹介文を書く場所
- ボタン
- ボタンを押したときに動くJavaScript
が入っています。
まず、
「ここにタイトル」
「ここに紹介文を書いてください」
となっている部分を書き換えてください。
たとえば自己紹介ページなら、
- タイトル：自己紹介ページ
- 見出し：〇〇です
- 紹介文：趣味や興味のあること
のようにできます。
学科紹介ページなら、
- タイトル：学科紹介
- 見出し：〇〇学科について
- 紹介文：学べること、特徴、目標
のようにできます。
JavaScriptの説明
ボタンには、最初から簡単な動きが入っています。
ボタンを押すと、文章が変わるようになっています。
この部分も、自分の内容に合わせて変えてください。
たとえば自己紹介ページなら、
- 「よろしくお願いします！」
- 「趣味は音楽を聴くことです。」
などに変えてもよいです。
学科紹介ページなら、
- 「この学科ではWeb制作を学べます。」
- 「興味があればぜひ調べてみてください。」
のようにしてもよいです。
見た目の説明
見た目は、今のままでも最低限できています。
ただし、余裕がある人は少し工夫してみてください。
たとえば、
- 文字の内容を変える
- ボタンの色を変える
- 見出しを追加する
- 箇条書きを入れる
- Bootstrapのクラスを追加する
といった工夫ができます。
学科紹介ページなら、特徴を3つ並べるのもよいです。
自己紹介ページなら、好きなことを箇条書きにしてもよいです。
作成開始
それでは、ここから作業を始めてください。
進め方としては、次の順番がおすすめです。
- 自己紹介ページにするか、学科紹介ページにするか決める
- タイトルと見出しを書き換える
- 紹介文を書く
- ボタンを押したときの文章を変える
- 最後に見た目を少し整える
もし何を入れたらよいかわからない人は、
まずは文章を1つ書き換えるところから始めてください。
全部を大きく変えなくても大丈夫です。
まずは完成させることを優先してください。
たとえば
自己紹介ページにする人は、次のような内容で大丈夫です。
- 名前
- 趣味
- 好きなこと
- 最近がんばっていること
学科紹介ページにする人は、次のような内容で大丈夫です。
- 学科名
- どんなことを学ぶか
- 将来につながること
- 学科の特徴
迷ったら、まず短い文で1つずつ入れてください。
長く書く必要はありません。
提出前チェックリスト
完成した人は、次の点を確認してください。
1. 内容の確認
- タイトルが入っている
- 見出しが入っている
- 紹介文が入っている
- 箇条書きを3項目以上入れた
- 自己紹介ページまたは学科紹介ページとして内容が合っている
2. 見た目の確認
- CSSまたはBootstrapを使っている
- Bootstrapのクラスを2つ以上使った、
またはCSSで複数の見た目を調整した - 文字やボタンが見やすい
- 背景色や余白など、見た目を整えた
- 画像、または画像の代わりになる要素を入れた
3. 動きの確認
- ボタンがある
- ボタンを押すと文章が変わるなどの変化がある
- ボタンを押したとき、2か所以上に変化をつけた
- ボタンを押して、正しく動くことを自分で確認した
4. 最後の確認
- ページを開いて、内容が正しく表示される
- 誤字や入力もれがない
- 雛形の文章を自分の内容に書き換えた
- 保存できている
- 提出の準備ができている
提出する直前に確認
- ファイル名を確認した
- 保存できている
- 指示された方法で提出できる