CSS Overviewの使い方

Atom | RSS

このサイトを検索 | Search this site

CSS Overviewの使い方

Google Chromeデベロッパーツールの実験的機能にCSS Overviewが追加されたことを知りました。

この機能をONにすると、表示しているページで使用されているCSSの概要を把握することができます。

このブログは思いつきで作成したインラインスタイルが多数ありますが、「未使用の宣言」は使われてないスタイルを教えてくれます。

[機能概要]
出典：ProgrammersPark

1. 要素の数
2. スタイルの概要（外部スタイルシート、インラインスタイル要素、スタイルルール）
3. メディアクエリの概要
4. セレクター（タイプ、ID、クラス、属性など）
5. 色の概要（背景色、テキスト色、境界線色、塗りつぶし色）
6. フォントの概要（フォントスタイル、フォントサイズ、フォントの太さ、行の高さ）
7. 未使用の宣言の概要

目次[表示]

• 1.CSS Overview
• 2.メニュー
• 3.まとめ

CSS Overview

Ctrl＋Shift＋I

[Chrome]

1. デベロッパーツール
2. 歯車アイコン
3. Experiments
4. □CSS Overview
5. デベロッパーツールを閉じる
6. デベロッパーツールを開く
7. メニューにCSS Overviewが現れる

スナップショット

歯車アイコン

Experiments > CSS Overview

CSS Overview

メニュー

[CSS Overview]

1. Overview summary｜概要
2. Colors｜色
3. Font info｜フォント情報
4. Unused declarations｜未使用の宣言
5. Media queries｜メディアクエリ

スナップショット

Colorsが何気に便利です。
この機能を早く知りたかった！

まとめ

[CSS Overviewの機能]

1. 要素の数
2. スタイルの概要（外部スタイルシート、インラインスタイル要素、スタイルルール）
3. メディアクエリの概要
4. セレクター（タイプ、ID、クラス、属性など）
5. 色の概要（背景色、テキスト色、境界線色、塗りつぶし色）
6. フォントの概要（フォントスタイル、フォントサイズ、フォントの太さ、行の高さ）
7. 未使用の宣言の概要

 External link

• CSS Overview — New Experimental Feature in Google Chrome | by Shivaji Ranaware | ProgrammersPark | Jul, 2020 | Medium

検証：Google Chrome 83.0.4103.116

usage の記事 (Articles about the usage)

1. TVerRecの使い方 (Version 3.1.0)
2. YouTube Video Downloader の使い方
3. YouTube Video Downloader (INSTALL VIA Foxified)
4. TVerRecの使い方 (Version 3.2.1)
5. ブラウザ拡張Redirector の使い方（パターンマッチでURLを置換）
6. TVerRecの使い方 (Version 3.0.2)
7. ZIPパスワード忘れた！？困った (Lhaplus | Pika Zip)
8. Lhaz 書庫名に日付を付加する書式の例
9. Lhaz 圧縮時に自動的に書庫名に日付を付加する書式
10. TverRecの使い方 (Version 2.7.2)
11. usage ラベルの記事（要約付）
12. 使い方 が含まれる記事（要約付）

新着順 (New arrival order)

1. 【緊急】KB5063060配信開始：Easy Anti-Cheat搭載PC向け自動適用の理由とは
2. 【考察】藤井聡太との死闘が残したもの──タイトル戦はトップ棋士の試金石（トラウマ）
3. 【VAIO】BIOS R0500K9リリース：Windows 11 24H2対応と脆弱性修正の詳細（2025年06月11日）
4. 【Pixel／2025年6月】Android 16と指紋認証、Bluetooth、カメラ、システムの改善と修正
5. 【盛者必衰】四段経験なしで全棋士を統括？清水市代新会長誕生が将棋界にもたらす衝撃と期待
6. 【Windows 11】24H2 アップデート後のトラブルシューティング（DISM, SFC, コンポーネントサービス）
7. Intel(R) ME Firmware Ver.11.8.97.4739（2025年6月3日）【vaio】
8. 【Clibor】行頭に連番を挿入する方法【New!】
9. 【ブログ執筆者必見】Cliborでテキスト整形をマスター！コピペ効率を劇的に上げる方法
10. 吉田栄作と織田裕二：キャリアパスの分岐と戦略的選択の分析

タイトル：CSS Overviewの使い方：SC2

このサイトを検索 | Search this site