animateCCで作成したアニメーションをSVGスプライトに変換する手順
compassを使っていないけどスプライト画像だけ作成したかったので、generatorを探してみました。以下、今回行った手順です。
animate CC でアニメーションを作成するこんな感じの1秒24フレームのアニメーシ ...
anime.jsを使ってSVGロゴを線画アニメーションで表示する方法
anime.jsを使ってSVGロゴを線画で描画し、最後に色を塗りつぶすというサンプルを作成したのでご紹介します。
デモこちらが完成したデモです。
See the Pen
NWWLJep by 荒井 潔子 ...
JavaScriptファイルのリンクはHTMLのどこに書くべき?
JavaScriptファイルのリンクは、<header>に書くのか?</body>の直前に書くのか?読み込み速度を考慮した上での結論は以下です。
結論<header></heade ...
Luxeritas でサイドバーに目次を固定する方法
他の方のブログを見ていて、サイドバーに固定された目次が見やすくていい感じだったので設定してみました。WordPressとこのブログで使用しているテーマLuxeritasを使えばすぐにできました。
設定方法1. WordPr ...
日本語有料フォント事情まとめ 2019年最新版
こちらの記事では無料フォントについてまとめました。
ここでは有料フォントについてまとめたいと思います。
※価格や利用許諾は2019年11月現在のものですので、最新の情報はそれぞれのサイトでご確認ください。
無料フォント(日本語、英語)まとめ 2019年最新版
デザインの仕事のほとんどはフォント選びにあると言っても過言ではないと思っているraccoonicoです。フォント選び、大変ですよね。
デザイナーに必須と言われていたモリサワフォントは年間49,800円(税抜)。デザイナーで ...
私がホームページとブログのサーバーにXSERVERを選んだ理由
ウェブデザイナーのraccoonicoです。
このブログはXSERVERにて運用しているのですが、当然いくつかのサーバーを検討しました。サーバーの比較記事はすでにたくさん世の中にありますので、ここでは私がXSERVERを選 ...
画像の出し分けは何を使って実現するべき?レスポンシブイメージのベストプラクティス 2019年最新版
最近のWeb制作で特に重視されているのが、表示スピード。表示スピードをあげるために画像サイズの最適化は必須対応項目です。
画像最適化するための2019年現在のベストプラクティスを調べてみました。
解像度にはsrcse ...
Photoshpのスマートオブジェクトがうまく変形できないときの対処法
イラストレーターからベクターデータをコピー&ペーストしてPhotoshopに貼り付け、それを自由変形しようとしたところ、2つの頂点が同時に動いてしまい、傾きに合わせて変形することができませんでした。
以下の方法で解 ...
HTML / CSSの文法チェック&速度改善ツール
コーディングが終了したら、HTML・CSSの文法チェック、速度チェックを行いましょう。
こちらの記事を参考にさせていただきました。
HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介
HT ...