CSSをクリーンアップ – Clean CSS
CSSは使えるプロパティというのは決まっているので、フォーマットを揃えるとソースが綺麗に見えますし、後で管理しやすくなります。プロパティーの並べ替えなどのフォーマットを整形してくれるサービスらしいです。
「Clean CSS」というサービスで、CSSTidyというローカルプログラムをWebサービス化してるようです。CSSTidyはC言語とPHPの二通りリリースされていてどちらも使い勝手がイイです。ただ、小さいCSSだったりした場合はWebのサービスでサクっと整形できるとこれはこれで便利。
ちなみに、整形例としてはこんな感じ(↓)になるようです。個人的にはプロパティーの並び替えが一番メンドクサイのでここを並び替えをしてくれるのが一番嬉しい。
整形前
.marquee { background: url(images/sfx1_bg.gif) bottom repeat-x; padding: 0; margin: 0;} .marquee_l { background: url(images/sfx1_bga.gif) bottom left no-repeat; margin: auto 0; padding: 0 15px 10px 15px; } .marquee_copy { margin: 0 0 10px 0; padding: 0;} .marquee_copy h3 { font-size: 100%; margin: 0; padding: 0; } .marquee_r { background: url(images/sfx1_bgb.gif) bottom no-repeat; width: 327px; text-align: center;} .marquee_rb { background: url(images/sfx1_bgc.gif) bottom no-repeat;} .marquee_rb ul {height: 28px; padding: 0; margin: 0; text-align: center;} .marquee_rb li {position: relative; font-size: 85%; font-weight: bold; display: inline; list-style: none; background: url(images/sfx1_bullet.gif) 0 2px no-repeat; padding: 0 0 0 12px; margin: 0 10px 0 0;}
整形後
.marquee { background:url(images/sfx1_bg.gif) bottom repeat-x; margin:0; padding:0; } .marquee_l { background:url(images/sfx1_bga.gif) bottom left no-repeat; margin:auto 0; padding:0 15px 10px; } .marquee_copy { margin:0 0 10px; padding:0; } .marquee_copy h3 { font-size:100%; margin:0; padding:0; } .marquee_r { background:url(images/sfx1_bgb.gif) bottom no-repeat; width:327px; text-align:center; } .marquee_rb { background:url(images/sfx1_bgc.gif) bottom no-repeat; } .marquee_rb ul { height:28px; text-align:center; margin:0; padding:0; } .marquee_rb li { position:relative; font-size:85%; font-weight:700; display:inline; list-style:none; background:url(images/sfx1_bullet.gif) 0 2px no-repeat; margin:0 10px 0 0; padding:0 0 0 12px; } .marquee_stats { font-size:85%; padding:0 0 0 15px; }
関連エントリー
よろしければ、以下リンクよりコメントをどうぞ。
- send comments - コメントをどうぞ
- trackback URI - トラックバックURI
310
2006/10/26 00:09:49200610/2600:09
