- web
【CSS】CSS変数で管理している色を半透明にするのに使えるcolor-mix()と相対カラー構文とは?
この記事では「CSS変数で管理している色をCSS上で半透明にしてから使う」という状況に限定して、color-mix()関数と相対カラー構文についての話をします。 CSS変数で管理している色をCSS上で半透明にするとは 筆者はもともとSassを使っており、デザイン上で... - web
Webサイトの品質チェックお助けツールを作ってみたまとめ
Webサイトの制作時や公開前に、作成したページの見た目以外の部分に問題がないかをチェックしたり、リダイレクト設定が正しくできているかをチェックすることがあります。 しかし、サイトの規模が大きくなると1ページずつ開いてチェックを行うのが大変なこ... - web
【BackstopJS】見た目の比較テストツールで、デザインデータとコーディング結果のビジュアル比較テストを作ってみた
※この記事ではBackstopJSそのものの使い方については解説しません。 実際に作ったBackstopJSのプロジェクト (2024年9月現在。内容は変更される場合があります) BackstopJSおよび見た目の比較テストツールとは BackstopJSはビジュアルリグレッションテス... - web
FigmaのカスタムスプリングをGSAPで再現するためのイージング関数
FigmaのイージングにはCSSでできるものと、JavaScriptが必要なものがある FigmaのPrototypeで、Smart animateを選択したときに選べるイージングには、CSSで表現できるイージング(ベジエ)と、JavaScriptが必要なイージング(スプリング)の2つに分かれて... - web
【GSAPで作るアニメーション】「Tween」「Timeline」「ScrollTrigger」の基本を知る
複数の要素を順番に動かしたり、スクロールの位置に応じてアニメーションを発火させたり、といった少々複雑なアニメーションを実装するのに便利なGSAP。 この記事ではGSAPを使う上でもっともよく出てくる「Tween」「Timeline」「ScrollTrigger」について、... - PC
【Mac】php -v が dyld[56569]: Library not loaded で動かなくなってしまった
現象 php -v が動かなくなってしまいました。 dyld[56569]: Library not loaded: /usr/local/opt/icu4c/lib/libicuio.70.dylib Referenced from: <***************> /usr/local/Cellar/php@7.4/7.4.30/bin/php Reason: tried: '/usr/local/opt/icu4c/li... - web
【CSS】疑似要素で配置するアイコン画像はbackgroundからmaskに乗り換え!
先に結論 デモ 前提 主にhoverで色が変わるボタンなどで、疑似要素でアイコンを配置するときの話です。 アイコンの部分を除くと、以下のようなCSSになっていると仮定します。 .button{ display: inline-flex; align-items: center; gap: 16px; background:... - web
【Astro】React Aria を使う【備忘録】
Astroの中でReactのヘッドレスUIを読み込んで使う方法のメモ。 Astroのプロジェクトを作る 仮に以下でサンプルファイルありのAstroプロジェクトを生成します。 npm create astro@latest 参考:インストールガイド(Astro) プロジェクトにReactとReact Ari... - web
【WordPress Popular Posts】ブラウザのConsoleメッセージを消したい
WordPress Popular Postsプラグインを利用した際に、ブラウザのコンソールに表示されるメッセージが消せなくて困って調べたのでその時のメモです(2024年4月時点) ※結論だけ言うと wp-config.phpで define("WP_DEBUG", false); してください。 https://wo... - web
【GoogleMap】APIなしでのいろいろな埋め込み&口コミを見えなくする方法【備忘録】
通常の埋め込み GoogleMapのページから[共有]→[地図を埋め込む]→[HTMLをコピー]で取得したiframeのコードを埋め込む場合 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826...