CSS のアニメーションを適用している要素を、マウスオーバー（:hover）したときに一時停止させたいことがあります。その場合は animation-play-state を利用します。animation-play-state はアニメーシ...

Web アクセシビリティを考慮する上で、不要な情報をスクリーンリーダーに読み上げさせないことは重要です。そのために使われる属性が aria-hidden です。しかし、誤った使い方をすると逆にユーザー体験を損ねる可能性があります。この記事で...

CSS の backdrop-filter プロパティを使うと、要素の背後にある背景に対して「ぼかし」「明るさ調整」「彩度変更」などの効果を適用できます。ガラスのような半透明デザインや、背景を目立たせずに前面コンテンツを読みやすくする表現に...

CSS で要素に影をつける方法には box-shadow と filter: drop-shadow() の2種類があります。一見すると似ていますが、仕組みや用途には明確な違いがあります。本記事では drop-shadow() の基本的な使...

Web ページのデザインによっては、見出しやボタンなどのテキストを1行に収めて表示したいケースがあります。CSS では white-space プロパティを使うことで、テキストが自動で折り返されないように制御できます。本記事では、改行をさせ...

SVG はアイコンやイラストに広く使われる形式で、CSS を使って柔軟に色を変更できます。ただし、埋め込み方法（<img> / CSS 背景 / インライン SVG）によって適用できる手段が異なります。本記事では SVG の色変更テクニック...

Flexbox を使った横並びレイアウトで、テキストが微妙に下へ寄って見えることがあります。原因は「交差軸のそろえ方」「ベースライン揃え」「行の余白（line-height）」「アイコンや画像のインライン挙動」のいずれかに集約できます。代表...

「画像を角丸でトリミングしたい」「縦横比がバラバラでも枠いっぱいに綺麗に切り抜きたい」。そんなときは object-fit: cover; を画像自身に指定するだけで解決できます。枠（幅・高さ・角丸）を先に決め、画像は「はみ出してもよいから...

スクロールに追従する見出しやサイドナビを作る際に便利な position: sticky。しかし「効かない」「固定されない」ケースは少なくありません。多くは指定忘れや親要素のレイアウト条件が原因です。代表的な落とし穴と、確実に動かすためのチ...