
CSS Overviewの使い方
Google Chromeデベロッパーツールの実験的機能にCSS Overviewが追加されたことを知りました。
この機能をONにすると、表示しているページで使用されているCSSの概要を把握することができます。
このブログは思いつきで作成したインラインスタイルが多数ありますが、「未使用の宣言」は使われてないスタイルを教えてくれます。
[機能概要]
出典:ProgrammersPark
- 要素の数
- スタイルの概要(外部スタイルシート、インラインスタイル要素、スタイルルール)
- メディアクエリの概要
- セレクター(タイプ、ID、クラス、属性など)
- 色の概要(背景色、テキスト色、境界線色、塗りつぶし色)
- フォントの概要(フォントスタイル、フォントサイズ、フォントの太さ、行の高さ)
- 未使用の宣言の概要
CSS Overview
Ctrl+Shift+I[Chrome]
- デベロッパーツール
- 歯車アイコン
- Experiments
- □CSS Overview
- デベロッパーツールを閉じる
- デベロッパーツールを開く
- メニューにCSS Overviewが現れる
スナップショット
歯車アイコン
Experiments > CSS Overview

CSS Overview

メニュー
[CSS Overview]- Overview summary|概要
- Colors|色
- Font info|フォント情報
- Unused declarations|未使用の宣言
- Media queries|メディアクエリ
スナップショット
Colorsが何気に便利です。この機能を早く知りたかった!

まとめ
[CSS Overviewの機能]- 要素の数
- スタイルの概要(外部スタイルシート、インラインスタイル要素、スタイルルール)
- メディアクエリの概要
- セレクター(タイプ、ID、クラス、属性など)
- 色の概要(背景色、テキスト色、境界線色、塗りつぶし色)
- フォントの概要(フォントスタイル、フォントサイズ、フォントの太さ、行の高さ)
- 未使用の宣言の概要
External link
検証:Google Chrome 83.0.4103.116
usage の記事 (Articles about the usage)
- TVerRecの使い方 (Version 3.1.0)
- YouTube Video Downloader の使い方
- YouTube Video Downloader (INSTALL VIA Foxified)
- TVerRecの使い方 (Version 3.2.1)
- ブラウザ拡張Redirector の使い方(パターンマッチでURLを置換)
- TVerRecの使い方 (Version 3.0.2)
- ZIPパスワード忘れた!?困った (Lhaplus | Pika Zip)
- Lhaz 書庫名に日付を付加する書式の例
- Lhaz 圧縮時に自動的に書庫名に日付を付加する書式
- TverRecの使い方 (Version 2.7.2)
- usage ラベルの記事(要約付)
- 使い方 が含まれる記事(要約付)
新着順 (New arrival order)
- 【Pixel/2025年5月】アンチロールバックの実装、ゼロデイ脆弱性(CVE-2025-27363)
- 【初心者向け】Windows/AndroidでDoHを設定してセキュリティを高める方法
- まだ間に合う!ChromeでuBlock Originを使うための最終手段
- 【新ルール】クイーン白玲(通算5期)で四段昇段!将棋界に激震走る
- 【最速情報】Google Pixel 9a 日本発売!気になる価格とスペックまとめ
- 【Pixel 4月/2025】生体認証、カメラ、ディスプレイ、UIの修正【Android 15】
- 【2024年度】藤井七冠(最優秀棋士)、羽生九段、会長辞任はタイトル100期への伏線か?
- 【バグ】TVerRec 3.4.2 のリネーム処理不具合とその原因を考察
- 【恐怖】ポンジスキームとは?歴史から学ぶ詐欺の仕組み
- 【終息】TVerRec 3.3.9(暫定)で機能制限ほぼ解除、3.4.0リリース!
タイトル:CSS Overviewの使い方:SC2
このサイトを検索 | Search this site