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

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US