Header

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

CSS Overviewの使い方

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

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
：SC2
Windowsランキング 将棋ランキング スマホ・携帯ランキング にほんブログ村 IT技術ブログ ライフハックへ にほんブログ村 その他趣味ブログ 将棋へ

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

投稿者 SC2

将棋ウォッチャーのカシミヤです。（@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.