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

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でスタイルするために役立つ便利なセレクタとその使い方 | コリス

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

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

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

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

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

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... 続きを読む

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

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

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

[CSS]Webページでよく利用されるテクニックに役立つ！使い方をしっかりマスターしておきたい便利な5つの疑似クラス | コリス

2015/08/07 142 users コリス CSS 疑似クラス HTML テクニック

CSS3のセレクタには便利なものがたくさんあり、複雑なHTMLやJavaScriptを使用しなければ実現できなかったことが非常に簡単なコードで実装できます。 Webページでよく利用されるテクニックに役立つ便利な5つの疑似クラスを紹介します。 5 Lesser Used CSS Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。... 続きを読む

CSSセレクタの名前を付けるときに考えていること - morishitter blog

2014/06/22 117 users CSSセレクタ class CSS 命名 class名

2014-06-23 CSSセレクタの名前を付けるときに考えていること idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。 個人的にはセレクタにidは使わない派です。 先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意している。 それほどにCSSでは命名が大切だと思う。 そこで僕が普段ど... 続きを読む

CSSのセレクタがちょっとあやふやな人はやってみて！　楽しみながらCSSのセレクタを学ぶ -CSS Diner | コリス

2014/03/24 225 users コリス plate CSS Enter HTML

ゲーム感覚で楽しみながら、CSSのセレクタを学ぶことが出来るオンラインコンテンツを紹介します。 CSS Diner 遊び方は簡単！ お皿や料理などのアニメーションしている箇所をCSSのセレクタで指定していきます。 L.1にセレクタを入力 1問目はお皿が二枚アニメーションしているので、右のHTMLを参考にしながら「plate」を入力。 セレクタ入力後は「Enter」キー 間違うと、お皿がぶるぶる震え... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld ウインドウサイズ アコーディオン プラグイン

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

jQueryのfind()を利用した高速化 - to-R

2014/01/06 101 users jQuery find foo bar to-R

最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込... 続きを読む

レスポンシブWebデザインに対応した「jquery.heightLine.js」 - to-R

2013/10/21 176 users jQuery heightLine.js class 要素

多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応... 続きを読む

CSS3で追加されたセレクタ「:not()」について考えてみました｜Webpark

2013/09/24 111 users Webpark CSSセレクタ not おさらい CSS3

CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark 保存版！CSS3セレクタの説明書｜Webpark では、「:not()」について考えてみます。これから紹介する簡単... 続きを読む

[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium | コリス

2013/06/09 381 users jQuery Helium コリス CSS スクリプト

ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリ... 続きを読む