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

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

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

Webサイトで未使用のCSSセレクタを教えてくれるツール・「Unused CSS」 | かちびと.net

2018/02/17 48 users hover Unused CSS net foc ツール

Unused CSS Unused CSSはWebサイトで未使用のCSSセレクタを抽出してくれるWebサービスです。内部リンクをたどって複数ページを一括で解析、抽出してくれる、というものですが、現在ベータ版の為か100ページの解析に制限されているそうです。注意点として、解析するCSSは最初に指定したWebページで読み込まれているCSSのみで、子ページのみのCSSは解析しない、:hoverや:foc... 続きを読む

より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix | コリス

2017/03/22 43 users セレクタ コリス アクセシビリティ CSS Chrome

先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したス... 続きを読む

[意訳]グローバルCSSの終焉 - Qiita

2016/02/07 114 users Qiita ウェブアプリケーション 意訳 終焉 マトモ

このポストは以下の記事の意訳です。 The End of Global CSS 何か間違いなどありましたら、ご指摘いただけると幸いです。 (以下、訳) CSSセレクタはすべて同じグローバル空間に存在しています。 CSSに触れた人は皆、以下のような見解に至っていることでしょう。 CSSの考えはドキュメントの時代に設計されたもので、今ではモダンなウェブアプリケーションのためのマトモな開発環境を提供する... 続きを読む

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

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

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

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

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

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

O'Reilly Japan - セレクタ、詳細度、カスケード

2013/04/30 38 users セレクタ O'Reilly Japan 属性セレクタ 重み

同じ要素に対して複数のスタイルを割り当てたとき、どのように表示されるのか？ ― CSSを使っていると誰もが一度は抱くこの疑問について、『CSS完全ガイド』の著者が明快に答えます。 CSSセレクタのグループ化、クラスセレクタ、IDセレクタ、属性セレクタ、疑似セレクタなど、スタイルの指定対象となるさまざまなセレクタについて、また割り当てられたスタイルがどのように重みづけされ、評価されて表示されるかにつ... 続きを読む

CSSセレクタの効率的、効果的な使い方をいろいろ｜Webpark

2012/10/17 79 users セレクタ Webpark Black color CSS

CSSのセレクタって簡単そうで奥が深いと思います。ということで、個人的に使っている方法や意外な使い方などを紹介しますので参考になればと思います。 効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。 CSSセレクタの効率的な使い方 同じ内容ならまとめる 例えばこんなCSSがあります。 h1 { color: black; } p { color: ... 続きを読む

jQueryのCSSセレクタAPIを高速に扱う方法 | tech.kayac.com - KAYAC engineers' blog

2011/12/01 416 users jQuery ago 抗争 KAYAC engineers

最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使... 続きを読む

CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog

2011/10/06 72 users ネイバージャパン NAVER Engineers コーディ

突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディ... 続きを読む

CSSセレクタを高速化する方法

2011/08/22 80 users 方法

AV女優.com では、来月に1つ機能追加したあと、新しいアダルトサイトを立ち上げる予定です。 次のアダルトサイトは画像を使わず、HTML5とCSS3だけで作成する予定です。 なのでHTML5とCSS3について勉強していたのですが、どうせならCSSとjQueryについても一緒に勉強し直そうと思い色々な本を読んでみました。 その中でも ハイパフォーマンスWebサイト ―高速サイトを実現する14のルー... 続きを読む

ウェブページ高速化に効果的なCSSセレクタ｜Webpark

2011/06/29 89 users Webpark ウェブページ 表示速度 高速化 関係

CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。 ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtec... 続きを読む

CSSセレクタの高速化の話し - Webtech Walker

2010/05/18 927 users foo セレクタ Webtech Walker bar 高速化

続・ハイパフォーマンスWebサイトを呼んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に... 続きを読む

CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 - 100SHIKI ～ 世界のアイデアを日替わりで ～

2009/02/27 215 users セレクタ ブックマークレット インタラクティブ CSS かなり

かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、ま... 続きを読む

使われていないCSSセレクタをブラウザからチェックできる『CSS Redundancy Checker』 - Chocolate（チョコレート）

2007/07/28 149 users chocolate セレクタ Check Step ブラウザ

『CSS Redundancy Checker』はブラウザから使用していないCSSセレクタをチェックできるサービスです。 使っていないセレクタを消して、サイトをスリムにしましょう。 利用方法は簡単です。 Step 1. スタイルシートのURLを入力。 Step 2. チェックしたいページのアドレスを入力します。 調べたいページが複数ある場合は、改行して入力します。 Step 3. 「Check」ボ... 続きを読む

naoyaのはてなダイアリー - HTML::TreeBuilder + CSSセレクタがいい感じな件

2006/10/06 115 users naoya XPath selector Element 何気

先日 PerlでCSSセレクタ で HTML::Selector::XPath がいい感じであると思ったわけですが、CSS セレクタだけじゃなく何気に HTML::TreeBuilder::XPath とのコンボがすげーイイ!ということにいまさら気づきました。HTML::TreeBuilder::XPath で findnodes するとツリー状に連なった HTML::Element なデータ構造... 続きを読む