物理的な方向 ほとんどの人は画面の物理的な方向についての直感を持ち合わせているでしょうから、これについて追加の説明は不要かもしれません。しかし、せっかくなのできちんと前提を整理してみます。 CSSは主に2次元の視覚的なデバイスにおける文書のスタイルを規定します。このような視覚的なデバイスとして代表的なのが以下の2つです。 液晶などのディスプレイ (PC・タブレット・スマートフォンなど) 紙 これらは通常、机の上に横にして置かれるか、垂直に立てて使われるか、またはその中間の角度で閲覧されます。このとき、上下と左右は以下のように決められます。 画面の左右 (left /right) とは、閲覧者から見た左右です。 画面の上下 (top / bottom) はもう少し複雑です。 横置きの場合は、閲覧者から見た奥が上で、手前が下です。 縦置きの場合は、物理的な(重力に基づく)上下と一致します。 も
本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。 CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画1日目です。今日のテーマは「仕様書」です。 仕様書 CSSはWebの標準化団体であるW3Cによって標準化され、各ブラウザベンダによって実装されている規格です。 標準化して挙動を仕様書として書き起こすことによって、Webブラウザ間の相互運用性が高まり、Web開発者も互換性の高い記述を心掛けてCSSを書くことができるようになります。 とはいえ、仕様書と実装の関係は必ずしも一方向的ではありません。「仕様書に記載される → 実装される」というシンプルな順番であるとは限らないのです。実装されたものにあわせ
Intro CSS で Custom Ident 値を動的に生成する ident() が提案されている。 策定中の仕様をベースに解説する。 Anchor Name の動的生成 Popover の Anchoring は、anchor-name と position-anchor の組で対応付けられる。 <a id=anchor>this is anchor</a> <div popover>this is popover</div> <style> #anchor { anchor-name: --anchor; } [popover] { position-anchor: --anchor; } </style> 一方、以下のように複数の Anchor に対して、紐づけを変えながら単一の Popover DOM を再利用する場合も、全ての対象に anchor-name を振り、Popov
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As I write this in 2025, styled-components as a project is in "maintenance mode". There are a number of reasons for this: The React core team has decided to defac
この記事は、アクセシビリティ Advent Calendar 2024 - Adventar の10日目の記事です。 初めまして、たじまん です。zennのブログ投稿デビューします。 私はとある会社でアクセシビリティエンジニアという名前で、プロダクトチームのイネイブリングなどをするお仕事をしています。 このブログを書くことになったきっかけ 昨今のwebフロントエンド界隈では、コントラスト比やフォームコントロールのアクセシビリティネームをきちんと設定したりと当たり前品質が高まっている気がします。いろんな人がサービスを作る時の指針に「使えるの範囲の広さ」を入れていることが嬉しいです。 そこで、そういったアクセシビリティちょっと気にし始めましたというエンジニアへむけて「強制カラーモード」という使い方があることを紹介したいと思います。 強制カラーモードとは？ 強制カラーモードとは、色のコントラスト
どうもー、ついにニートから社会復帰したset0gut1です。職場に入って数日目に体験した怪奇現象を、小噺としてひとつ。 （そうは見えないかもしれませんが、この記事はLabBaseテックカレンダー Advent Calendar 2024の4日目の記事です。） mission: ボタンがチカチカするのを直す 新しい会社に入って数日目、仕事の雰囲気に慣れるため、ちょっと軽いタスクでもいただこうかなーと思って選んだのが ボタンがチカチカするのを直す みたいなチケットでした。で、 iPhone 実機で問題のボタンを押すと、たしかになんかチカチカしてる。 ↑こんな感じで、1回タップするとボタン部分の背景色が、約1秒間で gray → white → gray → white → gray みたいな感じに変化してました。 hover で色が変わるんだろうけど、一瞬 hover が途切れる挙動になってる
乗りこなせ！ モダンフロントエンド CSS Nesting Module/CSSの入れ子指定 ［CSS Modern Features no.4］ こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 CSS Modern Features、今回取り上げるCSSの機能はCSS Nesting Moduleです。 CSS Nesting Moduleは、CSS定義のネスト（入れ子）記述を可能とする新しいCSS構文です。CSSのネストはSassやPostCSSといったCSSプリプロセッサ経由で変換することで似た構文が使えるため、そちらをすでに利用したことのある人もいるかもしれません。 次のコードはCS Nesting Moduleの記述例です。 /* .mainクラスを持つ要素の 子孫のa要素のカラーを変更 */ /* 従来の記述 */ .main a { color: re
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Tooltip 今回は、Menu の実装を考えてみる。GitHub でいうとこの部分だ。 元となるボタンによって表示され、このボタンからの相対位置で調整されるため、Anchor Positioning を活用することになる。非常によくある実装パターンだ。 HTML の仕様にも、類似の実装が Example として掲載されている。 6.12 The popover attribute https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribut
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Cookie バナー 次は、「Cookie 利用への同意」、いわゆる Cookie バナーの UI について考えてみる。想定するのは以下のようなものだ。 前回の規約への同意と異なり、このバナーは画面表示時から右下に表示され、同意か拒否を選択するまで表示し続ける。つまり、表示中は他の操作をブロックしたりはしない。 つまり Dialog ではあるが Modal ではないため、show() する前提で実装を考えていく。 HTML HTML の注意点は、前回の規約と大きくは変わらない。 まず、最初から表示しておくために open 属
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
Intro ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。 とはいえ実装は popup とそんなに変わらないので、popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。 Intent to extend Origin Trial: Popover API https://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJ しかし、popover を実用するには足りていない議論があった。それが Animation だ。 Display and content-visibility animations <dialog> や popover
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-wwdc
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて
Chrome 129 Beta Chrome 129 Betaが2024-08-21にリリースされました。 position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。 本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。 前提知識: intrinsic-size(内在サイズ) intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。 現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く