CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま

font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値（remやemなど）で指定する必

はじめに こんにちは！株式会社ユーザベース SaaS事業 Product Team の沖です。 この記事では、私がプロダクト開発中に遭遇した問題とその解決方法について共有します。具体的には、Flexbox 内の要素にカードのタイトルが「…」で省略される仕様を追加した際の課題に焦点を当てます。解決までの道のりを、レイアウト例を用いて説明していきます。この記事が、同様の問題に直面している方の参考になれば幸いです。 仕様を追加する前の画面の説明 仕様を追加する前の画面は、以下のようなレイアウトになっています。 ページ全体はヘッダー、サイドバー、コンテンツ領域で構成されています サイドバーとコンテンツ領域は Flexbox によって横並びに配置されており、サイドバーの幅は固定、コンテンツ領域は残りのスペースを埋めるような幅になっています コンテンツ領域には、Flexbox によって 2 つのセクシ

今月リリース予定のChrome 136で、訪問済みリンクの履歴検出攻撃を無効化する機能が実装される予定です。 簡単に説明すると、:visitedによるリンク履歴が分割される機能が実装され、サイトA上でクリックしたサイトBへのリンクは、サイトA上では訪問済みになりますが、サイトC上のサイトBへのリンクは訪問済みにはなりません。履歴にはサイトBへのリンクはサイトA上でという情報も加わるようになります。 Making :visited more private by Kyra Seevers 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに :visitedのリンク履歴を分割とは 同じサイト内の他のページへのリンクはどうなるか この機能の実装状況 はじめに リンクをクリックするとどうなる

iPhoneやiPad、Macでインターネットを楽しむためのウェブブラウザがSafariで、このSafariの開発中のテクノロジーをいち早く試すことができるプレビュー版が「Safari Technology Preview」です。このSafari Technology Previewにテキストを適切な文字数で折り返す「text-wrap: pretty」が導入されたのですが、その理由をWebkit開発チームが解説しています。 Better typography with text-wrap pretty | WebKit https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/ 「text-wrap」はCSSの一括指定プロパティで、要素の中のテキストを折り返す方法を制御するものです。この中でも「text-w

2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？　このスペースはテキストにline-heightプロパティを設定した際

コピペでできる！cssとhtmlだけの[clip-path]で作るブロックの一部につけるリボンデザイン8種

概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 3点リーダーとは 3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。 3点リーダーを実装するために必要な4つの設定 1、ボックスのwidthの指定 テキストが表示される領域の幅を指定します。 2、white-space: nowrap; テキストの改行を禁止し、1行で表示します。 3、overflow: hidden; テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。 4、text-overflow: ellipsis; 非表示の溢れた部分を3

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな

こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful

スピッカートの金山(@spicato_kana)です。 久しぶり（約 1 年ぶり）のテックブログです。。。 今回は、最近よく見かける『要素が重なっていく表現』を再現してみたいと思います。 参考サイトリスト Casa ZIZO 株式会社ニューピース Heure Bleue この表現を使うことにより、レイヤー感を出すことで奥行きを出し立体感、没入感を出すことが出来るのかなと思っています。 実装方法はいろいろありますが、今回は GSAP を使って実装してみたいと思います。 実装内容 実際のコード内容を上記の codepen をご覧ください！ 今回は、GSAP を用いていますが、GSAP を使わなくても IntersectionObserver を使って実装することも可能です。 また、GSAP のpinを使っているサイトが多いのですが、どうしても安定して実装することが難しく、iPhone だとずれ