Web技術 【CSS新時代】Masonryレイアウトがついに標準化へ！CSS Grid Lanes（grid-template-rows: masonry）の使い方と実装テクニック
Pinterestや画像ギャラリーサイト、ポートフォリオなどで定番となっている「Masonry（メイソンリー / 石積み）レイアウト」。カードや画像の高さがバラバラであっても、上下の不要な隙間をギュッと詰めてタイルのように美しく敷き詰めるこ...
css
Web技術 Web技術 【CSS新時代】JavaScript不要！CSSだけでメイソンリーレイアウトを実現する「display: grid-lanes」完全攻略ガイド
Pinterestやギャラリーサイト、ECサイトの商品一覧などで大人気の**「メイソンリーレイアウト（Masonry Layout / レンガ積み風レイアウト）」**。カードごとに画像の縦横比やテキスト量が異なっていても、不要な縦の隙間を埋...
Web技術 【CSS最新仕様】gapに線を引く！FlexboxとGridで簡単に罫線を作れる新しいCSSプロパティを徹底解説
Web制作のレイアウト設計において、display: flex や display: grid の gap プロパティは、要素同士の余白を管理するための必須テクニックとして定着しました。しかし、デザイナーから「カードの間に縦の区切り線を入れ...
Web技術 【JS不要】CSSだけでスクロール状態を検知！最新機能 scroll-state() の使い方と実務で使える実装パターン
これまで、Webサイトの実務制作において「画面をスクロールしてヘッダーが上部に固定（sticky）されたら背景色をつける」「スクロールスナップで現在表示されている要素だけを強調する」といった演出を実装する場合、JavaScript（Scro...
Web技術 CSSと最小限のJSで魅せる、ローディングからメインビジュアルへの滑らかな遷移演出
Webサイトにアクセスした瞬間、洗練されたローディングアニメーションが走り、途切れることなく滑らかにファーストビュー（メインビジュアル）へと繋がっていく演出は、ハイクオリティなコーポレートサイトやブランドサイトにおける定番の手法です。こうし...
Web技術 text-strokeとpaint-order: strokeを使い倒せ。縁取り文字の最終解
CSSで文字に縁取りをつけたい。誰もが一度はぶつかる壁だ。そして多くの人が遠回りする。text-shadowを重ねたり、SVGに逃げたり、最悪画像化する。正直、それは遠回りだ。今のフロントエンドはもうそこまで原始的じゃない。text-str...
Web技術 CSSのcqwとは何か 2026年のコンテナ時代に知っておきたいcontainer query unitsの本質
正直に言います。最初にcqwを見たとき、私は「また単位増えたのか」と思いました。vwがあり、vhがあり、vminがあり、vmaxがあり。そこに今度はcqw。もういいだろう、と。でも触ってみると分かります。これは単なる新しい単位ではない。レイ...
Web技術 corner-shapeとは 角丸表現をCSSだけで次の段階へ進めるための新しい考え方
角丸と聞いて、何を思い浮かべますか。border-radius。たぶんそれだけです。四角を少し丸める。UIを柔らかくする。もう何年も前から当たり前に使ってきたCSSです。ただ、正直に言います。border-radiusだけでは、ずっと物足り...
Web技術 Noto Sans JPを迷わず使う 2026年版Web制作者のための最新実装メモ
日本語のWebサイトって、結局フォントで八割決まります。言い過ぎに聞こえるかもしれないけど、UIが丁寧でも文字が荒れると一気に安っぽく見える。逆も同じで、文字が落ち着いているだけで「ちゃんとしてる感」が出る。ずるい。だからこそ、Noto S...
Web技術 最近のCSS 5選 2026年版inset min max clamp is where auto-fit auto-fillで差が付く実務テク
CSSは不思議な世界です。昨日までの正解が、今日も正解とは限らない。 ただし安心してください。全部を追いかける必要はありません。 「よく出るやつ」から順番に覚えると、制作スピードと保守性がちゃんと上がります。この記事は、現場で出番が多い最近...