webIE11とさよならしたら全力で使えるHTML/CSSまとめ【40個以上】
Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした!(Windows8.1終了までIE11頑張るみなさん、お疲れ様です) 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません! とい... webサイト全体のletter-spacing設定を子要素にうまく継承するには
Webサイトのデザインをするとき、サイト全体のテキストに対して文字間100=letter-spacing:0.1emを指定する、なんてことがありますよね。 でも、コーディングの仕上がりで微妙に最終的なletter-spacingが異なる…なんで…。確認してみたところ、letter-spaci... web【Adobe XD】和欧混植を実現するMixed FontTypeプラグインを作りました
Adobe XDで font-family:Lato, "Noto Sans JP", sans-serif; というような文字組が設定できればいいのに… ということで、XDで混植を実現するプラグインを作りましたので使い方のご紹介です。 【Mixed FontType プラグインの使い方】 Mixed FontTypeプラグ... web【Lottie】Illustratorで描いた絵をAfterEffectsで動かしてLottieとして書き出してWebページで動かす
【STEP 1. Illustratorで描いた絵をAfterEffectsで動かす】 参考:https://helpx.adobe.com/jp/after-effects/how-to/jp-for-designers-1.html 動かしたいオブジェクトごとにレイヤーに分ける AfterEffectsで読み込むと、Illustratorのレイヤー=AfterEffe... web場合によっては重くなる?SVG画像の軽さと重さを検証してみた!
シンプルなアイコンとかロゴとかはSVGが向いていますが、場合によっては重くなるSVGについて確認してみました。 【ポイントの数が少ない・オブジェクトの数が少ないものはSVGに向いている】 ポイントの数が少なく、オブジェクトの数も少ない画像はSVGにし... PC備忘録 – Adobe XD のプラグインを作ってそこからNotion APIを叩いてみよう
https://deep-space.blue/web/2216 XDで混植プラグインを作った話は別記事にあります 結果的には思った通りにできなかったのですが「Adobe XD上の選択したオブジェクトの情報をNotionデータベースに登録する」ということをやろうとした時のメモです。 でき... web備忘録 – Notion APIをローカルのnodeから叩いてみよう
Notion API の ドキュメントの導入に書かれている内容を、Node.js / npm 初心者がやってみた備忘録です! 【Notion側の準備】 データベースの準備API認証情報の準備 データベースの準備 新規のデータベースを適当に作ります。 データの列の名前を後で使う... web遅延読み込みしたGoogle FontsのFOUTを、Font Loading APIを使って軽減してみた
【2022年3月】Google Fontsのパフォーマンス比較&ハリー・ロバーツ方式の勝手に改良版 にて、Google Fontsを遅延読み込みする方法についてまとめました。 しかし、この方法では「 FOUT(Flash of Unstyled Text)」という現象が避けられません。 ページ... webGoogle Material Icons をアイコンフォントとしてXD & Webページで使う方法まとめ
Google Material Iconsは通常デザインデータ作成時などはSVGアイコン画像として使うことが多いかな、と思います。 が、実装ではアイコンフォントとして利用したい→デザインデータでもアイコンフォントとして使用したい!という場合の方法についてまとめて... web【2022年3月】Google Fontsのパフォーマンス比較&ハリー・ロバーツ方式の勝手に改良版
★ハリー・ロバーツ方式の勝手に改良版は記事の最後にあります★ GoogleFontsをウェブページで普通に使うと、PageSpeed Insights (というかLighthouse)に 「レンダリングを妨げるリソース」として登場してしまう問題があります。 【「普通に使う」とは】 Goo...