azukiazusa.dev

#CSS

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。

値の補間計算を簡潔に記述できる CSS の `progress` 関数

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。

CSS の `@property` ルールでカスタムプロパティを定義する

CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カスタムプロパティに誤った値が代入されることを防いだり、グラデーションのアニメーションなど、従来は実装が難しかった機能をサポートすることができます。

flex-wrap: balance で Flexbox の折り返しを均等にする

flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Flex アイテムを振り分けます。この記事では balance 使い方について紹介します。

CSS Grid Lanes で Masonry レイアウトを実装する

CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できます。この記事では `display: grid-lanes` の基本的な使い方を紹介します。

Tailwind CSS のダークモードで System, Light, Dark を切り替える

ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。

テキストサイズの拡大設定の問題と解決策

WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコンテンツが拡大されないという問題が長年存在していました。この記事では、この問題の原因と解決策について解説します。

CSS の `reading-flow` プロパティで要素の読み上げ順を制御する

Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `reading-flow` プロパティ個の問題を解決するためのプロパティです。見た目上の順序に従って読み上げ順を制御することができます。