CSS Dinerとは？
フロントエンドを勉強し始めたばかりの人にとって、CSS セレクタは学習のハードルになりがちです。セレクタが何をしているのかがわからないとスタイルを適用できません。そんなセレクタをゲーム感覚で学べるのが CSS Diner です。
公式サイトによると、ゲームでは編集画面にセレクタを入力してテーブル上の正しいアイテムを選びます。正解すると次のレベルに進み、テーブル上の要素にマウスを載せると HTML マークアップが確認できます。右側のパネルにはセレクタの説明や使い方が表示され、初めての人でも学習しやすくなっています。さらに、ゲームには合計 32 レベルが用意されており、タグ名によるタイプセレクタや ID セレクタ、子孫セレクタ、疑似クラスなど、CSSセレクタを体系的に学べるようになっています。
英語だとハードルが高い？
ただ、CSS Diner は英語で作られているため、日本語話者にとっては少しハードルが高いと感じるかもしれません。英語の説明を読みながら試すことになるため、英語に慣れていない人にはとっつきにくさがあるのも事実です。
なので勝手に翻訳しました
ということで、CSS Diner を fork して、日本語に翻訳してみました！
どこを翻訳したの？
具体的には、下記のようなテキストを中心に翻訳しました：
{
selectorName: 'Type Selector',
selector: 'plate',
syntax: 'A',
helpTitle: '要素の種類で選択',
help: 'plate というタグ名の要素をすべて選択します。',
examples: ['plate'],
level: 1
}
また、ゲーム画面右側の説明文や、プレイ中に出てくるヘルプのほとんども日本語に書き換えています。
注意事項
これは非公式の翻訳版です。翻訳や動作に関しての問い合わせは Band-Aid/css-diner GitHubリポジトリ にお願いします。元のプロジェクトは flukeout/css-diner です。
まとめ
CSSセレクタを学びたいけど英語が苦手…という方の助けになれば嬉しいです！
Pendoの機能タグ付まえの練習にぜひご活用ください。