Frontend Practical Guide

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

このサイトの目的

仕様を正しく理解する

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

体験して学ぶ

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

現場で使える判断力

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

セクション

こんな方に

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

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

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

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

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

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

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

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