Secura Vita

Category: Works > その他 » HTML,CSS,JSを読みやすく(修正・更新しやすく)整形してくれるWEBツール
2016/03/09
Works

HTML,CSS,JSを読みやすく(修正・更新しやすく)整形してくれるWEBツール

HTML,CSS,JSを読みやすく(修正・更新しやすく)整形してくれるWEBツール

たまに人が作ったサイトの修正・更新のお仕事でHTMLやCSSが超読み辛かったりすることがあります。

書き方が汚いならまだしも圧縮してて、しかもその圧縮元のファイルがなかったりすると超厄介。

そんな時に活躍するのが下記のWEBツールたち。

スポンサーリンク

コード整形ツール

HTMLのコード整形ツール

cssのコード整形ツール

JavaScriptのコード整形ツール│SYNCER

使い方

使い方はいたって簡単。整形したいコードをコピーして貼り付けるだけ。

試しにこのサイトのCSSコードを貼り付けてみました。

圧縮してるので超読みづらいです。
長いので冒頭の部分だけです。

@charset "utf-8";.yarpp_pro_msg{border:1px ridge #d0d0d0;padding:.4em 2em .8em;text-align:justify}.yarpp_pro_msg strong{display:inline-block;text-align:center;width:100%;color:orange}.yarpp_help{position:relative;display:inline-block;background:transparent url(//securavita.net/blog/wp-content/plugins/yet-another-related-posts-plugin/style/../../../../wp-includes/images/wpicons.png) no-repeat -520px -20px;vertical-align:text-bottom;width:20px;height:20px}.yarpp_help_msg{position:absolute;left:25px;display:none;border:1px solid #d0d0d0;width:250px;text-align:justify;padding:10px 15px;background-color:#FFF;box-shadow:0 0 .4em -.15em #333;z-index:100}.yarpp_help:hover .yarpp_help_msg{display:block}div.wpcf7{margin:0;padding:0}div.wpcf7-response-output{margin:2em .5em 1em;padding:.2em 1em}div.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;margin:0;padding:0;border:0}div.wpcf7-mail-sent-ok{border:2px solid #398f14}div.wpcf7-mail-sent-ng{border:2px solid red}div.wpcf7-spam-blocked{border:2px solid orange}div.wpcf7-validation-errors{border:2px solid #f7e700}.wpcf7-form-control-wrap{position:relative}span.wpcf7-not-valid-tip{color:#f00;font-size:1em;display:block}.use-floating-validation-tip span.wpcf7-not-valid-tip{position:absolute;top:20%;left:20%;z-index:100;border:1px solid red;background:#fff;padding:.2em .8em}span.wpcf7-list-item{margin-left:.5em}.wpcf7-display-none{display:none}div.wpcf7 img.ajax-loader{border:0;vertical-align:middle;margin-left:4px}div.wpcf7 div.ajax-error{display:none}div.wpcf7 .placeheld{color:#888}table{border-collapse:collapse}h1,h2,h3,h4,h5{font-size:inherit;font-weight:normal;margin:0}ul,ol{margin:0;padding:0;list-style:none}figure{margin:0}figcaption{margin-top:5px}iframe{border:0}p{margin:0 0 1.2em 0}.cf:after{content:'';display:block;clear:both}img{vertical-align:top;box-sizing:border-box}a img{border:1px solid #CCC;padding:1px;background:#fff}i{margin-right:5px}.wp-caption,.wp-caption-text,.sticky,.gallery-caption,.bypostauthor,.alignright,.alignleft,.aligncenter{display:block}.aligncenter{text-align:center}html,body{height:100%}body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;color:#333;font-size:15px;margin:0;padding:0;line-height:170%;position:relative;word-wrap:break-word;background:url(/blog/wp-content/themes/blog/images/ricepaper.jpg) 0 0}a{color:#cd5c5c}a:hover{color:#bc8f8f;text-decoration:none}a:hover img{border:1px solid #bc8f8f;padding:1px;background:#fff;opacity:.7}#wrapper{width:1080px;margin:10px auto;padding:20px;position:relative}

これを貼り付けるとこんな感じに!!

cssのコード整形

あとはコピーしてファイルを作成するだけ。

このツールについて

コードの整形ツールは他にもいろいろなサイトがやってますけど、この作者さんのがシンプルで使いやすかった!

ほんと感謝です。ブックマークに入れてこれからも使おう!

SYNCER | 知識と感動を同期するブログ

ほかにも面白そうなツールやtipsをいっぱい公開してるんでなんか調べるときはこのサイトを活用するといいかも。

この作者さんはめっちゃできる人ですね!尊敬!

スポンサーリンク
おもしろかった・役に立った