CSSの記述はこれで大きく変わる！ セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方を解説

2023/11/09 73 users Scope img Card content CSS

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基... 続きを読む

CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方

2023/08/30 24 users Scope img CSS Chrome HTML

CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimg... 続きを読む

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

2023/05/30 7 users デベロッパーツール CSS Chrome 普段

ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。 CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたア...記事の続きを読む 続きを読む

CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む

2023/01/31 75 users 末尾 CSS ＩＳ 疑似クラス 一致

CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません... 続きを読む

知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

2022/11/29 26 users Has CSS 疑似クラス 要素 子要素

CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単で... 続きを読む

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ

2022/09/08 185 users Has CSS 偶数 奇数 疑似クラス

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追... 続きを読む

Tailwind CSSの実装やデバッグに便利！ 各セレクタに対応したプロパティや値を表示するデベロッパーツールの機能拡張 -Tailwind DX

2022/06/28 19 users デベロッパーツール デバッグ プロパティ 実装 P-1

デベロッパーツールでTailwind CSSの各セレクタに対応したプロパティや値を実装・デバッグできるChromeデベロッパーツールの機能拡張を紹介します。 .m-1や.p-1といったセレクタをはじめ、:smや:lgなど...記事の続きを読む 続きを読む

新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset | コリス

2021/07/19 28 users コリス CSS unset CSSリセット where

CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset... 続きを読む

CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方 | コリス

2021/04/07 8 users where コリス CSS ＩＳ ブラウザ

CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。 :where() has a cool specificity trick, too. by Chris Coyier 下記は各ポイントを... 続きを読む

CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス

2020/11/17 199 users コリス 意訳 CSS フォーカス 疑似クラス

CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳... 続きを読む

CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利 | コリス

2020/10/21 134 users プレビュー版 来年 コリス ブラウザ ツイート

CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。 :is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。 画像はツイートより 元ツイートは、こちら。 How slick :is(this CSS!?) ? removes t... 続きを読む

CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ | コリス

2020/06/17 200 users where コリス CSS Safari Firefox

複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳... 続きを読む

Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ

2019/12/10 10 users Tailwind CSS フロントエンド開発 追い風 CSS

10km40分切りが2020年の目標、メドピア長距離部の小宮山です。 みなさんTailwind CSSはご存知でしょうか。tailwindとは「追い風」を意味します。最高に気持ちよく走れるコンディションですね。 目次 サービス概要 技術概要 Tailwind CSSとは何か HTMLとCSS HTMLとCSSとコンポーネント コンポーネントと雑なセレクタ コン... 続きを読む

CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則 | コリス

2019/11/07 341 users コリス important CSS 命名 上書き

CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with ... 続きを読む

CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方 | コリス

2019/07/30 47 users コリス class not 上書き CSS

:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場... 続きを読む

ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita

2019/06/05 95 users レンダリング 描画速度 Qiita パパ 太郎

ある日のやめ太郎一家 娘（3歳）「パパ、レンダリング最適化されたCSS書いてる？」 ワイ「なんやレンダリングって」 娘「ブラウザがWebサイトを描画することだよ」 ワイ「ああ、そのレンダリングか」 ワイ「よう知っとるわ」 よめ太郎「（CSS関係で他にどんなレンダリングがあんねん）」 ワイ「ワイはいつも描画速度を意... 続きを読む

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス

2019/04/11 512 users 実装 テクニック コリス プロパティ 下記

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したもので... 続きを読む

すごく分かりやすい！CSSのセレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet | コリス

2019/04/05 585 users コリス CSS くら チートシート PDF

CSSのセレクタがいまいち、という人にお勧めです！ セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。 このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくら...記事の続きを読む 続きを読む

CSSのセレクタチートシート | webliker

2019/02/07 771 users CSSセレクタ CSS チートシート コード あなた

CSSセレクタのチートシート CSSのセレクタのチートシートです。コードはコピペできるようになっています。詳しいコードの使い方は「あなたはいくつ知ってる？CSSのセレクタ40個を総まとめ」をご覧ください。 続きを読む

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

2018/11/22 235 users CSS yuhei blog CSS in JS 根源 書き方

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出され... 続きを読む

[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック | コリス

2018/11/02 145 users コリス CSS テクニック 条件分岐 モダンブラウザ用

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？ CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介します。 Using Feature Detection, Conditionals, and Groups with Selectors 下記は各ポ... 続きを読む

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる | コリス

2018/06/19 164 users 範疇 アニメーション コリス 実装 ラベル

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装...記事の続きを読む 続きを読む

相対的なネーミングはよせ、やめるんだ！ - Qiita

2018/05/05 298 users Qiita 中略 変数 CSS ネーミング

たぶん1000回くらいは言われてきているがいまだに絶滅しないので、もう1回言う。 ファイル名 でも ソースコード上の変数 でも CSSのセレクタ でもなんでもいいけど、相対的なネーミングはやめよう。 Safe Harbor Statement この投稿は個人の（中略）であり、所属する組織とは関係ありません。 なぜ相対的なネーミングをしてはいけないか 名前をつけた人の主観が入り込むため 時間が経つに... 続きを読む

Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス

2018/03/28 118 users コリス CSS Chrome デベロッパーツール テクニック

Chrome デベロッパーツールは便利ですけど、こんな便利な機能もあったのですね。 要素に適用されているCSSのセレクタ・プロパティ・値が、どのCSSファイルのどこに記述されているのか1クリックで見つけ出すことができる便利なテクニックを紹介します。 続きを読む

[CSS]簡単で便利！ページで使用されていないCSSのセレクタを見つける無料ツール -Unused CSS | コリス

2018/02/19 79 users コリス CSS Unused CSS 複数 無料ツール

指定したWebサイトで、使用されていないCSSのセレクタを自動で検出する無料オンラインツールを紹介します。 ページ内部のリンクも再帰的に調査し、複数のページにも対応しています。 Unused CSS finder Unused CSS finderの特徴 Unused CSS finderの使い方 Unused CSS finderの特徴 Unused CSS finderは指定したWebサイトの... 続きを読む