JavaScript

メモ:文字を手書きで書いているような演出をSVGとVivus.jsで実装する

英語の筆記体をサラサラっと書くようなアニメーション演出って可能なんだろうか。そんな疑問からGoogleを調べてみたら、目的に近い方法を見つけることが出来ました。 この記事では、実際に試してみた際の流れと、作業の中で気づいた要点をメモ.....
AdobeXD

AdobeXDの自動アニメーション機能を初心者なりに触ってみた

Adobeのプロトタイピングツール「Adobe XD」。2018年10月のアップデートにて、自動アニメーションという機能が実装された。 ざっくり書くと、変化前と変化後、2つのアートボードを線でつないで、待機時間、変化にかかる時間、ど.....
フォント

メモ:Adobe Fontsをアクティベートしてもフォントがダウンロードされない時の対処法

Adobe Creative Clouds内に付随しているフォントサービス「Adobe Fonts」でフォントをアクティベートしたのに、フォントが自身のPCにダウンロードされないケースに遭遇。 なんとか解決できたので、対処方法をメモ.....
フォント

メモ:GoogleフォントはMacのローカル内でも使える

Webフォントのサービス「Googleフォント」は、サイト内で表示されている多くのフォントを自身のWebサイトで無料で簡単に使用できる、とても便利なサービスだ。 これを使っていてふと浮かんだのが、「Webサイトでは簡単に使えるけど、.....
Illustrator

Illustrator:クリッピングマスク付きのアセットの書き出し機能のバグ、CC2019で直っていた

HTMLのコーディングのため、Illustrator(以下「イラレ」)にてデザインされた.aiファイルから、各種画像をWeb向けにJPGやPNGで書き出すことがある。 元の画像 ただ、前からの悩みとして、イラレからアセ.....
Omnigraffle(オムニグラフ)

最近のOmnigraffleの日本語記事(2019年4月収集)

仕事の中で、Omnigraffle(オムニグラフ)という名前のアプリケーションを好んで使っている。表、チャート図、マインドマップなどを作ることが出来るソフトだ。Macで利用することが出来る(残念ながらWindows版はない)。 特に.....
Mac

メモ:超簡単だった。MacからLAN上の別のMacを操作する方法

同一のネットワークにつながっている別のMacを操作する方法、ちょっとググってみたら想像以上に簡単だったので、メモ。今までTeamViewerを使っていたけど、LAN内に関して言えば、TeamViewer要らんかったんや・・・。 参考.....
JavaScript

メモ:Animate.cssの利用方法+スクロールに応じてアニメーションさせる方法

2019年3月現在、スクロールに応じて要素をフェードインやスライドインさせるWebサイトはとても多く見られる。 こういったアニメーションを実装するのに、Animate.cssはとても便利(フェードイン、スライドイン、バウンド等、色々.....
ブラウザ

広告を排除してくれるブラウザ”Brave”ファーストインプレ(一目惚れ)

結構昔からフォローしているデザイナーのツイートで存在を知った「Brave」というブラウザ。広告を完全に排除してくれるブラウザらしい。 ダウンロード インストール〜別のブラウザから設定やブクマの引越し さっそく驚い.....
PHP

メモ:階層問わず使用出来る共通ヘッダー&フッターをPHPで作る

WordPressなどのCMSを使わない静的サイトを作る時、各ページのヘッダーやフッターのHTMLをどう管理するかは、けっこう悩みのタネ。 適切な設計を考えておかないと、それぞれのHTMLファイルにヘッダーとフッターのソースコード.....
JavaScript

メモ:Webページにローディングを実装する

例えばランディングページなど、画像をふんだんに使用したWebページを作る時、ページがなかなか読み込まれなくてストレスを感じさせてしまうシチュエーションって、少なからず存在する。 このストレスを少しでも軽減させるために、最近はローディングの.....
CSS

メモ:メディアクエリで「768px未満」と「768px以上」を分ける書き方

レスポンシブWebデザインのコーディングを行う時、HTMLのメディアクエリにて、下記のような設定をしていた。ところが、これだと特定の状況でPC向け/SP向けのどちらのCSSも読み込まれない状況がある事がわかったので、メモ。 例:スマ.....