HTMLやCSSの基本を学ぶ方に
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
Kindle版（電子書籍）／Mana／SBクリエイティブ
HTML・CSSの書き方からページのレイアウトまで学ぶ入門書です。
Amazonで見る ↗ちょっとした診断LAB / CSS USAGE CHECK
ちょっとしたCSS使用状況チェック
HTMLから読み込みCSS、style、class名の使われ方をざっくり確認します。
CSS整理の前に、どのCSSファイルが読まれているか、class名がどのくらい出ているか、インラインstyleが多いかを下調べするための小さなWEB管理ツールです。
未使用CSSやCSS整理の可否を断定するものではありません。入力内容はサーバーへ送信・保存しません。
INPUT
HTMLを貼り付ける
HTML貼り付けモードが主軸です。URL取得はブラウザのCORS制限で読めない場合があります。
HTMLを貼り付けて「チェックする」を押してください。
SUMMARY
結果サマリー
CSS整理前の目安として見てください。動的classや別ページ利用CSSはここだけでは判断できません。
0CSS link
0styleタグ
0style属性
0class種類
0id種類
0classなし要素
CSS FILES
CSS読み込み一覧
- まだチェックしていません。
CLASS RANKING
classランキング
- まだチェックしていません。
STYLE USAGE
style使用状況
- まだチェックしていません。
ORGANIZE MEMO
整理メモ
- まだチェックしていません。
DETAIL LISTS
一覧
class一覧
まだチェックしていません。
id一覧
まだチェックしていません。
ELEMENT STYLE ATTRIBUTES
要素別スタイル情報
貼り付けHTML上で見えるタグ、id、class、style属性を確認します。外部CSSの中身やブラウザ上の計算結果までは確認しません。
まだチェックしていません。
要素別一覧
まだチェックしていません。
inline style がある要素
まだチェックしていません。
classが多い要素
まだチェックしていません。
id付き要素
まだチェックしていません。
HOW TO USE
使い方
- 確認したいページのHTMLを入力欄に貼り付けます。
- 必要ならページURLをメモとして入力します。URL取得はCORS制限で失敗する場合があります。
- 「チェックする」を押すと、CSS読み込み、class名、style使用状況を一覧化します。
- 整理前のメモとして、CSS一覧やclass一覧、簡易レポートをコピーできます。
ABOUT THIS CHECK
このチェックについて
ちょっとしたCSS使用状況チェックは、CSS整理前の下調べ用LABです。HTML内で読まれているCSS、styleタグ、インラインstyle、class名の出現回数をブラウザ上で確認します。
未使用CSSを判定するツールではありません。動的class、hover/focus、レスポンシブ、別ページで使われるCSS、JavaScriptで後から付くclassは判断できません。
CORSなどの制限により、外部ページや外部CSSの中身は読めない場合があります。入力内容は端末内で処理され、サーバーへ送信・保存しません。
HTML・CSSの基本を学びたい方へ （PR）
HTML・CSSの仕組みや書き方を学ぶ参考書です。コードやデータを見直す際の読み物として。
購入前に、商品の内容・仕様・状態をご確認ください。リンク先の価格や在庫、出品者は変わることがあります。
利用者の評価・コメント
まだ評価・コメントはありません。
評価・コメントを投稿する
星だけでも送信できます。コメントを書く場合は3〜1000文字で入力してください。
暴言、脅迫、個人への攻撃を含むコメントは公開しません。