CSSの進化が止まらない！ 自分でオリジナルの関数を定義できるようになります、Chrome 139で新しく追加された6個のCSSの機能
昨日アップデートされたChrome 139に追加された、CSSの新しい機能を紹介します。 今回のアップデートの目玉は、CSSでオリジナルの関数を定義できるカスタム関数、角を自由にスタイルできるcorner-shapeプロパティ（アニメーションもできます！）など、Web制作者は要チェックです！ New in Chrome 139 Chrome 139 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのカスタム関数 var()とattr()の短絡 CSSのcaret-animationプロパティ 角をスタイルできるcorner-shape 初期値に切り替えても、実行中のトランジションを継続する svg要素の幅と高さをプレゼンテーション属性としてサポート はじめに 8/
CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。 Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。 What CSS length unit should you use? 以下は、そのフローの解説です。 フローの入り口は、下記のように分かれています。 ポジショニング、ディテール・エフェクトに適したCSSの単位 スペースに適したCSSの単位 フォントサイズに適したCSSの単位 FlexboxとGridに適したC
CSSで実装したグリッチの揺れるエフェクトがかっこいい！ 映画で見かけるようなサイバーなUI -CyberPopover 2025
まさにクール！ 映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。 下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあります。また、アクション時の音もかなりサイバーです。 グリッチの動作は、下記ページでお楽しみください。 ボタンをクリックしたときの電子音も心地よいです（特にProceed）。また、キーボード操作（U, Esc, Return）にも対応しています。 See the Pen CyberPopover 2025 by coliss (@coliss) on CodePen. アクション時の音とキーボード操作はJavaScriptで実装されていますが、それ以外はHTML+CSSで実装されています。とはいっても、コードはかなり複雑です。たとえば、ボタンのHTMLだけでも下記の通りです。
CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説
5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。 新機能なので、実際にどのように使えばよいのか分からないことも多いと思いますので、if()関数の便利な使い方を紹介します。 たとえば下記のCSSだと、ボタンの幅はマウスで操作できるデバイス（デスクトップなど）だと30px、タッチデバイスだと44pxになります。 CSS conditionals with the new if() function 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if()関数のデモ: インラインのメディアクエリ if()関数のデモ: インライン
CSSのclip-pathとshape()関数で切り抜き表現の引き出しを増やそう！ - ICS MEDIA
CSSのclip-pathを使うと要素を好きな形に切り抜けます。コンテンツを斜めに切り抜いたり、画像を丸く切り抜いたり、おそらくみなさんも見たことがある表現なのではないでしょうか？ clip-pathでは形を切り抜くための関数が利用できます。2025年4月ごろにリリースされたChrome 135、Edge 135、Safari 18.4にはshape()関数が追加されました。shape()関数を使うとより自由度の高い切り抜きが可能になります。 今回の記事ではclip-pathとshape()関数でどんな表現ができるかをご紹介します！ clip-pathとは まずはclip-pathについて簡単に確認しましょう。 冒頭でも紹介した通り、clip-pathでは要素を切り抜くためのクリッピング領域を作ります。circle()、rect()、path()、polygon()などの関数を使うことで、
CSSでheight: autoでもアニメーションが可能に! interpolate-sizeとは - ICS MEDIA
UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例 Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、
これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能
先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！ 特にstretchキーワードは、朗報です。 width: calc(100% - 48px);で全幅からマージン分を引いていたのをwidth: stretch;だけで利用可能な幅いっぱいを占めるようにできます。 New in Chrome 138 Chrome 138 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに width: 100%;のより良い代替手段width: stretch; CSSの符号関連関数: abs(), sign() OSレベルの
CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック
CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース（ギャップ）をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。 アイテム間にボーダーを設置したり、交差するボーダー、交差しないボーダー、さらにはノートの罫線のように太いボーダーと細いボーダーの混在も実装できるCSSのcolumn-ruleプロパティを拡張するテクニックを紹介します。 A new way to style gaps in CSS 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに カラム間のスペースを設定するときの問題点 解決方法: CSSの新しいプロパティが便利すぎる カラム間のスペース（ギャップ）をスタイルするこれからの方法 終わりに はじめに ボーダー
簡単な手順でWebページの読み込み時間を高速化！ クリティカルCSSを抽出してくれるツール -Critical CSS Generator
クリティカルCSSとは、Webページで最初に表示される部分（ファーストビュー）をレンダリングするために必要な最小限のCSSです。このクリティカルCSSを既存のWebページから抽出し、HTMLにインラインのCSSとして記述することでファーストビューで使用するCSSのリクエストがなくなり、ブラウザはすべてのCSSを読み込むのを待たずにWebページをより速くレンダリングできます。 既存のWebページからクリティカルCSSを抽出して、インラインで記述する用のCSSを書き出してくれるオンラインツールを紹介します。 Critical CSS Generator クリティカルCSSを使用する主な利点 Critical CSS Generatorの使い方 クリティカルCSSの記述方法 クリティカルCSSを使用する主な利点 クリティカルCSSを使用する主な利点は、下記の3つです。 Webページの体感的な読み
CSSのreading-flowプロパティが便利！ CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます
CSS GridやFlexboxは便利でよく使用していると思います、ただし、見た目の順序とDOMツリー内の順序が一致しないことがあります。これはキーボードやアクセシビリティツールで操作するユーザーにとって非常に問題です。 この問題は、CSSのreading-flowとreading-orderプロパティを使用すると解決します。CSS GridやFlexbox、さらにはブロックコンテナの各アイテムの順序をCSSで設定する方法を紹介します。 Use CSS reading-flow for logical sequential focus navigation 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに -新しいプロパティを設計した経緯 reading-flowプロパティとは r
CSSのカスケードレイヤーが便利！ 複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate
小規模のプロジェクトをはじめ、大規模のプロジェクトもサポートしたCSSのベースとなるテンプレートを紹介します。 大きな特徴は、@layerでCSSの構造を明確にし、リセットCSSやサードパーティのCSS、オリジナルのCSSなどのカスケードをより効率よく管理できることです。詳細度や!importantに頭を悩ますこともなくなります。 /* 事前にレイヤーの順序を決定する */ @layer core, third-party, components, utility; @layer core.reset, core.tokens, core.base; @layer third-party.imports, third-party.overrides; @layer components.base, components.variations; /* リセットCSSやノーマライズ */ @i
スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 - ICS MEDIA
スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 @container scroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。 本記事では、scroll-state()の使い方とできることを作例で紹介します。 コンテナークエリーは、記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』で紹介しています。コンテナー幅でのレイアウト制御にかかわらず、インタラクティブなUI構築にも役立ちます。コンテナークエリーの可能性の広さを感じ取っていただけたら嬉しいです。 ※本記事の作例は、Chrome 133・Edge 133（2025年2月）以上でご覧ください。
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 137 Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+
モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。 スタイルをリセットしたり、ノーマライズするのではなく、既存のUAスタイルシートを改善し、ブラウザの仕様が不十分な要素にのみスタイルを適用することに重点を置いた、これまでとは異なる新時代のリセットCSSを紹介します。 UA+ UA+ -GitHub UA+の特徴 他のリセットCSSとの比較 uaplus.cssの中身 uaplus.cssの中身（コメント付き） UA+の特徴 UA+（ユーザーエージェントプラス）は、これまでのリセットCSSとは異なるタイプのスタイルシートです。各プロパティのリセットとノーマライズ（正規化）を行うのではなく、既存のUAスタイルの改善に注目し、ブラウザの仕様が
標準のHTML+CSSでスコープ化が可能に！ @scope入門 - ICS MEDIA
CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま
このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック
テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。 実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。 まずは、実際のデモをご覧ください。 上部でダーク・ライトモードにしたり、アクセントカラーを変更できます。 See the Pen Focus table rows with :not(:focus-within) by coliss (@coliss) on CodePen. HTMLは、普通のテーブルです。 <table role="grid"> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> <th>Subscription</th> </tr> </thead> <tbody> <tr>
JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA
2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。
最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū
最近はHEXコードから脱却して、色彩が豊かなOKLCH値のカラーを使用しているWebサイトやスマホアプリが増えてきました。さまざまなプロジェクトで使用できるOKLCHのカラーパレットをまとめたCSSを紹介します。 「uchū」は日本語の「宇宙」で、作者が日本のスタイルや美学などが大好きで、すべてのプロジェクトに使用するという意味を込めてこの名前にしたとのことです。 uchū uchū -GitHub uchūはWebサイトやスマホアプリのUIデザインで、OKLCHカラースペースを利用するために作成されたカラーパレットです。 ライセンスはUNLICENSEで、カラーにライセンスなんていらないでしょ笑、とのことです。
カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説
Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。 これらを使用すると、これまでJavaScriptなしでは実装できなかったカルーセルをCSSだけで実装できるようになります。その実装方法、CSSで実装したさまざまなカルーセルを紹介します。 Carousels with CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ::scroll-button()と::scroll-marker()の新しい疑似
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「これ試してみたい」がきっと見つかる、Web制作の最新ツール＆テクまとめ【2025年5月版】