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