また旅

日々のこと、画面の中でのこと (今はIDCFクラウド、KUSANAGI、WordPress、Vagrant及びCodeIgniter).

いろいろ

Google Chromeで表示してるページのcssを表示する方法

 

Google chorme element inspect

 

Google Chromeを使うと簡単に表示しているページのcssの内容を見ることが出来ます。その目的はかっこいいサイトのcssを参考にするためです。

 

では、Google Chromeでcssを見たいページを表示した状態で副(右)ボタンクリック時のメニューを表示させて下さい。

最初の画像の様にメニューの中に要素の検証という項目があります。(状況により表示位置が違う場合があります。)

 

要素の検証をクリックすると表示しているページの下側に要素の内容が表示されます。表示項目を選択するタブよりResourcesをクリックして下さい。

Google chorme show elements

 

Resourcesの内容を表示する状態になりますので、左側のツリーよりFramesを展開して下さい。その中にStylesheetsがあり、表示中のページで使われているcssファイルの一覧が表示されます。ファイル名をクリックすると右側にその内容が表示されます。

Google chrome show resources

-いろいろ