
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React と Next.js 最近Difyを学習する機会がありました。 せっかくなので、Difyで作成したチャットボットをWebサイトに埋め込もうと思い、 Studio(ノーコードWebサイト開発ツール)で作成したWebサイトにチャットボットを埋め込んだのですが、あまりに大きすぎる... 結果、Next.jsを使ってWebサイトを作成した方が良いという情報があり、使ったこともないNext.jsについて調べ始めました。 Next.jsはReactをベースに開発されたフレームワークということで、Reactも合わせて学習します。 今回の学習
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。 scroll-state() はコンテナクエリの一種であり、コンテナ要素のスクロール状態に応じてスタイルを変更できます。 よくある使い方としては、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。従来は要素が sticky によりスナップされているかどうかを JavaScript を使って判定する必要がありましたが、scroll-state() を使うことで CSS だけで実現できます。 スクロールがスタックされている状態 はじめに con
@view-transition { navigation: auto; } これにより NavigationType のうち traverse, push, replace のいずれかに該当するナビゲーションが行われた際にページ遷移アニメーション発生します。push, replace の場合にはブラウザの UI のより発生したナビゲーションではなく、ユーザーの操作によって開始されたものである必要があります。 実際に動作している動作を確認してみましょう。デフォルトではすべての要素に対してフェードイン/フェードアウトのアニメーションが適用されていることがわかります。 keyframes アニメーションの適用 :view-transition-old と :view-transition-new という擬似要素を使用して、遷移前後の要素に対して異なるアニメーションを適用できます。 :view-
There are many catchphrases about Haskell. Haskell is useless. Haskell aims to avoid success at all costs. Haskell is the best procedural language in the world. These sound like dismissals or absurdities from the outside, but once you learn what they really mean, they take on a new light. In this article, I want to explain the third. (See the appendix if you are curious about the first two.) This
Rootport🔥 @rootport 作家・マンガ原作者/好きな言葉は「群盲撫象」/TIME誌「世界で最も影響力のあるAI業界の100人」選出(2023年版)/📝rootport.hateblo.jp/質問箱 marshmallow-qa.com/rootport or https://t.co/crHSEzITk3 youtube.com/channel/UCp6RK… Rootport🔥 @rootport 「なぜAI業界は何でもオープンソースにするの?狂ってるの?」という疑問。会計史の観点からいえば「資本主義の仕組みが変わったから」と言えるかもしれない。 株主は配当金ではなく、売却益を目的に株を持つようになった。起業家は売上と利益ではなく、出資を募ることを目標にするようになった。 2025-01-18 16:37:23 Rootport🔥 @rootport 複式簿記は、中
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました! まずは、とにかく動画をご覧ください! 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね!(言いたかったw) この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください! アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く