CSS クラスのリストを生成

CSS クラスのリストを生成 イメージ閲覧中のページで使われているCSSクラスのリストを表示します。 手っ取り早くページ内で使われているクラス名を確認してCSSの制作などに活用することが出来ます。 リストはページ内に半透明で表示され、タイトル部をドラッグすることで移動することができます。 再度ブックマークレット実行するとリストを消去します。

CSS クラスのリストを生成 のカスタマイズ

update: 2009-02-02


Javascript ソースコードの確認

(function(){
var D=document,B=D.getElementsByTagName('body')[0];

function bmlPanel(id,w,h){
 var P,F,H,X,DP,CL;

 B.appendChild( P = D.createElement('div'));
 P.id=id;
P.style.cssText='
   position:fixed;top:10px;left:10px;padding:2px;
   width:'+w+'px;height:'+h+'px;
   opacity:0.8;filter:alpha(opacity=80);background:#000;
   border:1px solid #666;
   color:#fff;font-size:12px;text-align:left;
   z-index:9998;-moz-border-radius:5px;';

 P.appendChild(H=D.createElement('div'));
 H.innerHTML = id;
 H.style.cssText='
   padding:0px 10px;
   height:20px;line-height:20px;
   color:#fff;font-size:12px;font-weight:bold;text-align:center;
   cursor:move;';
 DP=D.createElement('div');
 DP.style.cssText='background:transparent;position:fixed;top:0px;left:0px;width:100%;height:100%;';

 P.appendChild(F=D.createElement('div'));
 with(F.style){
   height=h-20+'px';overflow='auto';
   backgroundColor='#222';
   color='#eee';fontSize='11px';
   cursor='auto';
 }

 P.appendChild(CL=D.createElement('div'));
 CL.title='close';
 with(CL.style){
  border='#444 solid 1px';
  position='absolute';top="5px";left="5px";height='10px';width='10px';
  cursor='pointer';
 }
 CL.onclick=function(){
  B.removeChild(this.parentNode);
 };

 H.onmousedown=function(e){
  x=(e)?e.pageX:event.x;
  y=(e)?e.pageY:event.y;
  ox=x-P.offsetLeft;
  oy=y-P.offsetTop;
  P.appendChild(DP);
  return false;
 };
DP.onmousemove=function(e){
   x=(e)?e.pageX:event.x;
   y=(e)?e.pageY:event.y;
   P.style.left=(x-ox)+'px';
   P.style.top=(y-oy)+'px';
   return false;
 };
DP.onmouseup=function(){
  P.removeChild(DP);
  return false;
 };
 P.header=H;P.content=F;
 return P;
}


var BP =bmlPanel('css',250,400);

BP.header.innerHTML='CSS クラスリスト';
var a={},b=[],s='<table border=1 cell-padding="1" style="border-collapse:collapse;width:100%;"><thead style="font-weight:bold"><tr><th>数</th><th>タグ</th><th>クラス名</th></tr></thead>';
for(i=0;e=document.getElementsByTagName("*")[i];++i)
if(c=e.className){
 k=e.tagName+"."+c;
 a[k]=a[k]?a[k]+1:1;
}
for(k in a) b.push([k,a[k]]);
b.sort();
for(i in b) s+="<tr><td>"+b[i][1]+"</td><td>"+b[i][0].split(".").join("</td><td>")+"</td></tr>";
s+="</table>";
BP.content.innerHTML=s;
})();
CSS クラスのリストを生成 ←このボタンをブックマークバーにドラッグ

「CSS クラスのリストを生成」に関連するブックマークレット

HTML要素のIDリストを生成 詳細...

HTML要素のIDリストを生成 イメージ閲覧中のページで使われているHTML要素のIDリストを表示します

update: 2009-02-02

HTML要素のname属性リストを生成 詳細...

HTML要素のname属性リストを生成 イメージ閲覧中のページで使われているHTML要素のname属性のリストを表示します

update: 2009-02-02

ページ内アンカーリスト 詳細...

ページ内アンカーリスト イメージ閲覧中のページで使われているアンカー(a要素 name属性)をリスト表示します。ページ内ナビゲータとして手軽に使うことができます。

update: 2009-02-02

Javascriptの変数リストを生成 詳細...

Javascriptの変数リストを生成 イメージ閲覧中のページで使われているJavascriptの変数のリストを表示します

update: 2009-02-02

リンクタグを生成 詳細とカスタマイズ...

表示中のページへのリンクタグを作成します。Favicon の定義があるページでは、Faviconの<img>要素も付加します。

update: 2009-01-28

リンク情報の整理 詳細...

リンク情報の整理 イメージ表示中のページのリンク情報をリンク先毎に整理して、サイドバー風に表示します。 初めて訪れたサイトなどで、ページ構造が複雑な場合などに有効です。

update: 2009-02-09

カスタム検索パネル 詳細とカスタマイズ...

カスタム検索パネル イメージよく使う検索サービスを一括で操作するブックマークレットを作ることが出来ます。

update: 2009-01-28

ブログでの注目度と評判(Yahoo) 詳細...

ブログでの注目度と評判(Yahoo) イメージ選択したテキストを対象に、Yahoo!ブログ検索の「注目度の推移」と「評判」のグラフをパレットに表示します。グラフをクリックやドラッグすると検索結果ページを表示します。

update: 2009-02-04

クイックイメージブラウズ 詳細...

クイックイメージブラウズ イメージ閲覧中のページから直接リンクされた画像や、ページ内の大きな画像をライトボックスっぽくブラウズします。Google Images 検索及び、Yahoo画像検索にも対応しています。

update: 2009-01-21

このページをブックマーク

Top 20

クイックイメージブラウズ 詳細...

クイックイメージブラウズ イメージ閲覧中のページから直接リンクされた画像や、ページ内の大きな画像をライトボックスっぽくブラウズします。Google Images 検索及び、Yahoo画像検索にも対応しています。

update: 2009-01-21

リンク先のフルURLを表示 詳細...

リンクテキストをhttpなどから始まるフルURLに置き換えます

update: 2008-12-30

Gmailテンプレート 詳細とカスタマイズ...

Gmailテンプレート イメージGmailのメールテンプレートをブックマークレットとして保存して、ブックマークバーからいつでも呼び出すことができます

update: 2009-01-26

GoogleReaderに追加 詳細...

表示しているウェブサイトのフィードをGoogle Reader またはiGoogleへ追加

update: 2009-01-01

Evernoteでクリップ 詳細...

Evernoteでクリップ イメージ表示中のページを Evernote でクリップします

update: 2009-01-03

リンクされた画像をすべて開く 詳細...

表示中のWEBページからリンクされた画像をすべて開きます

update: 2008-12-29

外部リンク/内部リンクに色づけ 詳細...

外部リンク/内部リンクに色づけ イメージ外部リンクを赤色、内部リンクを青色、その他のリンクをオレンジ色の点線で囲みます。

update: 2009-02-08

Google Bookmarkに追加 詳細...

表示中のページをGoogle Bookmarksに追加するダイアログを表示します。

update: 2009-01-03

画像を拡大 詳細...

ページ内の画像を2倍に拡大します

update: 2008-12-31

Youtube動画をMP4でダウンロード 詳細...

Youtube動画をMP4でダウンロード イメージYoutube内の動画をPC等で扱いやすいMP4でダウンロードするリンクを表示させます

update: 2008-12-31

プラグイン要素を消去 詳細...

Flashやムービー、Javaアプレット、外部サーバーからのインラインフレームをページ上から消去します

update: 2008-12-30

リンク先URLを表示 詳細...

リンクテキストをリンク先URLに置き換えます

update: 2008-12-30

goo辞書で調べる 詳細とカスタマイズ...

ページ内の選択した文字列をgoo辞書で検索します。【連続検索対応】

update: 2009-01-13

サイト内検索 詳細とカスタマイズ...

Googleのサイト内検索を使って、閲覧中のサイト内で選択したフレーズを検索します。 なにも選択せずに実行すると、Googleにインデックスされている閲覧中のサイト内のページがすべて検索されます。

update: 2009-01-06

前のページ番号 詳細とカスタマイズ...

URLに含まれる数字の部分を1減らします

update: 2009-02-02

Google検索 詳細とカスタマイズ...

ページ内の選択した文字列をGoogleで検索します。【連続検索対応】

update: 2009-01-26

テキスト翻訳(英語→日本語) 詳細とカスタマイズ...

ページ内の選択したテキストを Google 翻訳 で英語から日本語にテキスト翻訳します。【連続検索対応】

update: 2009-01-19

サイトのトップへ 詳細...

ドメインのトップURL(普通はトップページ)に移動します

update: 2008-12-31

画像を消去 詳細...

ページ内の画像を消去し、代替テキスト(alt属性の内容)に置き換えます

update: 2008-12-30

リンクを別ウインドウでひらく 詳細...

ページ内のリンクをクリックした際、新しいウインドウで開くようにしますが、次々に新しいウインドウを作るのではなく、1つのウインドウを再利用するようにします

update: 2008-12-30

inserted by FC2 system