Web– category –

Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした！（Windows8.1終了までIE11頑張るみなさん、お疲れ様です） 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません！ とい...

Webサイトのデザインをするとき、サイト全体のテキストに対して文字間100＝letter-spacing:0.1emを指定する、なんてことがありますよね。 でも、コーディングの仕上がりで微妙に最終的なletter-spacingが異なる…なんで…。確認してみたところ、letter-spaci...

Adobe XDで font-family:Lato, "Noto Sans JP", sans-serif; というような文字組が設定できればいいのに… ということで、XDで混植を実現するプラグインを作りましたので使い方のご紹介です。 Mixed FontType プラグインの使い方 Mixed FontTypeプラグイン...

（2023年11月追記）AfterEffectsよりシンプルで簡単に作れるLottielabのバージョンの記事も書きました。 https://deep-space.blue/web/3095 STEP 1. Illustratorで描いた絵をAfterEffectsで動かす 参考：https://helpx.adobe.com/jp/after-effects/how-to/...

シンプルなアイコンやロゴはSVGで書き出したほうがきれいで軽い！ しかし、場合によっては SVGのほうが重い SVGにしてもきれいじゃない ということもあります。どんなときはSVGで書き出すとよいのか？をまとめました！ パスで作られたポイントの数が少ない...

Notion API の ドキュメントの導入に書かれている内容を、Node.js / npm 初心者がやってみた備忘録です！ Notion側の準備 データベースの準備API認証情報の準備 データベースの準備 新規のデータベースを適当に作ります。 データの列の名前を後で使うので...

【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版　にて、Google Fontsを遅延読み込みする方法についてまとめました。 しかし、この方法では「 FOUT（Flash of Unstyled Text）」という現象が避けられません。 ページ...

Google Material Iconsは通常デザインデータ作成時などはSVGアイコン画像として使うことが多いかな、と思います。 が、実装ではアイコンフォントとして利用したい→デザインデータでもアイコンフォントとして使用したい！という場合の方法についてまとめて...

★ハリー・ロバーツ方式の勝手に改良版は記事の最後にあります★ GoogleFontsをウェブページで普通に使うと、PageSpeed Insights (というかLighthouse)に 「レンダリングを妨げるリソース」として登場してしまう問題があります。 「普通に使う」とは Google ...

以下の3ブラウザでの画像のレンダリング状態の調査と、image-rendering: crisp-edgesを使った場合のレンダリング具合のメモ。 Chrome 98（Edge 98も見た目おんなじでした） Safari 15.2 IE11 様々なブラウザでの表示確認用に作ったページ Chrome×縮小表示...