CSS - Yukiryu blog

React Hook Form + Zodで型安全なフォームを実装する｜バリデーション・エラー表示・送信処理の完全ガイド

React Hook FormとZodを組み合わせてバリデーション付きフォームを効率よく実装する方法を解説。Zodスキーマでのバリデーションルール定義・z.inferによる型の自動生成・zodResolverの設定・registerとerrorsを使ったエラー表示・複数フィールドをまたぐrefine・TanStack Queryとの連携まで紹介します。

2026.08.02 2026.08.04

CSSJavaScriptプログラミング

ReactのルーティングをTanStack Routerで実装する｜ページ遷移・動的ルート・レイアウトの基本

TanStack RouterでReactアプリにページ遷移を実装する方法を解説。ファイルベースルーティングの設定・__root.tsxでの共通レイアウトとOutlet・Linkコンポーネントのアクティブスタイル・$パラメータを使った動的ルート・loaderによるデータ取得・pendingComponentのスケルトン表示まで紹介します。

2026.07.28

CSSJavaScriptプログラミング

React + Vite入門｜コンポーネントベースのUI開発を始める方法

ReactとViteを組み合わせたコンポーネントベースのUI開発を基礎から解説。JSXの書き方とHTMLとの違い・propsへのTypeScript型定義・useStateによる状態管理・useEffectでのAPIデータ取得・カスタムフックへのロジック切り出し・CSSモジュールの活用・コンポーネントの分割指針まで実践的に紹介します。

2026.07.27

CSSプログラミング

CSSアニメーションとトランジションの実装ガイド｜パフォーマンスを意識した動きの作り方

CSSアニメーションとトランジションの使い方とパフォーマンスを意識した実装方法を解説。transitionとanimationの違い・GPUで処理できるtransformとopacityの活用・will-changeの正しい使い方・animation-fill-modeの設定・prefers-reduced-motionによるアクセシビリティ対応まで紹介します。

2026.07.22

CSSプログラミング

Webフォームのユーザビリティを高めるCSS・JavaScriptテクニック｜入力体験を改善する実践的な実装方法

Webフォームのユーザビリティを高めるCSS・JavaScriptの実装テクニックを解説。フローティングラベルの実装方法・リアルタイムバリデーションの設計・文字数カウンター・送信中スピナーと完了メッセージのフィードバック・ARIAを使ったアクセシビリティ対応・iOS Safariのズーム防止まで紹介します。

2026.07.21

CSSHTMLJavaScriptプログラミング

CSSのpositionプロパティ完全ガイド｜static・relative・absolute・fixed・stickyの使い分けを徹底解説

CSSのpositionプロパティ5種類の動作の違いと実践的な使い分けを徹底解説。staticのデフォルト動作・relativeで基準点を作る方法・absoluteの配置基準の探し方・fixedで画面固定する注意点・stickyが効かない原因と解決策・z-indexとの関係まで具体的なコード例で紹介します。

2026.07.19

CSSプログラミング

CSSの!importantの使い方と注意点｜本当に必要な場面と避けるべき場面を正しく理解する

CSSの!importantの正しい使い方と注意点を徹底解説。詳細度の仕組みとの関係・ユーティリティクラスや第三者CSSの上書きなど正当な使用場面・多用による詳細度の戦争と悪循環・セレクターの詳細度アップやCSS変数・:where()を活用して!importantなしで解決する代替手段まで紹介します。

2026.07.19

CSSプログラミング

VK Pattern Libraryのページをカスタマイズする｜追加CSSでWordPressテーマを細かく調整する方法

VK Pattern Libraryで組み立てたページをさらにカスタマイズする方法を徹底解説。CSS変数でのカラー一元管理・VKブロックのクラス名上書き・カードのホバーアニメーション・セクション余白の統一・固定ヘッダーのスクロール検知・Intersection Observerのスクロールアニメーション実装まで紹介します。

2026.07.12

CSSJavaScriptWordPressプログラミング

WordPressオリジナルテーマ開発②｜投稿一覧・固定ページの作り方とfunctions.phpの基本

WordPressオリジナルテーマの投稿一覧・個別投稿・固定ページのテンプレートファイル作成方法を解説。have_postsとthe_postを使ったループ・カスタムテンプレートのTemplate Name指定・functions.phpでのwp_enqueue_scriptsによるCSS読み込み・add_theme_supportの設定まで紹介します。

2026.07.07

CSSHTMLJavaScriptPHPWordPressプログラミング

HTMLサイトをWordPressオリジナルテーマに変換する方法｜テーマフォルダの構成からheader・footer分割まで

作成済みのHTMLサイトをWordPressオリジナルテーマに変換する手順を徹底解説。テーマフォルダの構成・style.cssへのテーマ情報の記載・get_template_directory_uri()でのCSS・画像パスの書き換え・wp_headとwp_footerの追加・header.phpとfooter.phpへの分割方法を紹介します。

2026.07.06

CSSHTMLPHPWordPressプログラミング