cording

下記の記事を参考にして、waypoint.jsでスクロールに連動してクラス名を追加し、さらにmobile ON/OFFをつけるカスタマイズをしてみました。今回はjQueryではなくJavaScript版を使用しています。

...

アニメーション、したいですよね。いまウェブサイトにアニメーションを実装するのに何がいいのか？を考えてみました。

必須で実現したいこと

個人的には以下です。

手軽に導入できる
スクロールの可

VS CodeにSASS/SCSSファイルのコンパイルが簡単にできる拡張機能（エクステンション）「Easy Sass」をインストールする方法をご紹介します。

extensionsをクリック

左サイドバーメニューにあるエクステ ...

SVGスプライトを使用してコマ割りアニメーションを作ってみました。以下の記事を参考にさせていただきました。

CSSスプライトとstepsを使ってアニメーション画像を作ろう

今回作ったサンプルはこちらです。

compassを使っていないけどスプライト画像だけ作成したかったので、generatorを探してみました。以下、今回行った手順です。

animate CC でアニメーションを作成する

こんな感じの1秒24フレームのアニメーシ ...

anime.jsを使ってSVGロゴを線画で描画し、最後に色を塗りつぶすというサンプルを作成したのでご紹介します。

デモ

こちらが完成したデモです。

See the Pen
NWWLJep by 荒井 潔子 ...

JavaScriptファイルのリンクは、<header>に書くのか？</body>の直前に書くのか？読み込み速度を考慮した上での結論は以下です。

結論

<header></heade ...

最近のWeb制作で特に重視されているのが、表示スピード。表示スピードをあげるために画像サイズの最適化は必須対応項目です。

画像最適化するための2019年現在のベストプラクティスを調べてみました。

解像度にはsrcse ...

コーディングが終了したら、HTML・CSSの文法チェック、速度チェックを行いましょう。

こちらの記事を参考にさせていただきました。

HTMLとCSSの文法チェックツール7選！よくある文法エラーも紹介

HT ...