list-styleを無効化したul要素にlistロールを指定すべきなのか？
645 words
3min read
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法を紹介します。
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。