Header

角島
検証したことをメモに残しています。そして将棋の話題など。

CSS Overviewの使い方

SC2 2020-07-11 reload 2023-10-11
Tags
Atom | RSS
このサイトを検索 | Search this site
chrome192.png
CSS Overviewの使い方

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

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

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

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


目次[表示]

CSS Overview

Ctrl＋Shift＋I

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

スナップショット
歯車アイコン

kensho

Experiments > CSS Overview

Experiments-CSSOverview

CSS Overview

CSSOverview-active

メニュー

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

スナップショット
Colorsが何気に便利です。
この機能を早く知りたかった！

Colors

まとめ

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

 External link
検証：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. 【2024年度総括】藤井七冠(最優秀棋士)、羽生九段現役続行と会長退任を表明
  2. 【バグ】TVerRec 3.4.2 のリネーム処理不具合とその原因を考察
  3. 【恐怖】ポンジスキームとは？歴史から学ぶ詐欺の仕組み
  4. 【終息】TVerRec 3.3.9（暫定）で機能制限ほぼ解除、3.4.0リリース！
  5. 【緊急】TVerRec 3.3.6緊急リリース！仕様変更に暫定対応
  6. 【未解決】TVerRecダウンロード不具合！TVerの仕様変更かも？
  7. 【昇級／降級】全棋士ランキング確定、伊藤匠叡王B1へ昇級、羽生九段B2へ降級
  8. 【将棋】なぜ藤井聡太は人々を魅了するのか？【2024年度振り返り】
  9. 【更新】Lhaz 2.5.4リリース！法人利用が有料化へ
  10. 【Pixel 3月／2025】カメラ、WebView 、Bluetooth、電話のバグ修正【Android 15】
タイトル：CSS Overviewの使い方：SC2
Windowsランキング 将棋ランキング スマホ・携帯ランキング にほんブログ村 IT技術ブログ ライフハックへ にほんブログ村 その他趣味ブログ 将棋へ

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

投稿者 SC2

将棋ウォッチャーのカシミヤです。元SE。（@sc2kzstock）検証したことをメモに残しています。質問は受け付けていません。Windows、Android、将棋の話題。 --- I am taking notes on what I have verified. No questions are accepted. Information welcome! (@sc2kzstock) Topics related to Windows, Android, free software, and Japanese chess.