このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CSS圧縮 webサービス css compressor

CSS

2011.11.26

この記事は最終更新日から1年以上が経過しています。

CSSを圧縮出来るwebサービス CSS Drive css compressorの紹介になります。

公式サイト
http://www.cssdrive.com/index.php/main/csscompressor/

たかがCSS。されどCSS。

スマフォン時代 重要視されるパフォーマンス

圧縮する必要なんてあるの?と思われがちなのですが、

ちょっと前ではそんなに重要視されてはいなかったかも知れません。

しかし、現在ではPC以外のデバイスが発表され、普及率も加速していっている現状です。

『スマートフォン』というデバイスの登場で、様々な事を考えなければ行けなくなりました。

表示速度、「パフォーマンス」もそのひとつです。

折角、クリックしてページを開いてもらったのに、「表示が遅い。」との理由で

ページを閉じられては元も子もありません。

そういったユーザーにストレスを与えないようなコンテンツ制作も製作者は考えていかないといけません。

スマートフォンではCSS3が使え、今まで画像ファイルで表現していた部分もCSSで表現が可能となっています。

数行のcssならばそんなに影響はないかと思われますが、大きいサイトとなれば数千行のcssとなることもあります。

塵も積もれば山になるように、記述が増えていくと、ファイルデータも重たくなってしまいます。

そのデータを少しでも軽くしてくれる方法が「圧縮」となります。

ダーっと書かれたCSSも

1行にまとめてくれます。(折り返しされてるので数行表示しています。)

では使用方法を。

使用方法

公式サイト
http://www.cssdrive.com/index.php/main/csscompressor/

上記リンク先のページを開きます。

扱うところは以下の部分。

テキストエリアに圧縮したいcssを記述(コピペ)し

上のラジオボタンを2つ選択し、以下のCompress-it!ボタンを押せば圧縮されます。簡単!

mode

まず、Compression mode ですが、簡単に言うと圧縮率ですね。

Light  > 軽めの圧縮

Normal > 普通の圧縮

Super Compact > 超圧縮

となってます。

のようになります。

Comments

また、mode選択の下にあるのは、コメントを削除するかどうかです。

Don’t strip any comments >コメントを削除しない

Strip ALL comments > コメントを削除

Strip comments at least ◯◯ chars long (NOT counting line breaks within comment) >

文字数を指定し、文字数以上の場合削除する。

圧縮前

Don’t strip any comments & Super compact

Strip ALL comments & Super compact

Strip comments at least 20 chars long (NOT counting line breaks within comment)

圧縮前

圧縮後

また、圧縮前と圧縮後のファイルサイズの確認も行えます。

宜しければお使い下さいー。

Comment

Related Article

CSSスプライトを コマンドで生成 「Glue」の使い方

2014.08.23

jsdo.it企画 CSSで必殺技に参加しています。

2011.12.07

CSS圧縮 webサービス css compressor

2011.11.26

同一クラスで異なるレイアウト CSS 隣接セレクタ

2011.10.26

css 文頭のみ インデントを適応させない

2011.10.19

CSSをライブラリ化?Sass(scss)のインストール 使用方法 mac

2011.09.05

IE6 クリアーフィックスが効かない時

2011.06.25

CSS ブラウザの縦幅に合わせレイアウト調整

2011.06.05

css リキッドレイアウト スマートフォンでも利用化

2011.02.23

CSSとはなんぞや? (スタイルシート物語)

2010.11.25

CATEGORY LIST

LATEST NEWS

Rustでつくる ふっかつのじゅもん

Rust

2025.04.29

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その5

Rust

2025.04.14

う、動くぞ! Mac mini Apple M4 Pro で PS3ソフトを遊ぶ。RPCS3 Mac版を起動

Game

2025.04.12

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その4

Rust

2025.04.10

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その3

Rust

2025.04.08

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その2

Rust

2025.04.07

時代を先取りし過ぎた ニューラルネットワークが導入されたゲーム『がんばれ森川君2号』を令和に嗜んでみる。

Game

2025.04.06

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その1

Rust

2025.04.05

keyring-rsで、Macのキーチェーンに登録する。

Rust

2025.04.04

RustとWebAssemblyによるゲーム開発 Webpack5対応

Rust

2025.03.27

Rustで創る MOS 6502 CPU その3 (Cursorと共に)

Rust

2025.02.24

あけましておめでとうございます(24日経過)

イベント

2025.01.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US