cssのvwやanimation機能に今更ながら日進月歩を感じる。
2018
19
こんにちは。
結構前にショップのトップページをイジりました。
その時に驚いたのがvwやanimationの機能です。
私はhtmlとcssくらいしか使えないので、とても助かるとともに驚きました。
日進月歩、サマサマです。
PC用とスマホ用で別々に作ると管理が大変です。
そのため、PCとスマホ用一括で変更できるレスポンシブデザインにしています。
ざっくりと言えば、レスポンシブデザインとはPC用とスマホ用で同じプログラムを使うことです。
このレスポンシブデザイン、かつてはPCとスマホで画像の大きさを調整するのが大変でした。
PCに合わせればスマホでは大きすぎ、スマホに合わせればPCでは小さすぎ・・・。
その最たる原因が、PCとスマホの横幅の違いだったのです。
PCは横に広く、スマホは縦に広い（横が狭い）。
しかし、大きさをパーセントで指定すると縦幅を参照してしまうので上手に調整できませんでした。
それがvw（ビューワイド）で一気に解決しました。
vwは画面の横幅を参照するので、PCとスマホので横幅が変わっても簡単に調整できるようになったのです。
PCバージョン
スマホバージョン
↑vwを使っていないと、写真の位置や大きさがハチャメチャになります。
もう一つはanimationの機能です。
似たようなものは前からあったのですが、
animationは@keyframesと合わせて手軽かつ細かく様々な指定ができます。
例えば、
１～５秒はゆっくり動いて５～６秒は速く動き、６～１０秒で画面から消える
みたいなことができるのです。cssで！（正確にはcss3ですが。）
これによって、スライドショーみたいなものを手軽につくれるようになりました。
ラジオボタンを置いて疑似クラスつかって、みたいなことをしなくてよくなったのです。
アニメーションで絵と文字が移り変わります。
私が知るちょっと前から実装されていたみたいなので今更なのかもしれませんが、
本当に目から鱗でした。
いろいろ工夫すれば前から似たものは作れたのですが、痒い所に手が届く機能の追加ですね。
特にanimationなんか、小中学校の授業でも使えそうです。
手軽に動かせるって、素晴らしい！
それでは。
結構前にショップのトップページをイジりました。
その時に驚いたのがvwやanimationの機能です。
私はhtmlとcssくらいしか使えないので、とても助かるとともに驚きました。
日進月歩、サマサマです。
vwでレスポンシブデザインが簡単に。
PC用とスマホ用で別々に作ると管理が大変です。
そのため、PCとスマホ用一括で変更できるレスポンシブデザインにしています。
ざっくりと言えば、レスポンシブデザインとはPC用とスマホ用で同じプログラムを使うことです。
このレスポンシブデザイン、かつてはPCとスマホで画像の大きさを調整するのが大変でした。
PCに合わせればスマホでは大きすぎ、スマホに合わせればPCでは小さすぎ・・・。
その最たる原因が、PCとスマホの横幅の違いだったのです。
PCは横に広く、スマホは縦に広い（横が狭い）。
しかし、大きさをパーセントで指定すると縦幅を参照してしまうので上手に調整できませんでした。
それがvw（ビューワイド）で一気に解決しました。
vwは画面の横幅を参照するので、PCとスマホので横幅が変わっても簡単に調整できるようになったのです。
PCバージョン
スマホバージョン
↑vwを使っていないと、写真の位置や大きさがハチャメチャになります。
animation機能の充実
もう一つはanimationの機能です。
似たようなものは前からあったのですが、
animationは@keyframesと合わせて手軽かつ細かく様々な指定ができます。
例えば、
１～５秒はゆっくり動いて５～６秒は速く動き、６～１０秒で画面から消える
みたいなことができるのです。cssで！（正確にはcss3ですが。）
これによって、スライドショーみたいなものを手軽につくれるようになりました。
ラジオボタンを置いて疑似クラスつかって、みたいなことをしなくてよくなったのです。
アニメーションで絵と文字が移り変わります。
私が知るちょっと前から実装されていたみたいなので今更なのかもしれませんが、
本当に目から鱗でした。
いろいろ工夫すれば前から似たものは作れたのですが、痒い所に手が届く機能の追加ですね。
特にanimationなんか、小中学校の授業でも使えそうです。
手軽に動かせるって、素晴らしい！
それでは。