HTML/CSS中級に突入:CSSのアニメーション機能は早く簡単に実装可能でとても便利【プログラミング初心者】

日々の学習

今日からHTML/CSS中級の学習に入りました。

しばらくJavaScriptの中級で停滞していましたが、現時点でこれ以上理解を深めることは不可能と判断し一旦進むことにした次第です。

HTML/CSSは理解しやすいので、他の言語に詰まったときに癒やされます。
とは言え、HTML/CSSも進むにつれ難しくなっていく様子。

学んだことを整理しながら進めていきましょう。

学習①:CSSのアニメーション

これは、ボタンなどにカーソルを乗せたり、クリックするとアニメーションするという仕様です。

「hover」で、マウスオーバー時に色を変えるような処理はよく行っておりました。
それに、「toransition」プロパティを追加することで時間的な変化を表現することができます。

変化のパターンや秒数を指定することで、色々なアニメーションを生み出すことができるようになります。
CSSだけで簡単に実装ができるので、WEBデザインの幅が広がりそうです。

JavaScriptを使用するほどではない時など、重宝しそうですね。

学習②:スマホ用サイトの作り方

今まで、PCの画面用のプログラミングを行ってきました。
ここでは、スマホ用に画面を切り替える方法を学びます。

「レスポンシブデザイン」という言葉は今まで耳にしたことがありましたが、スマホへの対応方法は実に4種類もあるとのこと。
例えば、別ドメインで振り分けたりするといった手法です。

主流はレスポンシブデザインとのことで、これからこの方法でスマホ対応を学んでいきます。

おわりに

簡単な動きであればCSSで十分なのでJavaScript不要では、とjsが苦手な私は考えたくなってしまいました。
やはり内容の理解ができると、学習もはかどります。

これからHTML/CSSの上級に進み、レスポンシブデザインのサイトを実際に作る作業に入ります。
そこまで終わらせてからJavaScriptに戻って再び特訓します。

どのみちJavaScriptから逃げることはできないので、頑張ってまいります。

タイトルとURLをコピーしました