このサイトは、只今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

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

Flutterで作る ChatGPT Prompt Manager

Flutter

2023.07.12

【M1 Mac】Python ScrapyがImportErrorで大ハマリ。lxmlなど環境作成し対応した件。

Python

2023.05.24

ミニPC Minisforum UM773 SE/ Liteがセールみたいだったので、ポチった件

イベント

2023.04.23

AI(ChatGPT)に聞くDart言語

Dart

2023.03.12

DartパッケージでPub Pointsを満点にする

Dart

2023.03.11

Dartパッケージをサクッと作成する

Dart

2023.03.07

DartでさくっとCLIツール作成。

Dart

2023.02.28

M1Macで行う「RUSTではじめるOpenGL」

Rust

2023.02.25

SolidityとEthereumによる実践スマートコントラクト開発 書評 ~ 再構築

暗号通貨、ブロックチェーン

2023.02.10

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US