WordPress カスタムブロック開発関連メモ。 RangeControl などで指定された数値を元に、例えば CSS の opacity プロパティ用の値を取得すると、ブロックエディター上ではうまく不透明度が反映され ...

Webページを開いたときに、じわっとテキストが徐々にフェードインして表示されるアニメーションをなんとかCSSのみで表現できないか試してみました。 表現イメージ 2023/1/24 : IntersectionObserv ...

CSSの filter:blur でどうやっても画像などのフチまできれいにブラーがかからずぼやけてしまう場合は、SVGフィルターを利用すると確実です。

現在開発中の新しい WordPress テーマの機能として、ページを下方にスクロールすると背景カラーが徐々に変化するギミックを考えてみたので、ご紹介します。 最終目標 現在指定されているページの背景カラーを元にして、ペー ...

React で JSX を利用すると、ビューの構築を HTML ライクな構文で組めます。 その中で、よくあるケースとして URL の有無によってアンカー(a)タグで要素全体をラップするか否かを判定して出力したい場合があり ...

CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプル ...

CSS で要素を横並びにしたい場合、現在は display: flex を指定すれば簡単に水平に並べることができますが、Internet Explorer(IE) では、IE 11のみが対応しているだけでなくバグが多数あ ...

ウェブページを表示する際、読み込み中のローディングアイコンなどを表示して読み込みが完了するとページが表示されるテクニックはよくあるギミックですが、ページコンテンツの読み込み完了までの進捗チェックや読み込みが完了した際の検 ...

今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます ...

JavaScript を使わず、CSS のみで複数のモーダルウィンドウを開閉するアイテムの一覧のサンプルコードをつくってみました。 例えば、EC サイトで商品一覧のサムネイルをクリックすると、その商品の拡大画像と説明、価 ...

汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊 ...

弊社にて現在開発中のWordPressテーマに搭載する機能の候補として、各セクションの境界の形状に、波形の波打つアニメーション要素を表示する仕組みを簡単に作ってみました。 想定は、例えば弊社で提供中のDigiPressテ ...