久々の更新です。最後の更新が2020年の4月なのでほとんど3年ぶりです。
3年て。。。
光陰矢の如しとは言いますが、改めて月日の経つ速さに愕然とします。間違えて人生を倍速視聴しているのでは無いかと心配になるレベル。
これまでも久々に何か書こうかと何度も思ってきたのですが、何となくめんどくさくて放っておいた結果ここまで来てしまいました。色々と書くネタはあったはずなんだが。。。
というわけで今回なんですが、これだけ期間が空いてHTMLやCSSの知識も曖昧になってしまったので、リハビリがてらにサイトの外観を少しリニューアルしてみました。具体的な変更は以下の画像の通りです。
![リニューアル前のサイト外観](/images/article19/mysite_before.png)
↓
![リニューアル後のサイト外観](/images/article19/mysite_after.png)
やはり文字だけでは何となく寂しいのでサムネイル画像を追加したことと、タグのデザインをそれっぽくしてみたというのが今回の変更内容です。また画像ではわからないですが、ページを表示した際のアニメーションを追加しています。ちゃんと動作していればページを開いた瞬間にサイトのコンテンツが下からぬるっと上がってきたと思うのですが…、どうでしょうか。
今回実装してみて、こういうアニメーションがCSSのみで実現できるというのが意外でした。最近のおしゃれなサイトなんかでスタイリッシュなアニメーションを見かけるたびに、JavaScriptでコードを書いてるだろうから実装はめんどくさいだろうなと思っていたのですが、CSSのanimation
や@keyframe
を使えば割と簡単にそれっぽいアニメーションを動かすことができるようです。やっぱりアニメーションがあるだけで今風というか「モダン」な感じがするので今後も使っていきたいですね。