この記事は 2025年2月現在、下記の条件で確認した内容です。 ブラウザ Safari 18.3（macOS Sonoma） Chrome 133（Windows 10） Firefox 135（Windows 10） フォント Noto Sans JP デモ 各ブラウザとFigmaとで共通して言えること 各ブラウザでのレンダリン...

Google Fontsにあるバリアブルフォント Roboto Flex について、利用可能なパラメーターとその意味を調べてまとめました。 デモ ※このデモでは、基本的に font-optical-sizing はauto にしてあります。 バリアブルフォントをCSSで操る基本 バリアブル（可変...

Figmaでオートレイアウトを作成し線とpaddingを設定したとき、デフォルトではpaddingの領域内に線が描画されます。 つまり、CSSでpaddingを設定数値通りに書くと、Figma上の見かけよりもpaddingが大きくなります。 それを解決するのがオートレイアウトの設...

Figma操作説明用スクリーンショット画像を作成するときに、番号を手で打ち込んでいくのが辛すぎてプラグインを作りました。 スクリーンショット撮影アプリケーションの中には、画像内に簡単にマーカー設置できるものもありますが、説明はそのままにスクリ...

GitHubに接続する手順 ※この記事は Windows 11 の PhpStorm 2024.1系（日本語）で作成しています。 [設定]→[バージョン管理]→[GitHub]から[アカウントの追加]→[GitHubでログイン...]の操作をします Please continue only if this page is opened from a Je...

WebページのHTMLやCSSを作成しているとき、テキストや画像の変更にどれだけ耐えられるかを確認したいことはありませんか？ とくにCMSを組み込む場合、運用中に予期せぬ長さのテキスト・大きさの画像に差しかわるかも……。 そんなチェックを便利にするChrome...

ファビコン指定の方法は様々あり、たくさんのファイルを作って指定したほうがいいという話もあるのですが、必要最低限のファイルと記述だけでどうにかならないでしょうか……。 今回は、AndroidのChromeで「ホーム画面に追加」のアイコンが出たり出なかった...

この記事では「CSS変数で管理している色をCSS上で半透明にしてから使う」という状況に限定して、color-mix()関数と相対カラー構文についての話をします。 CSS変数で管理している色をCSS上で半透明にするとは 筆者はもともとSassを使っており、デザイン上で...

Webサイトの制作時や公開前に、作成したページの見た目以外の部分に問題がないかをチェックしたり、リダイレクト設定が正しくできているかをチェックすることがあります。 しかし、サイトの規模が大きくなると1ページずつ開いてチェックを行うのが大変なこ...

※この記事ではBackstopJSそのものの使い方については解説しません。 実際に作ったBackstopJSのプロジェクト （2024年9月現在。内容は変更される場合があります） BackstopJSおよび見た目の比較テストツールとは BackstopJSはビジュアルリグレッションテス...