yuheiy
安田 祐平
フロントエンドウェブ開発者。HTML/WAI-ARIA、CSS、JavaScript/TypeScript、ウェブサイトおよびウェブアプリケーション開発、アクセシビリティ、インターフェースデザイン、デザインシステム、DevOpsなどが専門分野。
監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』がAmazonなどで発売中。
おもな投稿
PLAID Engineer Blog
npmパッケージの代わりに独自の仕組みを構築して定数ファイルを配布する運用に切り替えた経緯と移行プロセス
PLAID Engineer Blog
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
yuheiy
日本語におけるtext-wrapプロパティの運用
gihyo.jp
Tailwind CSS実践入門——まず作ってから、あとで共通化する
yuheiy
マークアップのわかり方
yuheiy
横並びになったボタンを同じ幅で配置するCSS
yuheiy
宣言的デザイン(翻訳)
yuheiy
CSS設計における、すべてがコンポーネントであるという誤謬
社内発表
本文のタイポグラフィとCSS
SHIFTBRAIN note
『Every Layout』に到った背景と思想についての私の解釈
yuheiy
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
yuheiy
垂直方向のマージンにはmargin-topを優先的に使う理由
yuhei blog
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか(翻訳)
制作者のためのHTML
シフトブレイン/スタンダードデザインユニット
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
プロジェクト
sdenv
ウェブサイト(not ウェブアプリケーション)のためのフロントエンド開発スターターキット。
–
シフトブレイン/スタンダードデザインユニット
自社で所属していたチームのウェブサイト。
–
yuhei blog
過去に更新していた個人ブログ。
最近のブログ
ブロックリンク(もしくはカードUI)のアクセシビリティ上の問題と解決策
複数のテキスト要素や画像がグループ化されて、そのグループ全体が一つのリンクになっているというUI表現がある。ブロックリンクやカードUIなどと呼ばれるものだ。たとえば次のような実装になる。
リンクの下線の視覚的ノイズを軽減する
“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。
特定の要素の外側すべてをinertにする
モーダルダイアログを実装する場合は、その外側を不活性化する必要がある。ここで言う不活性とは、