表示中のWEBページの縮小された CSS、javascriptを整形した状態で見る、編集、保存する方法

chrome-css-js
このエントリーをはてなブックマークに追加
PR

WEBサイトのちょっとした修正とかの依頼をされることがあるのですが

元ファイルを頂ければ、対処しやすいのですが、それが出来ない場合でWEBサイトが見れる状態なら

ブラウザから修正して、それをファイルとして渡してしまったほうが早い場合があります

 

ブラウザでソースをみればHTML、CSS、JSは手にはいります

ですが、これが縮小された状態のケースがちょくちょく有ります

CMS等で縮小しているケースが多いでしょう

 

縮小した状態での修正はとても

非効率なので、これを一旦整形してやったほうが手っ取り早いです

そこで、便利なのがChromeを使った方法

 

 

修正したいページを表示した状態で F12 ボタンを押しますと

デベロッパーモードになり、表示しているページの詳細がわかります

 

 

最初に表示される Elements タブから Source に切り替えます

左のソースのツリーから、編集したいCSS、JSファイルを選択します

選択すると、真ん中のエディタ領域に内容が表示されます

screenshot00083

 

次に、CSS と javascript を整形する方法ですが

縮小されたままのものを、ボタンひとつで整形出来ます

エディタ領域の左下にある {}マークをクリックすると、一瞬で整形されます

screenshot00086

 

ボタンを押したあとの整形されたCSS

screenshot00087

 

あとは、この場でCSSを編集して加工したものをコピーした保存すれば

それを提供したり出来ます

 

また、jsファイルも同様にCSSと同じやり方で整形することが出来ます。

慣れれば、4ステップで縮小されたCSSを保存することが出来ます

F12 > Sources > ツリーからソースを選択 > 整形ボタンをクリック

 

 

また、Elementの方で 修正したものは、Souresの方にも反映されているので

Elementタブの方で修正してから、こちらで保存するためにコピーするというやり方も出来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)