第4弾Webアプリケーションの公開

おはようございます😊まおです！
今週はStop Watchを作って公開してみました。

今回の成果

---

◼︎Stop Watch

https://tonamao.github.io/StopWatch/

今回もドットインストールにあるやつです🙋‍♀️

そろそろ自分でも何か作ってみたいな〜

◼︎ JavaScriptでストップウォッチを作ろう

https://dotinstall.com/lessons/stop_watch_js_v4



今回作ったアプリのポイントを書いてみました！

ボタンを切り替えにする

---

ストップウォッチのスタートとストップボタンの話です。

スタートとストップの「ボタンの役割」を考えてみました！
この２つのボタンって、交互にしか必要にならないボタンですよね！
スタートしたら次はストップなわけなので。

◼︎元のボタン

StartとStop、そしてResetのボタンが３つ並んでますね～

◼︎作ったボタン

ボタンは２つしかなく、押すと切り替わります。


ちなみにですが...

◼︎iPhoneのストップウォッチ

iPhoneも開始と停止で
同じボタンを切り替えて使うようですね！



そもそも必要のないボタンは減らすとかって
小さなことだけどUIを改良することになりますね！

フラットデザインを意識する

---

「css」「デザイン」とか調べてると出てきました。
フラットデザイン！！

要は、最近よくあるデザインってやつですかね！笑
なんというかペタペタした感じのやつです！←

デザインのデの字も知らない私なのでご容赦ください...（−＿−；）


ひと昔前は、スキューモーフィズムというデザインが流行っていたようです。
2013年ごろからこれに代わって、現在はフラットデザインが主流のようですね。
iPhoneのiOS6とiOS7を比べるとすごくわかるようです！

個人的にはInstagramのアイコン！

      

だいぶ変わってますね！

右の今のやつのがペタペタしてますね！ｗ

なんか青くなるの嫌！！笑

---

なんのこっちゃｗｗ



こういうことです！


文字として選択できちゃうんですよね～

それをアプリっぽく？できないようにしました！

うん...できないはずです！ｗ
パソコンからの方は試してみてください～

「文字」「青くなる」「いや」みたいな検索した気がしますｗｗｗ


CSSで制御しました！

user-select: none;

これを使いました。


例えば↓↓↓の文章。

この文章は選択できるよ

この文章は選択できないよ

こういうわけです。

<div>この文章は選択できるよ</div>
<div style="user-select: none;">この文章は選択できないよ</div>

これでおみくじアプリも改良しました～！！！

https://tonamao.github.io/test.first-omikuji/





次なにつくろうかな～～