マークアップエンジニア（HTML と CSS で画面を実装する担当）の役割は、デザイナーから受け取ったデザインをコードに置き換えるだけではありません。さまざまな端末やブラウザで崩れず、Web 標準に沿ったレイアウトを組み、どんな利用者でも不自由なく使えるようにすることまでが仕事です。
FlexboxとGridの使い分け
margin の固定値や絶対配置の座標だけに頼って要素を並べると、画面幅が変わったときにレイアウトが崩れやすくなります。一方向の並びには Flexbox、行と列の二次元のレイアウトには CSS Grid と、目的に合わせて組み合わせ、画面幅に応じて伸び縮みする柔軟な画面を組む練習をします。
セーフエリアへの対応
最近のスマートフォンでは、画面上部のノッチや下部のホームバーに主要なボタンが重なり、押せなくなることがあります。これを防ぐために、env(safe-area-inset-bottom) のような safe-area-inset の値を考慮して余白や高さを調整する、端末に合わせた CSS の書き方を身につけます。
アクセシビリティとキーボード操作
スクリーンリーダーの利用者のために、内容を伝える画像には適切な代替テキスト（alt 属性）を付けます。また、マウスを使わず Tab キーだけでも、画面上のすべての操作要素を論理的な順序で移動し、操作できるように、マークアップの構造を設計します。
モーダルのフォーカス管理の例
架空のシナリオです。モーダルが開いたのに、キーボードのフォーカスがモーダルの外にある背景のリンクへ移ってしまいます。フォーカストラップの考え方を取り入れ、モーダルが開いたら最初に閉じるボタンへフォーカスが当たり、Tab キーで移動してもモーダルの中にとどまるよう、HTML の構造と順序を修正するクエストに取り組みます。
マークアップ研修のチェック
- 端末ごとのビューポートとブラウザの互換性を考えて CSS を書いているか
- スクリーンリーダー向けの alt 属性が漏れなく入っているか
- キーボード操作と論理的な順序がマークアップに反映されているか
実務シナリオをクエストで体験してみませんか
開発、PMO、マークアップ、企画、デザインの職種別オンボーディングクエストは、First Run のデモで実際にプレイできます。