gihyo.jp
主な投稿
Yuhei Yasuda
WEB+DB PRESS Vol.133に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました #wdpress
Yuhei Yasuda
マークアップのわかり方
Yuhei Yasuda
宣言的デザイン(翻訳)
Yuhei Yasuda
CSS設計における、すべてがコンポーネントであるという誤謬
社内発表
本文のタイポグラフィとCSS
SHIFTBRAIN note
『Every Layout』に到った背景と思想についての私の解釈
CodeGrid
「Every Layout」をめぐる座談会
Yuhei Yasuda
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
Yuhei Yasuda
垂直方向のマージンにはmargin-topを優先的に使う理由
CodeGrid
Tailwind CSSの設計思想を業務に活かす
yuhei blog
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか(翻訳)
制作者のためのHTML
シフトブレイン/スタンダードデザインユニット
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
プロジェクト
–
postcss-fluid-sizing-function
CSSのブレイクポイントとサイズを引数に指定するとclamp()に変換できるPostCSSプラグイン。
–
sdenv
ウェブサイト(not ウェブアプリケーション)のためのフロントエンド開発スターターキット。
–
drygen
指定したファイルに基づいて別のファイルを生成できるコードジェネレータ。
–
wordpress-starter
WordPressテーマ構築のための開発環境。
–
accrefs
ウェブアクセシビリティの参考資料をまとめたサイト。日本語の資料を中心にリンク数は200を超える。サイトのデザインおよび実装に携わる。有志のメンバーにより制作・運営されている。
–
shifted
静的サイト構築のための開発環境。
–
シフトブレイン/スタンダードデザインユニット
自社で所属していたチームのウェブサイト。
–
yuhei blog
過去に更新していた個人ブログ。
最近のブログ
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。
Storybookでcontrolledなコンポーネントを操作可能にしつつ引数をモックする
Storybookにおいて、Reactコンポーネントを使ったstoryを作成する際、単なるボタンのようなシンプルなコンポーネントであればcomponentプロパティに指定するだけで良い。
不可視状態からフェードインする要素を即座にフォーカスする方法
CSSのdisplay: noneやvisibility: hiddenによって不可視状態になっている要素を、表示して即座にフォーカスしたいということがある。たとえば、初期状態では非表示になっている検索ボックスを、ユーザーのインタラクションに応じて表示するような場合。そうしたとき、通常では、スタイルを切り替えてすぐにfocusメソッドを呼び出すだけで良い。