【Webデザイン】スクロールエフェクト・Flexbox・Grid・Vue.js入門など

【Webデザイン】スクロールエフェクト・Flexbox・Grid・Vue.js入門など

どうも、氷犬です。

Webデザイン・技術のまとめサイト、コリスの最新記事から気になったものをまとめました。

Javascriptライブラリ・Sal.js

これを使うとスクロールに連動したアニメーションが簡単に!わずか2KBの超軽量JavaScriptライブラリ -Sal.js

Sal.js公式:https://mciastek.github.io/sal/

スクロールすると、ふわっと浮かびあがるエフェクトを簡単に実装できる軽量ライブラリです。

 

第一印象が大事なコーポレートサイトなどに使いやすくていいかもですね。

Javascriptは全然勉強したことないですが、個人的にはゼロから始めるより、こういうライブラリから入った方がとっつきやすいかなと思います。

GridシステムとFlexboxのチートシート

CSS GridとFlexboxでの実装で役立つ!各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート

HTML/CSSで、要素を横並びにするためには、float・Flexbox・Gridシステムという3つの技術があります。

HTMl/CSS入門書では、要素を浮かせるfloatが定番ですが、要素が浮くので少し処理が面倒な感じになるんですよね。

 

現在の主流はFlexboxだと思うので、プログラミング学習中の人は折を見て、Flexboxも身につけておくといいと思います。

Gridは使ったことないんですけど、Flexboxより柔軟にレイアウトが組めるようです。そのうち勉強しようかなと。

Javascriptのフレームワーク『Vue.js』

Vue.jsにjQueryからの移行方法も詳しく解説!Vue.jsの実践的な使い方がこの一冊でばっちり分かる -Vue.js入門

jQueryがJavascriptを簡単に書けるようにしたライブラリということはおなじみだと思います。

Vue.jsも同様に、Javascriptをサクッと書けるようにしたフレームワークですね。

規模感としては、jQuery<Vue.js<Reactというイメージ。

 

全然使ったことないんですけど、エンジニア界隈で流行りまくってるので個人的に興味があります。

「新しい技術には興味を持った方がいいよね」ということで、備忘録的な紹介です。

WebデザイナーのためのVue.js事始め

プログラミングとWebデザインの情報収集

プログラミング・Webデザインの世界は、流行り廃りがとても激しいですね。生き残っていくためには、新しい技術や流行にどんどん飛び乗っていくのがよさそうです。

ただ、プログラミング学習中の人にとっては、「何に使うかよくわからない」のも事実なので、その辺りは本や動画教材を使いつつ、とりあえずマネしてみるのがいいかなと思います。

 

個人的には、技術単体にはあまり興味がないので、必要があれば学習するくらいのテンションで情報収集してますね。

ちなみに今はPHPを週末に学習しています。平日もコード書かなければと思いつつ、ブログを書いたら1日が終わる日々です…

おまけ

本ブログ『氷犬の犬小屋Works』では、プログラミング学習・Web制作・税金などのテーマで記事を書いています。

3,000文字程度で、必要な情報をしっかりまとめていますので、ぜひ覗いてみてくださいm(_ _)m

Tags: