TOP

制作にあたって

制作意図

被災時の限られたものしか使えない状況の中では知恵と工夫で助かる命もあります。
本サイト紹介したアルミホイルとラップという基本的にはどの家庭にもあるものを使ったライフハックが誰かの頭の片隅に残って、ひとりでも多くの命が助かると良いという思いで制作しました。

ターゲットユーザ

ターゲットユーザは基本的にはアルミホイルとラップを知っているすべての人なので、小さい子からご年配の方までです。
被災したときに家族や友達など一緒にいる人の中でひとりでもこれらの知識を持っていれば共有して実践することができます。
なので、特定の人というよりは、より多くの人へ向けて作ろうと考えました。

目指した習得技術と自己学習成果

・半透明の色を指定したい。
→rgba()で色を指定することで実現

・テキストを左から右に流す。
→CSSで親要素にoverflow:hiddenを指定してはみ出ている要素を隠した。

・追従するトップへ戻るボタンの作成。
→CSSにposition: fixed;を入れて画面の決まった位置に固定

・ボタンの実装。
→ボタンデザインのサイトを参考に自分の理想に近づけるため変更しつつコードの意味を理解できた。

今回の目標は春課題よりも多くの技術を取り入れ、シンプルで統一感を出すことで伝えたいことを無駄なく伝えられるようにすることでした。 そのため、ボタンや見出しのデザインの仕方を学び春課題よりも見た目を意識しつつ、シンプルなデザインで統一させることができたと思います。 今後、より多くの技術を習得するため様々なコンセプトでWeb制作をしてみたいと感じました。

参考文献

・アルミホイルとラップの活用術
最強の防災グッズ説!災害時に役立つ「ラップ」活用法
【災害時のライフハック】アルミホイル&ラップの便利ワザ!
防災リュックやキャンプグッズに入れておくと役に立つ!緊急事態のラップ・アルミホイルの使い方

・HTML CSSについて
画像の上におしゃれに文字やボタンをのせる方法
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介
HTMLで画像の下に文字を入れる方法を現役エンジニアが解説【初心者向け】
HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】
HTMLとCSSのコピペでできるボタンデザイン50選