css

WebサイトのUIやアニメーションを制作する際、「自然なゆらぎ」や「規則性のないばらつき」を持たせたい場面は数多く存在します。例えば、クリック時に飛び散るパーティクル演出、星空の瞬き、文字が1文字ずつ時間差で光るホバーエフェクト、紙吹雪が舞...

Pinterestや画像ギャラリーサイト、ポートフォリオなどで定番となっている「Masonry（メイソンリー / 石積み）レイアウト」。カードや画像の高さがバラバラであっても、上下の不要な隙間をギュッと詰めてタイルのように美しく敷き詰めるこ...

Pinterestやギャラリーサイト、ECサイトの商品一覧などで大人気の**「メイソンリーレイアウト（Masonry Layout / レンガ積み風レイアウト）」**。カードごとに画像の縦横比やテキスト量が異なっていても、不要な縦の隙間を埋...

Web制作のレイアウト設計において、display: flex や display: grid の gap プロパティは、要素同士の余白を管理するための必須テクニックとして定着しました。しかし、デザイナーから「カードの間に縦の区切り線を入れ...

これまで、Webサイトの実務制作において「画面をスクロールしてヘッダーが上部に固定（sticky）されたら背景色をつける」「スクロールスナップで現在表示されている要素だけを強調する」といった演出を実装する場合、JavaScript（Scro...

CSSで文字に縁取りをつけたい。誰もが一度はぶつかる壁だ。そして多くの人が遠回りする。text-shadowを重ねたり、SVGに逃げたり、最悪画像化する。正直、それは遠回りだ。今のフロントエンドはもうそこまで原始的じゃない。text-str...

正直に言います。最初にcqwを見たとき、私は「また単位増えたのか」と思いました。vwがあり、vhがあり、vminがあり、vmaxがあり。そこに今度はcqw。もういいだろう、と。でも触ってみると分かります。これは単なる新しい単位ではない。レイ...

角丸と聞いて、何を思い浮かべますか。border-radius。たぶんそれだけです。四角を少し丸める。UIを柔らかくする。もう何年も前から当たり前に使ってきたCSSです。ただ、正直に言います。border-radiusだけでは、ずっと物足り...