azukiazusa.dev

#CSS

CSSの設計

今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコープ」「複雑化するWeb開発」といった問題点があげられます。そのような状態に対する解決策として、CSSの設計が誕生しました。

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る

カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。

`contrast-color()` 関数を使用した自動コントラスト調整

`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立ちます。

ボックスモデル

CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それらのボックスが組み合わさることによってページ全体が表現されます。 ボックスは CSS において最も基本的な概念であり、ボックスを理解することは CSS でレイアウトを構成したり要素同士を揃えるための手助けとなることでしょう。

アップグレードされた CSS の `attr()` 関数を使う

`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。

Sassの基礎文法

SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。