HTML作業記録





作業1

① のらねこページから作り始めました。

作業1

②授業サイトのマニュアルにあったコードをそのまま貼り付けて、タイトルを赤の大文字にしました。

作業2

③ タイトルをゴシック体にしました。写真を横並びにしました。 写真のサイズを揃えていなかったのでうまく並ばず、全部の写真を上げなおしました。

作業3

④ ネコの性格ページを作りました。

作業4

⑤ トップページを作りました。 授業サイトの中にあったサンプルサイトを参考にしました。

作業5

⑥ おすすめレストランのページを作りました。ボタンのデザインや色を変えてみました。

作業6

⑦ トップページのタイトルを変えました。 見出しやボタンの位置を、左端にスペースを入れることで調整していたので、それをやめてすべてセンタリングしました。

作業7

⑧ 表の体裁を整えました。

作業8

⑨ のらねこデイリースナップのページを追加しました。リンクボタンを6つに増やしました。

作業9

⑩ 作業記録のページを作りました。
(このページです。)

作業9

⑪ ねこの写真を充実させました。

⑫ タイトルとリンクボタンと画像に影をつけました。リンクボタンを大きく丸くしました。 開いたときに見出しが少し動くようにしました。

作業9

⑬ Google Mapのリンクボタンを付けました。



● 作成の感想・反省点

見出しやリンクボタンなど、6つのページの共通部分の配置を揃えるのが大変でした。

ねこの写真と情報を集めるという本筋とは違うところに時間がかかりました。

iPadminiを見ながら作っていたら、PCやスマホだと画像が次の段に行くなどレイアウトが変になっていることに途中で気付いて、 どれで見ても大丈夫なように修正するのが大変でした。




©2025 - by Makiko Noma