ブラウザ毎のスクロールバーの幅を検証しました。レスポンシブデザインを作るときは、ビューポートに配慮する必要がありますが、デスクトップ向けブラウザの幅が分かればスマホなどにも対応できるでしょう。このページを読む

ol 要素などの数字付きリストを「1-1.」や「1.1.1」のように表記したいときは、CSS プロパティ counter-reset および counter-increment と、値 counters を使います。これらの CSS プロパティは h1 ~ h6 要素などにも使うことができます。IE8+ に対応します。このページを読む

スクリーンリーダによってテキストが読み上げられるとき、前後にテキストがなければ、上手く意味が伝わらないことがあります(例えば記号や図で表現されるコンテンツ)。 そこで、スクリーンリーダにだけ読めるテキストを、CSS を使って用意します。このページを読む

パフォーマンスを低下させる CSS の設定を排除して最適化することで、ページの描画速度を改善し、データサイズを小さくすることができます。ここではパフォーマンスを低下させる CSS の設定例と、それを改善するための設定例、10 項目を一覧します。このページを読む

Safari では検索フォームに padding が効ききません。appearance プロパティを設定してこの問題を解決します。-webkit-appearance: textfield; を設定します。このページを読む

WEB フォントやアイコンフォントの CSS を、実用の範囲で簡潔に設定します。?#iefix とそれに関連する問題についても解説しますが、このハックは使いません。IE8+, 多くのモダンブラウザ, Android, iOS などに対応します。このページを読む

IE8 は rem に対応しないブラウザです。互換性を保ちつつ rem を指定するためには px も同時に設定します。ところが IE8 では border-spacing に関しては rem を読み込んでしまいます。ただし rem は適切に処理されず、px の設定にもフォールバックしません。このページを読む