入門
ライブラリなしで実装する定番UI
4

今回は1回の記事でファイルのローディング時に表示される画面の実装を解説します。くるくる回るグラフィックを表示する画面にしてみましょう。roleやaria属性を適切に使うことが大切です。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

Tabキーでフォーカスを移動したり、Escキーでドロワーを閉じたりといったキーボードでの操作を実装します。この実装はドロワーの動きとのタイミング設定が重要です。実装だけでなく、要件もじっくり考えましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ドロワーナビの土台はできましたが、ドロワー開閉時のコンテンツ表示に細かな不具合が残っています。それはスクロールバーの出現を踏まえた適切な処理が行われていないからです。今回はこの処理を実装します。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ライブラリを使わず、標準のHTML、CSS、JavaScriptだけを用いて、ドロワータイプのナビゲーションを実装してみましょう。今回はまず全体の大枠を決め、ポイントを押さえながら、基本的な動作までを作ります。

國仲 義則
國仲 義則 | フロントエンド・エンジニア