keigo.yoshida

Engineer's Blog

17本

株式会社デパートのブログ（https://depart-inc.com/blog/）とはちょっと違う雰囲気で、エンジニアリングに特化した技術的なノウハウや、チームの取り組み、カルチャーなどについてカジュアルに発信していきます。

Stickyナビゲーションの改良版 Followナビゲーションの実装方法を解説！

一昔前まで、サイドナビゲーションをスクロールに追従させる挙動は、 position: fixed; やJavaScriptを駆使して実装していましたが、いまや position: sticky; での実装が当たり前になりました。ただ、 position: sticky; を使った実装も完璧な挙動とはいえず、コンテンツとナビゲーションの量（高さ）によっては、たくさんスクロールしなければナビゲーションの下までなかなか到達できない場合があります。この記事では、そんなStic

【Web標準のポップオーバーUI】 Popover API を実務で使うときのコツ

ポップオーバーUIを簡単に実装できるPopover APIを実務で使ってみて、よいところといくつか注意点が見えてきましたので、まとめてみました。 Popover APIで表現できることツールチップやトースターなどのモードレス（前面に表示された要素以外も操作可能な状態）なUIをJavaScript無しで実装できます！もちろん、JavaScriptで操作することも可能です。似たような挙動を実現できるdialog要素もありますが、モードレスなUIをdialog要素で実装しよ

keigo.yoshi…

1か月前

7
知って得する！？アクセシビリティツリー関連のチートシート

ウェブアクセシビリティを考慮した実装をする上で、アクセシビリティツリーを確認することはとても重要です。特に、Web標準のUIではないカスタムUIを開発した場合は、支援技術に情報が正しく伝わるように実装されているかを気にする必要があります。意図した通りにアクセシビリティツリーを構築するために、HTML要素がアクセシビリティツリーでどのような役割を持つのか、CSSがアクセシビリティツリーにどのような影響を与えるのか、WAI-ARIAがどのようなセマンティクスを補完できるのか、と

keigo.yoshi…

3か月前

7