HTML/CSS

CSSのみで実装する指向性ヘッダーアニメーション

Scroll Container内の絶対配置またはAG Gridのバグ

ModalとDialogの分類

CSSカルーセルを試す

Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法

Tailwind CSSはAIフレンドリーではない。

Tailwind CSSがAIフレンドリーである負債になりにくいといった主張について、少なくとも現状は違うという認識を持っています。

自分のデザインを説明する

自分のデザインの説明責任を果たすことの大切さ、説明責任とアブダクションラインについて

list-styleを無効化したul要素にlistロールを指定すべきなのか？

list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。

AstroでTailwind CSSをv4にアップグレードした

現在ブログとして運用しているサイトのAstroをTailwind CSS v4にアップグレードした際の内容をまとめる。

ページを離れた際に呼ばれるブラウザイベントについて

ページを離れた際に呼ばれるブラウザイベントについて、共有したくなったので改めて少し調査した上でまとめた。

色空間とOKLCHを利用したカラーパレットの生成

CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。

iOS Safariの音声再生における制限とその回避策の検証

ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。

Tailwind CSSに新しいクラス、ユーティリティを追加する

Tailwind CSSに新しいクラスつまりユーティリティを追加するには、設定ファイルにプラグインを追加するか、自分でプラグインを作成する必要がある。

React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。

React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。

Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった

overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。

明示的に無効化されたインタラクティブ要素でTooltipを気軽に表示すべきでない

無効化されたbuttonやinputなどのインタラクティブ要素にツールチップを表示したいという相談を複数回受けたので、その問題点と代替手段についてまとめた。

よくある設計→Webデザイン→実装の流れ、そのQ&A

一般的なWebデザインの流れについて質問があったため、その流れとよくあるQ&Aをまとめた。

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"]を装飾する方法とその是非について。

Q. iOSでinputにフォーカスするとズームしてしまう

iOSでinputにフォーカスするとズームしてしまう問題について調査した結果をまとめた。

2種類のスクロールバーとscrollbar-gutterによる制御

動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。

Q. Noto Sansの場合、下にずれたように見える

Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。

Q. iPhoneで見るとフォーム画面が崩れる

iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。

CSS Media Queryを使うときに気を付けること及び知見

CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。

Q. フォームでsubmit buttonを押下すると上の方になぜかスクロールされる

フォームでsubmit buttonを押下すると上の方になぜかスクロールされるという相談を受けたので、その原因と対応についてまとめた。

Q. autoComplete/autoFillを完全に防ぎたい

autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。

スクロール領域はそのままにスクロールバーを隠す

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について紹介する。