コロナ禍で外出できずにいる両親のために「脳活クイズ」を作ってみた！

作った経緯

こんにちは。wataminoです。
最近、両親と電話で話をすると、「あれ」、「あの人」、「その人」という「これ・それ」言葉がすごく多いのに気が付きました。
今に始まったことではないのですが、人とあまり会話しなくなったからか、結構頻繁にこれそれ言葉がでるので、Webアプリ作成の勉強をしていることもあり、今回、「脳活クイズ」なるものを作ってみました。

実際クイズに挑戦してみてください。

さあ、問題です。あなたは何問とけますか？
（ここをクリックしたらクイズが始まりますよ！）
　→　https://gallant-engelbart-dec721.netlify.app/

開発はCodePen

今回の開発には、CodePenを使いました。
※codepenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。

初めて使ってみましたが、これなかなか使いやすいです。
直接HTML,CSS,JavaScriptを書き込んでいくと、画面下半分のエリアにリアルタイムでコードの内容が表示されます。

codepenで画像を挿入する

クイズに関連した画像を挿入したいものの、何を使ったら簡単にすぐできるのか？といろいろ模索した結果、「postimages」というサイトを見つけました。
無料でしかも登録せずとも使えるので、おすすめです。
使いかたなどnoteにまとめたので、良かったらご覧ください。
https://note.com/watamino/n/n777e2fd992d0

今回できなかったこと

webアプリ開発は初めてで、しかも技術力もさほどないためやりたいことがなかなかできませんでした。
・画像処理をスタイルシートで整えられなかった。（styleに直書き）
・クイズの外だしができなかった。（コードに直書き）

サンプルコード

See the Pen 課題1 by watamino (@watamino) on CodePen.

# カスタマイズして使ってください コードを見ていただくとわかると思いますが、クイズは直書きしています。 （技術不足もあり、今回はあえなく断念しました） なので、クイズの文言や画像などを直していただければ、***「あなた仕様のクイズ」***がすぐに完成します。国旗あてクイズとか、地図から県を答えてみたり等々、いろいろ使えると思うので、よかったら活用してみてください。 # おわりに なかなか思うように開発ができず、時間だけが経ってしまいましたが、何事も経験が大事！ これを機にWebアプリ開発のことを勉強していこうと思います！