OpenAI API で AI 画像生成 Web アプリを React で作成するサンプル
話題沸騰中の AI チャットボット「ChatGPT」の API が先日公開されましたが、開発元の OpenAI では他にも 複数の API を提供しており、 その中でも今回は指定したキーワードや作成したい画像を説明する簡 ...
並べ替え
React で ChatGTP API を利用した AI 連携プログラムを作成してみる
今話題沸騰中の OpenAI が開発した人工知能(AI)チャットボット「ChatGPT」のAPI が公開されました。これにより、今後加速度的にあらゆる開発言語で ChatGPT の API が利用され、様々なアプリやサー ...
パートナー一覧などに便利な無限ループするロゴスライダーの作り方
コーポレートサイトなどで、例えば自社のパートナー企業のロゴ画像を並べて一定間隔で繰り返し流れていく無限ループのスライダーコンテンツをどこかで見かけた方もいるのではないでしょうか。 今回はそんな無限ループする簡単なスライダ ...
カウントアップも同時に表示する円形プログレスバーの表示デモ
今回は、Webページ上にサービスレベルやスキル、実績、状況などあらゆる物事についての度合いや進捗状況を表すための汎用性を考慮した円形グラフ(プログレスバー)を HTML(svg)、CSS、少量の JavaScript で ...
requestAnimationFrame でカウントダウンタイマーを表示する
Webページに対象日時までのカウントダウンタイマーを表示する JavaScript のサンプルコードはよくありますが、大抵の方法は、一定間隔で処理を繰り返す setInterval メソッドを利用して1秒ごとにタイマーを ...
数値を任意の秒数で指定した値までカウントアップするデモ
コーポレートサイトなどで、実績や顧客数、満足度など数値でアピールできるコンテンツが横並びで構成され、ページをスクロールしてそれらが可視領域に到達したらカウントアップアニメーションで表示するカウンターを見たことがある方も多 ...
スクロールすると左右交互にアニメーションで要素がフェードインするページのサンプル
今回は、縦にスクロールしていくと左右から交互に画像やテキストがアニメーションしながら現れる Web ページのサンプルを、要素の交差を監視を行う Intersection Observer という JavaScript の ...
[CSS]背景に依存せず角丸のボーダーをグラデーションで表現する方法
CSS でグラデーションの枠線を表現する方法としてよく挙げられるのが、border-image-source でグラデーションを指定した以下のようなコードです。 よくある CSS .border{ display: in ...
[CSS]背景色に依存せず紙の角を折り曲げたような効果を施す方法
CSS でペーパーの角がめくれているような表現をするために、「CSS 紙 折り返し」などと Google 先生にお尋ねしてみると、border プロパティを利用した方法がたくさんでてきます。 しかし、よくあるこの方法では ...
[React]インラインスタイル用の数値に勝手に「px」がつくのを回避する方法
WordPress カスタムブロック開発関連メモ。 RangeControl などで指定された数値を元に、例えば CSS の opacity プロパティ用の値を取得すると、ブロックエディター上ではうまく不透明度が反映され ...
CSSのみでフェードインして現れるテキストを表現する方法
Webページを開いたときに、じわっとテキストが徐々にフェードインして表示されるアニメーションをなんとかCSSのみで表現できないか試してみました。 表現イメージ 2023/1/24 : IntersectionObserv ...
CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策
CSSの filter:blur でどうやっても画像などのフチまできれいにブラーがかからずぼやけてしまう場合は、SVGフィルターを利用すると確実です。