flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素 […]

見た目はDTMツールですが、中身はOKLCHカラーでUIデザイン用のカラーパレットを生成できる無料ツールを紹介します。 ベースカラーを指定するだけで、6色で構成される美しいカラーパレットを瞬時に生成します。色相環を元にし […]

はじめまして。とま（@bath_ito）と申します。 本記事では個人的にこれからUIデザインの密かなトレンドになるのでは、と思っているInverted Border Radius Cardsについて紹介します。 Inverted Border Radius Cardsという名称はおそらく一般的なものではないので、正式名称をご存じの方は本記事またはXにてコメントいただけますと幸いです。 私がここで紹介するInverted Border Radius Cardsがどのようなものか、イメージの画像がこちらです。 Inverted Border Radius Cardsのイメージ画像主な特徴としては下記の2点です。 四角を他の四角で切り抜いた形 角丸が切り抜かれたそれぞれの角に適用されている ゲームの画面のようで先進的な印象もありながら、角丸で柔らかさもある、というこの表現がとても好きです。ただど

Published on December 8, 2025 Updated on December 21, 2025 Table of Contents Table of Contents はじめに CSS Masonry を振り返る CSS Houdini Layout API Grid ベースとして黎明したネイティブ CSS Masonry / grid-template-*: masonry; & masonry-auto-flow Firefox でのフラグ付き実装と Safari TP での実装 「Grid ベース」 か 「display: masonry」 か - “Just Use Grid” or “New Masonry Layout”? ItemFlow という転換点 The State of CSS Masonry Grid-Lanes ✅ Item Flow の導入

CSSに便利な機能が追加されます！ スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。 Solved by CSS Scroll State Queries by Bramus! スクロールの状態をクエリするCSSのscroll-stateに新しいタイプscrolledが使えるようになります。 スクロールが可能であることを表すscrollableとは異なり、scrolledは、最後にスクロールした方向を記憶します。これを利用することで、「非表示バー」を作成できます。つまり、下にスクロールすると（または下にスクロールした後）、非表示バーは非表示になります。その後、上にスクロールすると、非表示バ

はじめに Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。 この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう！ 1行の省略表示 CSSでテキストが1行の時に省略表示をするのはtext-overflow: ellipsisプロパティを使用し、シンプルに実装できます。 コード例 .ellipsis-one-line { overflow: hidden;

このツールでは、Appleのアプリアイコンなどに採用されているような滑らかな角丸四角形をCSSのclip-pathを使って再現し、そのコードをコピーできたり、SVGをダウンロードできるようになっています。角丸の形式はCorner Typeから選べるようになっています。それぞれの角丸の形式ごとに個別のパラメータがありますが、それは後述します。 調べてみたきっかけきっかけとしては、AppleのWWDC2025のセッションでした。話題になったLiquid Glassの紹介の動画を見ていたら、Appleやその他のSNSなどで結構前からすでに色んなところで使われている、角が滑らかな四角形がUIに使われており、あらためて「やっぱり普通の角丸よりも美しいな」と思うと同時に、これCSSでできるんだっけ？と思ったのが最初の取っかかりでした。 The latest project I’ve been work

calc-size() は 2024 年 9 月 14 日時点で Chrome v129 で #enable-experimental-web-platform-features フラグを有効にすることで利用可能です。 CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。アニメーションを適用するためには、具体的な値を指定する必要があるためです。そのため、JavaScript を使って要素の高さを計算してアニメーションを実装することが一般的でした。 このような問題を解決するために、calc-size() 関数が提案されました。この関数は calc() とよく似ていますが、calc-size() は auto, min-content, max-content, fit-content, stretch,

公開日: 2025 年 7 月 23 日 Microsoft Edge チームと Google Chrome チームは、Chrome と Edge 140 から CSS masonry の早期デベロッパー テストを開始できるようになったことをお知らせします。 CSS masonry の仕様と構文に関する未解決の問題が残っているため、API の最終的な形を固めるうえで、皆様からのフィードバックが不可欠です。ぜひこの機能をお試しいただき、ご意見をお聞かせください。 Chromium で CSS Masonry を今すぐお試しください CSS Masonry をテストするには: Chrome または Edge 140 以降（または、対応するバージョンの別の Chromium ベースのブラウザ）を使用します。 新しいタブで about:flags に移動します。 「CSS Masonry Layo