Frontend
CSSのみで実装する指向性ヘッダーアニメーション
JavaScriptによるスクロール位置の監視が必須であった複雑なヘッダーアニメーションも、Scroll State Queriesを使えばCSSのみで実装することが出来る。
Scroll Container内の絶対配置またはAG Gridのバグ
Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。
Pagefindをローカル開発時でも動作させる
Pagefindの利用例を調べると、開発時はダミーデータを渡している実装しか見つからなかったが、ダミーデータの作成やコード上の分岐が増えることが億劫だったため、開発時も本番相当のデータが表示されるようにした。
CSSカルーセルを試す
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法
スライドパズルが解けるかの判定
スライドパズルの状態は置換群として表現できるため、置換群の性質を利用して判定することが出来る。
list-styleを無効化したul要素にlistロールを指定すべきなのか？
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
Faker.js v9.5.0 でAI生成されたアバター画像を利用する
Faker.js v9.5.0で追加されたpersonPortraitメソッドについて紹介する。
AstroではGoogle Fontsを直接利用しない方が良いかもしれない
Astroはstylesheetを巻き上げてしまうため、preconnectなどの指定より前にGoogle Fontsの読み込みが開始されパフォーマンスが悪化する可能性がある。
Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する
Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について
色空間とOKLCHを利用したカラーパレットの生成
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
iOS Safariの音声再生における制限とその回避策の検証
ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。
Canvasを使ってカーソルにエフェクトを付与する
Canvas APIを利用してマウスに追従するエフェクトを付与する方法を紹介する。
React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
Q. position: stickyが効かない
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
余計なDOMを追加せずにinput[type="file"]を装飾する
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
Q. Noto Sansの場合、下にずれたように見える
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
Q. iPhoneで見るとフォーム画面が崩れる
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
CSS Media Queryを使うときに気を付けること及び知見
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
スクロール領域はそのままにスクロールバーを隠す
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
CSS in JS 2022-10
2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。
CSSで印刷時の見た目を調整する
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
CSS 変数で色を透過したりパレットを生成する
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
CSS-in-JS - styled vs css prop by Glen Maddern (styled-components)
CSS-in-JSのstyledとcss propの記法について、styled-componentsの作者であるGlen Maddern氏による説明のメモ。