Secura Vita

コード整形ツール

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 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}

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

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

このツールについて

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

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

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

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

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