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

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

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

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

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

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

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 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳... 続きを読む

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

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

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

ブラウザ君「ワイは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サイトの... 続きを読む

あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方 | コリス

2017/11/21 264 users コリス input要素 CSS 見た目 要素

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jo... 続きを読む

【イベントレポート】ついに明らかになった3D XPointメモリの正体。外部企業がダイ内部を原子レベルで解析 ～相変化メモリとオボニックスイッチで構成 - PC Watch

2017/08/15 54 users 原子 Micron 正体 解析 相変化メモリ

3D XPointメモリのメモリセルアレイと特徴。IntelとMicron Technologyが2015年7月28日に共同で発表した資料から 　3D XPoint(スリーディークロスポイント)メモリの正体がついに明らかになった。記憶素子技術は「相変化メモリ」、セル選択スイッチ(セレクタ)技術は「オボニックスイッチ」である。といっても、3D XPointメモリを共同開発したIntelとMicron... 続きを読む

宣言ブロックのCSS設計｜Web Design KOJIKA17

2017/07/18 682 users CSS設計 Web Design KOJIKA17 CSS

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の... 続きを読む

43型4KレグザをPCとゲーム用モニタとして使う。PS4 Proとの相性もばっちり (導入リポート) - Engadget 日本版

2017/05/03 56 users 相性 Engadget 日本版 PS4 Pro ウンザリ 手動

どうして安くなってるPC専用ディスプレイではなくテレビを選ぶのか。手短に言うと「筆者がズボラだから」だ。そろそろ4Kテレビもほしい、PC用セカンドディスプレイも買い替えたい。しかし別々に買うとおカネ以上に場所を取る。 それに「一つのディスプレイをPCやゲーム機に使いまわし」は前からやっていたが、入力の切り替えが面倒くさい。HDMIやディスプレイポートを手動で選ぶのウンザリ、外付けのセレクタも動作不... 続きを読む

jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector | コリス

2017/04/18 153 users selector jQuery GitHub コリス 代替

jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 K... 続きを読む

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS | コリス

2017/03/14 95 users コリス アクセシブル valid セマンティック CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox コーディング CSSアニメーション

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

現場で役立つ実践Sass（2）セレクタをもっと便利に書く | Adobe Creative Station

2016/01/27 54 users Sass ネスト 実践Sass Tips CSS

Sassの便利な機能としてまず最初に挙げるとすれば、セレクタをネストして記述できることでしょう。 ネストできることにより、CSSでは繰り返し書く必要があった子孫セレクタをまとめて書くことができ、記述量が減って、コードの見通しも良くなります。ネストができないCSSにはもう戻れないという方も多い…はず。 第二回目の今回は、セレクタ周りのTipsを紹介します。 ※今記事はRuby Sass 3.4.21... 続きを読む