Step1

CSSの圧縮モードと空白＆改行の設定を選択してください。テキスト内の空白消去のみ行う場合は、全てのチェックを外して空白&改行を選択してください。

圧縮モード: 　空白＆改行:
Example

コメントアウトとクォーテーションを削除【固定】

コメントアウト［/* コメント */］を全てと、クォーテーション［””,’’］を一部を除いて削除します。

Example.
/* before */
@import 'style.css';
/*==== DEFAULT =================*/
body {
     font-family: "メイリオ", "ＭＳ Ｐゴシック";
     background: url("img/bg.gif");
}
/*--- contents -----------------*/
li {
     list-style: url('img/list.gif');
}
li:after {
     content: ".";
}

/* after */
@import 'style.css';
body {
     font-family: "メイリオ", "ＭＳ Ｐゴシック";
     background: url(img/bg.gif);
}
li {
     list-style: url(img/list.gif);
}
li:after {
     content: ".";
}
Example

外部CSSのimportを簡略する【固定】

CSS内で他のCSSを読み込む際のimportの記述を簡略します。

Example.
/* before */
@import url('css/a.css');
@import url('css/b.css') screen;

/* after */
@import 'css/a.css';
@import 'css/b.css' screen;
Example

カラーネームをカラーコードに変換

カラーネームの文字数がカラーコードの文字数より多い場合のみ変換されます。

Example.
/* before */
div {
     color: chocolate;
     background-color: lightgreen;
}

/* after */
div {
     color: #d2691e;
     background-color: #90ee90;
}
Example

カラーコードをカラーネームに変換

カラーコードの文字数が、アルファベットのカラーネームの文字数より多い場合にのみ変換されます。

Example.
/* before */
div {
     color: #ffd700;
     background-color: #dda0dd;
}

/* after */
div {
     color: gold;
     background-color: plum;
}
Example

RGBカラーをカラーコードに変換

RGBカラーで記述の箇所が、該当するカラーコードに変換されます。

Example.
/* before */
div {
     color: rgb(113,26,83);
     background-color: rgb(50%);
}

/* after */
div {
     color: #711a53;
     background-color: #7f7f7f;
}
Example

カラーコードを簡略

カラーコードで簡略可能なものは、6桁から3桁のカラーコードに変換されます。

Example.
/* before */
div {
     color: #333333;
     background-color: #44ff11;
}

/* after */
div {
     color: #333;
     background-color: #4f1;
}
Example

カラーコードの大文字を小文字に変換【固定】

カラーコードがアルファベット大文字で記述されているものは小文字に変換されます。

Example.
/* before */
div {
     color: #EEEEEE;
     background-color: #9ACD32;
}

/* after */
div {
     color: #eeeeee;
     background-color: #9acd32;
}
Example

CSSレベル1色名コードに変換

Example.
/* before */
div {
     color: #F00;
}

/* after */
div {
     color: red;
}
Example

font-weightプロパティの値を数値に変換

font-weightのbold, normalの記述が数値に変換されます。

Example.
/* before */
div {
     font-weight: bold;
}
p {
     font-weight: normal;
}

/* after */
div {
     font-weight: 700;
}
p {
     font-weight: 400;
}
Example

fontプロパティをまとめる

font（size,weight,family,variant）とline-heightが個別指定されている場合にまとめます。

Example.
/* before */
p {
     font-size: 12px;
     font-family: arial;
}
div {
     font-family: sans-serif;
     font-weight: bold;
     font-size: 18px;
     font-variant: small-caps;
     line-height:20px;
}

/* after */
p {
     font: 12px arial;
}
div {
     font: small-caps bold 18px/20px sans-serif;
}
Example

小数点以下0と数値0の単位を削除

記述値の小数点以下［.0］表示されているものと、数値［0］の単位を削除します。

Example.
/* before */
div {
     font-size: 15.0px;
     margin: 2em 0em;
}

/* after */
div {
     font-size: 15px;
     margin: 2em 0;
}
Example

大文字のセレクタタグを小文字に変換

アルファベット大文字で記述のセレクタタグが小文字に変換されます。idやclass名は変わりません。

Example.
/* before */
BODY, TABLE TH {
     font-size: 14px;
}
#headCONT, .footCONT {
     font-size: 10px;
}

/* after */
body, table th {
     font-size: 14px;
}
#headCONT, .footCONT {
     font-size: 10px;
}
Example

margin⁄paddingプロパティの一括指定をまとめる

marginとpaddingの方向一括指定されているもので、簡略できるものは簡略されます。

Example.
/* before */
div {
     margin: 15px 25px 15px 25px;
     padding: 2px 4px 2px 4px;
}
h3 {
     margin: 5px auto 14px auto;
     padding: 10px 10px 10px 10px;
}

/* after */
div {
     margin: 15px 25px;
     padding: 2px 4px;
}
h3 {
     margin: 5px auto 14px;
     padding: 10px;
}
Example

margin⁄paddingプロパティの個別指定をまとめる

marginとpaddingが4方向個別定義をまとめます。2～3方向のみのものはまとまりません。

Example.
/* before */
div {
     margin-top: 10px;
     margin-right: 5px;
     margin-bottom: 4px;
     margin-left: 1px;
     padding-left: 6px;
     padding-right: 2px;
     padding-bottom: 7px;
     padding-top: 3px;
}

/* after */
div {
     margin: 10px 5px 4px 1px;
     padding: 3px 2px 7px 6px;
}
Example

borderプロパティをまとめる

border指定（width,style,color）が個別に3つ全て定義されている場合にひとまとめにします。

Example.
/* before */
div {
     border-style: solid;
     border-color: #333;
     border-width: 5px;
}

/* after */
div {
     border: 5px solid #333;
}
Example

borderプロパティの方向別指定をまとめる

borderが4方向全て同一内容で定義の場合にまとめます。2～3方向のものはまとまりません。

Example.
/* before */
div {
     border-top:3px solid black;
     border-bottom:3px solid black;
     border-right:3px solid black;
     border-left:3px solid black;
}

/* after */
div {
     border:3px solid black;
}
Example

backgroundプロパティをまとめる

background（color,image,repeat,attachment,position）が個別に指定されている場合にひとつにまとめます。

Example.
/* before */
h3 {
     background-color: black;
     background-image: url(bgimg.jpg);
}
div {
     background-color: #777;
     background-image: url(bg.png);
     background-repeat: no-repeat;
     background-position: left;
     background-attachment: fixed;
}

/* after */
h3 {
     background: black url(bgimg.jpg);
}
div {
     background: #777 url(bg.png) no-repeat fixed left;
}
Example

list-styleプロパティをまとめる

list-style（type,position,image）が個別に定義されている場合にひとつにまとめます。

Example.
/* before */
ul li {
     list-style-type: round;
     list-style-position: outside;
}
li {
     list-style-image: url(../img/list.gif);
     list-style-position: inside;
}

/* after */
ul li {
     list-style: round outside;
}
li {
     list-style: inside url(../img/list.gif);
}
Example

border-radiusプロパティをまとめる

border-radiusが方向別に全て定義のものをまとめます。2～3方向のものはまとまりません。

Example.
/* before */
div {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
}
h3 {
     border-top-left-radius: 8px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 10px;
}

/* after */
div {
     border-radius: 10px;
}
h3 {
     border-radius: 8px 2px 6px 10px;
}
Example

最終プロパティのセミコロンを削除する

各セレクタ内の最終プロパティのセミコロン［;］を削除します。

Example.
/* before */
h2 {
     font-size: 1.4em;
}
div {
     margin: 2px;
     color: blue;
}

/* after */
h2 {
     font-size: 1.4em
}
div {
     margin: 2px;
     color: blue
}
Example

同じセレクタ内の重複プロパティを削除する

同じセレクタ内に重複する内容のプロパティがある場合は、前半に記載のものを削除します。

Example.
/* before */
div {
     color: black;
     font-size: 14px;
     color: red;
     font-size: 20px;
}

/* after */
div {
     color: red;
     font-size: 20px;
}
Example

多重定義や同一プロパティのセレクタをまとめる

複数にまたがって定義されているセレクタや、同一内容のプロパティを持つセレクタをまとめます。

Example.
/* before */
p {
     color: blue;
}
p {
     font-size: 12px;
}
h3 {
     color: green;
}
a {
     color: green;
}

/* after */
p {
     color: blue;
     font-size: 12px;
}
h3, a {
     color: green;
}
 

Step2

入力フォームに圧縮させたいCSSの記述をコピーして貼りつけ、圧縮開始ボタンを押すと数秒ほどで圧縮＆軽量化が完了します。

↓ こちらに貼り付け

※ 利用上の注意事項

  • 圧縮変換後の完全復元はできませんので必ずバックアップをとってからご利用ください。
  • 圧縮後のCSSは、ローカルなどで表示確認した後にアップロードしてご利用ください。
  • CSSは、セレクタ{プロパティ: 値;} の形態のまま貼り付けてください。

スポンサード リンク

Step3

圧縮が完了すると下のフォームに変換されたCSSテキストが出力されますのでコピーしてお持ち帰りください。圧縮処理結果は右下のテーブルを参照してください。

↓ 圧縮ボタンを押すと表示されます

CSSのまとめ方

スポンサード リンク