- CSS
- レスポンシブデザイン
- コンポーネント設計
CSSコンテナクエリで部品単位のレスポンシブ設計をする
CSSコンテナクエリで親レイアウトではなく部品自身の幅を基準に表示を切り替え、再利用しやすいカードを設計する方法を解説します。
Articles
記事一覧
実装手順だけでなく、選択理由と失敗しやすい境界をコードとともに整理している。
- CSS
- レスポンシブデザイン
- タイポグラフィ
CSSのclamp()でレスポンシブな文字サイズを設計する
CSSのclamp()で最小値・可変値・最大値を定め、メディアクエリを増やしすぎずに読みやすい文字サイズを設計する方法を解説します。
- CSS
- デザインシステム
- カスタムプロパティ
CSSカスタムプロパティでテーマ値を管理する設計
CSSカスタムプロパティで色、余白、文字サイズなどのテーマ値を管理し、コンポーネント間の値のずれを防ぐ設計を解説します。
- CSS
- グラデーション
- JavaScript
CSSグラデーション生成ツールの設計と実装
線形・放射状グラデーション、色停止点、CSS出力、コピー処理を備えるCSSグラデーション生成ツールの設計を解説します。
- Canvas API
- WebP
- JavaScript
Canvas APIによるブラウザ内WebP変換・圧縮
WebP変換ツールを基に、画像読込、Canvas変換、品質指定、透過、Blobダウンロードをブラウザ内で行う方法を解説します。
- WCAG
- アクセシビリティ
- CSS
WCAGに基づくカラーコントラスト比の計算方法
カラーコードコントラストチェッカーの実装を基に、相対輝度、コントラスト比、WCAG判定基準と境界例を解説します。
- Cloudflare Pages
- Functions
- セキュリティ
Cloudflare Pages Functionsのお問い合わせ入力検証
Cloudflare Pages FunctionsでJSON、文字数、Origin、リクエストサイズ、エラー応答を検証するお問い合わせAPIの境界設計を解説します。
- Astro
- SEO
- JSON-LD
AstroでBlogPosting・BreadcrumbList構造化データを実装する
Astroの共通headでBlogPostingとBreadcrumbListのJSON-LDを生成し、生成HTMLで検証する実装に絞って解説します。
- Astro
- Content Collections
- 公開管理
Astro Content Collectionsで下書きと公開日を安全に管理する
draftとpubDateを検証し、記事一覧・静的ルート・sitemapから未公開記事を安全に除外するAstroの設計を解説します。
- JavaScript
- i18n
- UX
強制リダイレクトしないブラウザ言語案内の実装
ブラウザ言語を判定し、非モーダルな言語案内とlocalStorageで利用者の選択を尊重する実装を解説します。
- SEO
- i18n
- Astro
多言語サイトのcanonical・hreflang・x-default設定
日英ページで自己canonical、hreflang、x-defaultを対応付け、重複URLや参照先の取り違えを防ぐ確認点を解説します。
- Astro
- i18n
- 多言語サイト
Astro標準i18nで日本語URLを維持する多言語サイト構築
Astro標準i18nで日本語を既定URL、英語を/en/に置く静的構成と、既存日本語URLを維持する設計を解説します。
- Git
- コミット
- Workflow
Gitで対象ファイルだけをコミットする：stage確認で変更混入を防ぐ方法
対象ファイルだけをstageし、staged diffで確認して意図しない変更をコミットへ混ぜないGitの手順を解説します。
- Cloudflare
- robots.txt
- SEO
Cloudflareがrobots.txtへ追加するContent Signalsを公開後に確認した記録
管理しているrobots.txtと公開レスポンスを比較し、Cloudflare管理ブロックを確認した記録。
- Cloudflare Pages
- Security
- Environment Variables
Cloudflare Pages Functionsの環境変数とSecretを分ける判断基準
問い合わせFunctionを題材に、ブラウザへ渡せる値とSecretで管理すべき値を分ける基準を整理する。
- Astro
- Google Analytics
- Web Performance
AstroへGA4を本番環境だけで重複なく読み込む実装
共通ヘッドでGA4を一度だけ初期化し、本番ホスト以外では計測を開始しない実装記録。
- Cloudflare Turnstile
- Cloudflare Pages
- Security
お問い合わせフォームでCloudflare Turnstileをサーバー側検証する
明示的レンダリングとPages FunctionのSiteverifyで、問い合わせ送信を二段階で確認する実装記録。
- Cloudflare Pages
- Cloudflare Email Service
- Security
Cloudflare Pages FunctionsからEmail Service REST APIで問い合わせを送信する
問い合わせFunctionの入力検証、Turnstile検証、Email Service REST API呼び出しを分離した実装記録。
- Cloudflare
- Email Routing
- DNS
Cloudflare Email Routingで独自ドメインメールを既存メールへ転送する設定記録
受信転送と問い合わせフォームの送信基盤を分け、独自ドメインメールの受信を確認した記録。
- Cloudflare Pages
- DNS
- Astro
シンドメインで取得したドメインをCloudflare DNSとPagesへ接続した記録
レジストラ、Cloudflare DNS、Cloudflare Pages、Astroの正規URL設定を分けて確認した記録。
- Astro
- Cloudflare Pages
- HTTP
Cloudflare Pagesで存在しないURLが200になる原因とAstroの404ページ
Astroの404ページを追加し、画面表示だけでなく公開環境のHTTPステータスまで確認した記録。
- Astro
- Quality Assurance
- SEO
Astroブログの公開前チェック：生成HTML・リンク・メタタグを確認する手順
Astroブログを公開する前に、静的生成、生成HTML、リンク、メタタグ、構造化データを確認する手順を解説。リポジトリで実行した結果と一般的な確認方法を分け、公開後の確認対象も整理します。
- Git
- Conventional Commits
- Workflow
個人開発を加速させるConventional Commitsの導入とコミット粒度の設計
Conventional Commitsのprefixと、破綻しにくいブランチ運用を解説。レビューしやすいコミット粒度、履歴を読みやすく保つルール、個人開発での運用判断を整理します。
- Astro
- Image Optimization
- Web Performance
Astro公式の`<Image />`コンポーネントを活用した画像最適化とWebP配信
astro:assetsのImageコンポーネントで画像形式、寸法、レスポンシブ表示を管理し、画像由来のCLSを防ぐ方法を解説。WebP配信と生成HTMLで確認するポイントも整理します。
- TypeScript
- REST API
- Error Handling
フロントエンドにおけるREST APIエラーハンドリングの設計パターン
通信失敗、HTTPエラー、不正なレスポンスを分類し、画面への通知と有限回リトライを分離するREST APIエラーハンドリングを解説。フロントエンドで扱いやすい状態設計を整理します。
- CSS
- Tailwind CSS
- Responsive Design
FlexboxとCSS Gridの実践的な使い分け：カードUIとヘッダーレイアウトの設計
一次元のヘッダーにはFlexbox、二次元のカード一覧にはCSS Gridを使う判断基準を解説。Tailwindでの実装例と、モバイル表示を崩さないレイアウト設計の考え方を示します。
- TypeScript
- Web Storage
- Browser API
localStorageとsessionStorageの使い分けと安全なラッパークラスの作成
localStorageとsessionStorageをSSR環境でも安全に扱い、JSON破損や容量超過を分類するTypeScript実装を解説。用途に応じた保存先の選び方と例外処理を整理します。
- Astro
- SEO
- OGP
Astroで構築するSEOに強いメタタグとOGP画像の共通コンポーネント設計
canonical、meta description、OGP、TwitterカードをAstroの共通レイアウトで安全に管理する設計を解説。静的ページと記事ページでメタ情報のずれを防ぐ実装を整理します。
- TypeScript
- Fetch API
- API
TypeScriptで書く外部APIフェッチ用の型安全な共通ラッパー関数の実装
HTTPエラー、不正なJSON、データ形式の不一致を区別し、実行時検証まで行うfetchラッパーをTypeScriptで設計する方法を解説。呼び出し側の例外処理を整理する考え方も扱います。
- Astro
- Cloudflare Pages
- Deployment
Astroで作る静的サイトをCloudflare Pagesに最速でデプロイする手順
Astroの静的出力をCloudflare PagesへGit連携で配信し、独自ドメインを割り当てる手順を解説。ビルド出力、正規URL、公開設定を分けて確認し、本番前の見落としを防ぐ要点を整理します。
- Tailwind CSS
- Astro
- Markdown
Tailwind CSS Typographyで実現するMarkdown記事の美しいスタイリング
Tailwind CSS 4とTypographyプラグインを使い、Astroで生成するMarkdown本文の見出し、コード、リンクを読みやすく整える方法と、導入時に確認する設定を解説します。
- Astro
- TypeScript
- Content Collections
Astro Content Collections入門：Zodを使った堅牢な型安全ブログの構築
Astro 7のContent CollectionsでMarkdownのFrontmatterを検証し、公開日やタグの型の揺れを防ぎながら、型安全に記事一覧を取得する実装と設計上の注意点を整理します。