Frontend Practical Guide

フロントエンド開発の「正しい実装」を、手を動かしながら学べるリファレンスサイトです。 すべての機能にライブデモとコード例を用意し、仕様の理解から実務への応用までをカバーします。

このサイトの目的

仕様を正しく理解する

CSSの各機能やWCAGの達成基準を、公式仕様に基づいて日本語で解説。 「なぜそう書くのか」を理解した上で実装できるようになります。

体験して学ぶ

すべての機能・達成基準にインタラクティブなデモを用意。 不適合/適合の比較やコード例を通じて、実践的な知識を身につけます。

現場で使える判断力

「このCSSは今使えるか？」「このUIはアクセシブルか？」 ブラウザサポートや適合レベルに基づいた、実務での判断基準を提供します。

ガイド

こんな方に

  • CSSの新機能を安全に採用したい開発者

    Baseline ステータスでブラウザ対応状況を即座に判断。フォールバック戦略も提供します。

  • アクセシビリティ対応を始めたいチーム

    WCAG達成基準を一つずつ体験型デモで学習。何が不適合で、どう修正すべきかが分かります。

  • フロントエンドの基礎を固めたい学習者

    仕様に基づいた正確な情報を、日本語で体系的に学べます。

  • コードレビューの判断基準が欲しいリードエンジニア

    各CSS機能の注意点やa11yチェックポイントを、レビュー時のリファレンスとして活用できます。

サイトの特徴

  • 体系的な構成

    CSS機能は Baseline ステータス別に、WCAG は原則・ガイドライン別に整理。目的の情報に素早くアクセスできます。

  • すべてにデモとコード

    CSS機能にはライブデモ＋コード表示、WCAG達成基準には不適合/適合の比較デモ。読むだけでなく体験して理解できます。

  • 仕様に準拠

    CSS機能は Baseline ステータスに基づき分類。アクセシビリティは WCAG 2.2 / WAI-ARIA 1.2 に準拠しています。