Next.jsで使えるCSSフレームワークまとめ!【おすすめはCSS Moduleです】
Next.jsではいろんなCSSフレームワークが使えます。CSS ModuleやTailwindCSSやcss-in-jsなど。この中で一番おすすめはCSS Moduleです。使いやすく、保守性も高く、コンポーネントと相性がいいものになってます。
React.jsでスクロールアニメーション!Intersection Observerで「要素が見えたら」を実装する
Reactでスクロール量に応じたアニメーションを実装する場合、react-intersection-observerライブラリを使います。これを使うと「要素が見えた時にフェードインする」などの機能を実装できます。
ホームページ制作に必要なプログラミング言語は?
ホームページ制作するときに使うプログラミング言語は2パターンあります。PHP、WordPressを使うか、React.js、Next.jsを使うかです。HTML, CSS, Javascriptは必須ですが、残りは好きな方で大丈夫です。
【Javascript】スクロールで背景や文字が動くパララックスの実装方法(自作)
スクロールで背景や文字が動くパララックスをJavascript (jQuery)で実装するのは意外と簡単です。スクロール量に応じてtransformプロパティを変更して要素を動かすだけです。こうすると、奥行きが生まれ、カッコいいwebページができます。
【Next.js】WordPressをヘッドレスCMS化させる方法
WordpressをNext.jsと組み合わせてヘッドレス化させました。1.スターターキットを導入, 2.プラグインを導入&設定 3.Vercelデプロイする。ヘッドレス化は表示速度が爆速になるのでかなりおすすめです。
【Laravel + React】SPAアプリでのSNS認証を簡単に実装してみた
Laravel + ReactでSPAのSNS認証を解説します!Socialiteを使えば特に難しいことはなく、だれでも簡単に実装可能です。
【React + Laravel】SPAで認証機能と権限管理(fortify+sanctum)
SPAだとリロードがないため、ユーザーが認証済みかどうかでアクセスを分けるのが少し難しくなります。初回ローディングで認証情報を取得し、それをフックで取得し、ログインなどの処理と同時に認証情報を更新することで解決できます。
【入門】React jsとは?できることと始め方を分かりやすく解説!
React jsはjavascriptのフレームワークです。これだけでWebページ・サービスを作ることができます。コンポーネント指向、高速でwebページを作成するためのライブラリが揃っている、パフォーマンスが良いというメリットがあり、使い勝手抜群です。
初心者向けBootstrapの使い方【覚えることは2つだけでOKです】
Bootstrapは初心者には少しややこしいですが、2つの使い方を覚えるだけで問題ないです。Bootstrapの2つの使い方は、余白(padding,margin)とグリッドレイアウトです。
【CSS設計】FLOCSSって何?読みやすいCSSの書き方を説明します
FLOCSSはCSS設計の1つです。FLOCSSはComponent, Layout, Projectの3つに機能を分割していきます。FLOCSSの使い方を学ぶと読みやすく修正しやすいコードを書くことができます。