Web– category –

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

FigmaのイージングにはCSSでできるものと、JavaScriptが必要なものがある FigmaのPrototypeで、Smart animateを選択したときに選べるイージングには、CSSで表現できるイージング（ベジエ）と、JavaScriptが必要なイージング（スプリング）の2つに分かれて...

複数の要素を順番に動かしたり、スクロールの位置に応じてアニメーションを発火させたり、といった少々複雑なアニメーションを実装するのに便利なGSAP。 この記事ではGSAPを使う上でもっともよく出てくる「Tween」「Timeline」「ScrollTrigger」について、...

先に結論 デモ 前提 主にhoverで色が変わるボタンなどで、疑似要素でアイコンを配置するときの話です。 アイコンの部分を除くと、以下のようなCSSになっていると仮定します。 .button{ display: inline-flex; align-items: center; gap: 16px; background:...

Astroの中でReactのヘッドレスUIを読み込んで使う方法のメモ。 Astroのプロジェクトを作る 仮に以下でサンプルファイルありのAstroプロジェクトを生成します。 npm create astro@latest 参考：インストールガイド（Astro） プロジェクトにReactとReact Ari...

WordPress Popular Postsプラグインを利用した際に、ブラウザのコンソールに表示されるメッセージが消せなくて困って調べたのでその時のメモです（2024年4月時点） ※結論だけ言うと wp-config.phpで define("WP_DEBUG", false); してください。 https://wo...

通常の埋め込み GoogleMapのページから[共有]→[地図を埋め込む]→[HTMLをコピー]で取得したiframeのコードを埋め込む場合 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826...

JavaScriptのレスポンシブ対応には、MediaQueryList（window.matchMedia）を使って書くのが好きなのですが、様々な処理をレスポンシブ切り替えする場合、以下を毎回JavaScript内のいろいろなところで書くのは長い……。 const mql = window.matchMedia("(max...

クラシックブロック（core/freeform）に入力されたHTMLがブロックエディタ上でパースされるときに、JavaScript側の処理でautop（pタグ自動挿入）が起こるのをできるだけ止めたいときがあったので、それを調べたメモ。 ★2024年4月9日に完全にやり方を変更し...

詳細を理解していないのでメモだけ。 JavaScript JSX const { addFilter } = wp.hooks; const { createHigherOrderComponent } = wp.compose; const { Fragment } = wp.element; const { InspectorControls } = wp.blockEditor; const { PanelBody, TextCo...