クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Chart.jsをGettingしてStartedする

JSで図を描写するライブラリはいくつかありますが、Canvas要素ベースのChart.jsとSVG要素ベースのd3.jsが目につきました。どっちを先にやるか迷いましたが、Three.jsでCanvas要素に触れ始めているので3Dと2Dの比較として触ってみることにしました。

CSSだけでドット絵マリオを描けるのか

ブラウザ3Dの大海原を漕ぎ始めた私ですが、世代的にはドット絵ゲーム世代です。*1そんな私が前から試してみたかったのは、お絵描きソフトを使わずに、CSSだけでドット絵が描ける?。 多分描けると思う。描けるんじゃないかな。まちょと覚悟はしておけ。な、…

Three.js入門サイトに私も入門する!!

以前ご紹介した「WebGL」の続きになります。今年こそブラウザ3D事始めんと欲し「書き初め」的に書いた投稿からもうじき半年…。 前回tone.jsと同様、今回も便利なライブラリ「Three.js」を使って一刻も早く体験したく。いざっ!

はじめの一音!tone.js事始める

以前ご紹介したWeb Audio APIの続きになります。 ブラウザで音を出す便利なライブラリ、tone.jsを利用して、はじめの一音鳴らしてみたいと思います! ※注:このページは音が鳴ります!

私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ!!(→祝・IEサポート終了!)

CSS

我々は何年待ったのか?このお手軽外接リサイズobject-fitの登場を!なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半(2020年1月終了!)。だが、大丈夫…

ローンチ後のWordPressサイトの中にテスト環境を作る

WordPressはローカル環境で検証がしにくいので、サーバ環境で作りたくなりますね。 ローンチ前はいいけども、ローンチしたらユーザーが見てるページで作成中の姿を見せるわけにはいかない。。 そんな時に、思う存分テストができる環境を考えました。

スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

固定幅と可変幅の組み合わせにはflex-basisが まったく カン・タン・だ!

CSS

Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。 横に並べるのにフレックスボックス(display: flex)を使う人は多いと思う。 そんな中でも固定幅と可変幅の組み合わせに便利なプロパティflex-basisを…

【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ!

CSS

CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()ってのが素敵すぎでしょう!と感動したのでご紹介。

Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪

「周回遅れでもWebGLを事始める!」で「WebGLの機はとっくに熟している」と書きました。 もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。 いっちょやってみっかー、と自分を奮い立たせるた…