「syncer」のHTML/CSSコード整形ツール

2017/08/08 サイト制作 投稿者:前原

WEB制作でデザインテンプレート等を使用したり、他社制作のサイト改修依頼等をいただいて作業するときに、
インデントをスペース数個にするかタブにするか、改行をどこで入れるか、などのコーディング規則が自分のとは違うと、
いじっていくうちに非常に汚いコードになっていってしまいます。

同一サイト内ではなるべくコーディング規則は揃えたいですが、
かといって元のコーディング規則に合わせるのも、やり慣れないので作業効率が悪いです。
作業に取り掛かる前に一度コードを自分仕様に整えておきたいものですね。

ということで今回は、HTML/CSSのコード整形ツールについて調べてみました。
エディタのプラグインなどにも整形ツールはありますが、今回はインストール等の手間がかからないオンラインサービスで、色々試して一番良かった「syncer」のコード整形ツールをご紹介したいと思います。

「syncer」のコード整形ツール

「syncer」のコード整形ツール

下にスクロールしていくとオプションがあり、整形規則について設定できます。
整形規則オプション
それでは実際に汚いコードを入れて試してみたいと思います。

HTML

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

■オプションは
・インデント文字…タブ 1個
・長すぎる行の改行…無効
・改行を保持…無効

の設定で、整形しました。

紛れ込ませた全角スペースなども上手く除去してくれています。
改行場所もちょうどよいです。(他のツールではscriptやliの閉じタグなど全て改行されてしまって、スマートにいかないことが多かったです)

CSS

https://lab.syncer.jp/Tool/CSS-Pretint/

■オプションは
・インデント文字…タブ 1個
・セレクタ間の改行…有効
・ルール間の改行…有効
・記号周りのスペース…有効
・改行を保持…無効

の設定で、整形しました。

こちらも上手く整形してくれました。
オプションが豊富で、まさに痒いところに手が届く印象です。

まとめ

日本語で分かりやすく、オプションが豊富なこのツールが個人的に一番使いやすかったです。
変換後のコードコピーなどもクリックしただけで自動でしてくれて、コードはコピペ入力だけでなくファイルごとアップすることも出来るので非常に便利でした。

また、忙しい時などコーディング規則を揃え忘れてしまうこともあるので、納品前にも整形ツールをかけてあげたいですね。
(※横並びリストのカラム落ち回避のために、あえて改行していない箇所などがある場合は、修正を忘れないようお気を付けください。)

サイトの裏方であるコードは普段は目に見えませんが、後々メンテナンスする方のために、見やすくいじりやすい、美しいコードにするように心掛けたいものです。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)