cording

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

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

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

cording

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

デモ

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

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

cording

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

結論

<header></heade ...

WordPress

他の方のブログを見ていて、サイドバーに固定された目次が見やすくていい感じだったので設定してみました。WordPressとこのブログで使用しているテーマLuxeritasを使えばすぐにできました。

設定方法

1. WordPr ...

web design

こちらの記事では無料フォントについてまとめました。

ここでは有料フォントについてまとめたいと思います。

※価格や利用許諾は2019年11月現在のものですので、最新の情報はそれぞれのサイトでご確認ください。

web design

デザインの仕事のほとんどはフォント選びにあると言っても過言ではないと思っているraccoonicoです。フォント選び、大変ですよね。

デザイナーに必須と言われていたモリサワフォントは年間49,800円（税抜）。デザイナーで ...

server

ウェブデザイナーのraccoonicoです。

このブログはXSERVERにて運用しているのですが、当然いくつかのサーバーを検討しました。サーバーの比較記事はすでにたくさん世の中にありますので、ここでは私がXSERVERを選 ...

cording

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

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

解像度にはsrcse ...

web design

イラストレーターからベクターデータをコピー&ペーストしてPhotoshopに貼り付け、それを自由変形しようとしたところ、2つの頂点が同時に動いてしまい、傾きに合わせて変形することができませんでした。

以下の方法で解 ...

cording

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

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

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

HT ...