概要 各コンポーネントに指定するz-indexの値を定義する。 モチベーション z-indexの衝突を避けたい z-indexの指定を理由を明確にしたい コンポーネントが増えるたびにz-indexの定義を増やしたくない 前提知識 重ね合わせコンテキスト（スタッキングコンテキスト）という概念があることを前提に話を進めるため、以下のページを合わせて読むと理解がしやすい。 重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN （スタッキングコンテキスト） isolation - CSS: カスケーディングスタイルシート | MDN z-indexのルール 複雑さを避けるため以下のルールを設ける。 各コンポーネント内のz-index指定を極力少なくする z-indexは0から4までの値を使用する（後述のLayer Stackに基づく指定をする） -1などの負数は使用しな

メディアクエリとして知られる@mediaやCSSアニメーションで使われる@keyframesなど、CSSには@から始まるさまざまなルールがあります。その中にある@propertyというルールはご存知でしょうか？ CSS変数の定義をより細かく設定できるものですが、実はアニメーションにも活用できる意外な隠し能力があります。今回は@propertyについてと、そのアニメーションへの応用方法について解説します。 サンプルを別ウインドウで開く コードを確認する @propertyとは？ @propertyはCSS変数の定義を宣言できるルールです。その変数の型や初期値、継承の有無などを設定できます。次のコードは--custom-colorという変数の定義です。 @property --custom-color { syntax: "<color>"; inherits: false; initial-

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のApache License 2.0に基づいて翻訳しています。 はじめに コンポーネント: field-sizingプロパティ コンポーネント: interpolate-sizeプロパティ コンポーネント: details要素 コンポーネント: details要素のスタイル コンポーネント: Anchor positioning インタラクション: スクロールバーのスタイル インタラクション: @v

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。 Control the Viewport Resize Behavior on mobile with interactive-widget by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デフォルトのビューポートのサイズ変更動作 metaタグのinteracti

この記事は「Commune Advent Calendar 2024」シリーズ2の7日目の記事です。 1. はじめに はじめまして。Communeでエンジニアをしています、佐々木です。普段の業務ではフロントエンド・サーバーサイド両方の実装を行なっています。 今回は、実際に動く時計をできるだけCSSだけで作ってみて、CSSアニメーションでできることを紹介しようと思います。 2. この記事で取り上げる内容 クラシカルな感じの時計を作成しました。この記事では、時計の針が時間を刻むようにするためのアニメーション設定部分のみを取り上げます。 コード全文はCodePen上で公開しています。 3. CSSアニメーションについて CSSではanimationプロパティと@keyframesルールを使って、javascriptを使わずにアニメーションを実装することができます。animationプロパティはア

ウェブサイトに欠かせない画像コンテンツ。Adobe Photoshopなどで加工し書き出すことも多いですが、SVGフィルターを使用すると同じように複雑な効果を表現できます。 本記事では、SVGフィルターを使っていろいろな雰囲気の画像加工の作例を紹介します。数値を変えると雰囲気もガラリと変わりますのでコピペして色々とお試しいただき、ぜひ取り入れてみてください。 SVGフィルター実装方法の概要 作例紹介の前に、今回の実装方法について概説したいと思います。SVGフィルターの適用にはCSSのfilter: url()を使用します。 コードで画像加工を行う簡易的な方法として、CSSのfilterプロパティを使う方法が挙げられます。filterプロパティに指定できるCSS関数はいくつか用意されており、blur()関数でぼかしたり、contrast()でコントラストを強めたりと簡単な加工が行えます。 こ

こんにちは！ 株式会社iimonにてエンジニアをしております、分割マスターのほでぃです。 この記事はiimonアドベントカレンダー6日目の記事です。 今回はCSSフレームワーク「Panda CSS」を紹介します。 この記事ではPanda CSSの利点や基本的な使い方について整理していきます。 Panda CSSとは Panda CSSは、Chakra UIチームが開発した新しいCSSフレームワークです。 特徴は「ゼロランタイムCSS-in-JS」で、パフォーマンスや型安全性を重視しています。 panda-css.com Panda CSSの特徴 ゼロランタイム：静的なCSSをビルド時に生成し、ランタイムのオーバーヘッドを削減。 型安全：TypeScriptを活用した補完機能で効率的にコーディング可能。 軽量: アトミックCSSで重複のない最小限のCSSを生成。 最新機能対応: @layer

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ

はじめに CSSでランダムな値を指定したいと思ったことはありますか？ 僕はありません。 ただ、CSSでランダムな値を扱う random()・random-item() 関数が 2024年11月現在 Editor's Draft となっており、近いうちにCSSでランダムな値が指定できるようになることでしょう。 そのため、この記事では random()・random-item()関数の使い方を紹介しようと思います。 random() 関数 random() 関数は、均一分布から抽出された最小値と最大値の間のランダムな値を表す数学関数です。 また、オプションで選ばれる値を最小値と最大値の間のステップを制限できます。 random() 関数は、以下のような引数に受け取ります。

CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。 Animate to height: auto; in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに autoなどのキーワードをアニメーションさせる方法

CSSで特定の形に切り抜く（マスキングする）にはmask-imageプロパティが便利です。マスク用の画像をmask-imageプロパティを使って要素に適用すれば、その画像の不透過部分のみにマスキングできます。mask-imageプロパティに関連して2024年から使用可能になったmask-compositeプロパティを使うと、マスクの合成方法を指定でき、より幅広いマスク表現ができるようになりました。この記事ではmask-compositeプロパティについて解説します。 サンプルを別ウインドウで開く コードを確認する mask-compositeプロパティの値とそのマスク結果の違い mask-compositeプロパティは、複数のマスク画像をどのように合成するかの方法を指定するためのプロパティです。実はmask-imageプロパティは複数画像の指定にも対応しています。複数画像からマスク領域を生

JavaScript でスタイルシートを構築する CSSStyleSheet 2024.10.26 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ

Chrome 130で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートではCSSネストがより便利になり、box-decoration-breakのサポート、コンテナクエリのフラットツリー検索など、Web制作者は要チェックです！ New in Chrome 130 Chrome 130 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSコンテナクエリのフラットツリー検索 CSSネスト: 入れ子になった宣言ルール プレフィックスなしのbox-decoration-breakを完全サポート ::part()の後に疑似要素と疑似クラスを許可 はじめに 10/16にリリースされたChrome 130で4つのCSSの新しい機能が追加されました。対象となるCh

CSSの実装に便利なVS Code用の機能拡張がリリースされました！ レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。 Clamp It! -GitHub Clamp It! -Visual Studio Marketplace レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 Clamp It!の使い方 Clamp It!のインストール レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 レスポンシブ用のフォントサイズを設定するには、CSSのclamp()関数が便利です。たとえば、ルート要素が16pxで、スクリーンのサイズごとにフォントサイズを変えるとします。 480pxのスクリーン: 1.rem 16.8px 800pxのスクリーン: 1.25rem 20px 100

CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を返すrandom()関数、位置を示す論理プロパティなど、魅力的な機能ばかりです。一部はすでにブラウザに実装されており、ブラウザのサポートも年々早くなっていますね。 New Features and Functions Arriving in CSS by Alvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに attr関数の変更 キーワード

CSS Anchor Positioning は、要素の配置を制御する新しい仕様で、指定した要素（アンカー要素）の位置を基準に、要素を配置できます。 ポップオーバーやツールチップ、トーストなどをはじめとした、さまざまな UI コンポーネントの実装に利用できます。 特に CSS Anchor Positioning による要素の配置には、「配置する要素が表示領域に収まらない場合の挙動を制御できる」「Popover API などによって Top Layer に配置される要素であっても、アンカー要素を基準にその位置を制御できる」といった特徴があります。 これまでは、JavaScript を用いて要素の座標やサイズを計算し、それを元に要素を配置する方法が一般的でした。CSS Anchor Positioning を用いることで、そのような処理を CSS で行うことが可能になります。 CSS Anc

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示

乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()⁠⁠、:is()⁠⁠、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載していきます。モダンな仕様の紹介・普段使っているライブラリのコア部分で何が行われているのかの解説・ハンズオンなど、さまざまな内容でお届けする予定です。 CSSの進化 本連載での最初のコンテンツは「CSS Modern Features」です。 CSSの表現力は年々新しい仕様の策定や実装とともに進化しています。従来であれば複雑なCSS定義が必要であったものが簡潔に表現できたり、Ja