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