HTMLとCSSの練習課題を作成しました。
ある程度書けるようになってきた方のレベルアップとして利用していただくことを想定しております。模範解答のようなものは用意しておりませんので、コーディングの得意な方をご準備ください。企業でご利用いただいても構いません（著作権は放棄しておりません）。
なにを達成させたいか
なぜお題を作ったのかというと、単純にこういうサイトがなかったからです。世の中のHTML、CSS関連の本やサイトは「この見た目にするにはこう」のようなものが多く、上記を満たせるものがなかなかありませんでした。このお題で達成させたいものは次のとおりです。
- アクセシビリティ、保守性、描画速度に配慮したコーディング技術を身につける
- ウェブサービスのUIによくあるコーディングパターンを身につける
便利プラグイン、参考サイト、参考キーワード、参考図書
- HeadingsMap（Chrome拡張機能） https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
- Web Developer（Chrome拡張機能） https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
- HTML入れ子チートシート https://yoshikawaweb.com/element/
- HTML Living Standard（日本語訳） https://momdo.github.io/html/
- CSS（日本語訳） https://momdo.github.io/css3-values/
- CSS Lint http://csslint.net/
- Markup Validation Service https://validator.w3.org/
- Can I use https://caniuse.com/
- MDN https://developer.mozilla.org/ja/docs/Web
- WCAG に関する情報
- WAI-ARIA に関する情報
- Schema.org に関する情報
- 障害を理由とする差別の解消の推進 – 内閣府 https://www8.cao.go.jp/shougai/suishin/sabekai.html
- 書籍『コーディングWebアクセシビリティ』 https://amzn.to/3mnFVWj
- 書籍『インクルーシブHTML+CSS & JavaScript』 https://amzn.to/3jaWG4W
モブコーディングをする場合の準備
ひとりで練習課題を行うのではなく、モブコーディング用の練習課題としてお使いいただいても構いません。モブコーディングとは、複数人でHTML・CSSのコーディングを行うことです。モブプログラミングのコーディング版（それを含めてモブプロといってもいいかもしれませんが）です。詳細は、『モブプログラミング・ベストプラクティス』を参照ください。
リモートでモブコーディングを行う場合の準備です。
まず人です。
- タイピスト役
- モブ役
- コーチ役
モブとタイピストを合わせて3人〜数人。コーチ役に適任する人がいなければいなくても構いません。コーチ役の条件の目安は「HTMLとCSSの仕様をある程度理解し、実装経験が数年あり（数千時間ほど）、HTMLはセマンティックに書くことができ、CSS設計もある程度詳しく保守性を考慮でき、JavaScriptやサーバサイドプログラミングもある程度書け、デザインもある程度できるやったことがある方」です。
次にエディタですが、特になんでも構いません。「Visual Studio Code」の「Live Share」など使うのも手ですが、単純にできあがったファイルを順番に渡していくことでも十分対応可能です。
時間的な余裕が生まれた場合
時間が余った場合の案を置いておきます。
- 質問タイムにする
- ホバー時や、空の状態のときなど、他の状態のときのコーディングも行う
- さらにアクセシビリティを強化する
- 他の実装方法がないか模索してみる
よくありそうな質問
- アクセシビリティ配慮したり、耳で聞く人まで考える必要があるの？
- それは手段を知ってからご自身で判断すればよいと思います。すぐに対応できるものもあれば、難しいものもあることは事実です。また、思っているほど「普通の人」というのは少ないものです。ディスレクシアではなくても状況によっては文字が頭に入ってこないときもあるでしょう
- そもそもデザインカンプがアクセシビリティに配慮されていないのではないか？
- あえてそうしている側面もあります。それは現実的にアクセシビリティに配慮されていないデザインカンプに遭遇することのほうが多いからです。このお題では、可能な限りアクセシビリティに配慮して見た目のままを再現できるようにコーディングしてください。そのうえで「こういうコーディングになるから保守性や読み込み速度が下がり、結果的に売上が下がって事業の維持ができなくなりアクセシビリティどころではなく機能が提供できなくなる。デザインのほうを修正することがベストだ」というような提案をするとよいでしょう
HTMLの練習課題
HTMLの練習課題用デザインカンプ Ver. 1.0（コミュニケーションデザイン寄りのウェブサービス）
例えば次の条件でコーディングしてください（以下はただの例です。企業でモブコーディングを取り入れる場合は、自社の環境に合わせてください）
- 思想：プログレッシブエンハンスメントの考え方で実装（HTMLのみですべての情報や情報操作にアクセス可能である）
- 考慮すること：アクセシビリティ、保守性、描画速度など
- キーボード操作：必須
- 可能であればすること：VoiceOverなどのスクリーンリーダーに対応
- ダミー画像：https://placehold.jp/ や https://placeholder.pics/ のようなサイトを利用
- 実装範囲：HTMLのみ（CSSの実装まで想定していないので、余白の長さなど適当です）
- ピクセルパーフェクト：達成しなくて構いません
- モブコーディング時の時間配分：HTMLのみで4時間の実装、20分程の説明と準備、20分程の休憩、20分程の解説（全部で5時間）
