CSS最適化／CSS整形

　状態:不明　閲覧数:6,190 　投稿日:2010-04-18 　更新日:2011-08-06

■CSS最適化オンラインツールの性能比較
CSS最適化ツールとしてはCSS Tidy系がバランスが良く、またどのようにオプションを設定しても見た目が破綻することなく、使いやすいと思います、と紹介されている。
▼ゆっくりと… » CSS最適化オンラインツールの性能比較 (2)
　 http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/evaluate-online-css-optimizer-2/

■2011.2.1追記
◎方法１．ProCSSorを利用
オプション
▽Properties of a Rule
　 On Separate Lines
▽Indent Properties
　 2 Spaces
※整形対象CSS内に、@charset "utf-8";があると、正常に動作しないため、一時的に外しておく。
▽ProCSSor - Advanced CSS Prettifier
　 http://procssor.com/

○方法２．DreamweaverでCS整形
コマンド
　　↓
ソースフォーマットの適用
※「ソースフォーマットの適用」自体が、選択できない場合がある。理由不明。

▼2011.8.6.追記
どういうルールでフォーマットが適用されるか、
フォーマットルールの変更は、こちら
「編集」－「環境設定」－「環境設定」－カテゴリ「コードフォーマット」－高度なフォーマット「CSS(S)」をクリック

サイトにプログラムコードを貼り付ける preタグのCSS

使用していないCSSをチェックする、標準的な方法を知りたい

順位	ページタイトル抜粋	％
1	CSS最適化／CSS整形	67
2	CSS管理効率化のために	25
3	OOCSS	24
4	CSS仕様書	22
5	CSS色指定	22
6	CSSセレクタ	21
7	HSV ／ HSB	19
8	CSSで出来ないこと	18
9	フォーム要素に対する(私の)CSS適用ルール	18
10	CSS選択範囲非表示対応	17
11	CSSで画像をロールオーバー	15
12	SCSS × Windows	15
13	「CSSプロパティ」書く順番	15
14	CSSのみで交互色 … リスト	15
15	「OOCSS」とは別の考え方？	15
16	背景CSS シームレスパターン	15
17	CSSだけでボーダーを内側に引く	14
18	(私の)CSSコーディングルール	14
19	Private リセットCSSテンプレ／ CSS圧縮Link	14
20	遠近グリッドはCS3にはないの？	14
	2025/11/25 15:58 更新

順位

ページタイトル抜粋

％

フォーム要素に対する(私の)CSS適用ルール

Private リセットCSSテンプレ／ CSS圧縮Link

遠近グリッドはCS3にはないの？

2025/11/25 15:58 更新

順位	ページタイトル抜粋	アクセス数
1	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	34
2	「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」	23
3	鉄道会社毎のカラーコード \| カラーコード(色)	11
4	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	8
5	「東京都」のカラーコード取得は難しい \| カラーコード(色)	7
6	RGB ⇔ Lab \| 色変換(色)	6
6	RGB → HSL を色モデルで考える \| 色変換(色)	6
7	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	5
7	色モデルイメージ図 \| 色変換(色)	5
7	似顔絵ジェネレーター : 似顔絵メーカー／ NIGAOE MAKER	5
8	自由変形ツール \| Illustrator CS3(Illustrator)	4
8	ログイン	4
9	「:after擬似要素」は、Chromeの「要素を検証」で確認できない \| 擬似(CSS)	3
9	ICCプロファイル \| カラーマネージメント(色)	3
9	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	3
9	「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 \| 画像	3
9	カテゴリ一覧	3
9	Design 0	3
10	画像フィルタ(画像) カテゴリー	2
10	XnViewMP \| XnView MP 系(ソフトウェア)	2
	2025/11/25 1:01 更新

順位

ページタイトル抜粋

アクセス数

Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン)

「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」

鉄道会社毎のカラーコード | カラーコード(色)

キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス | イラスト参考(デザイン)

「東京都」のカラーコード取得は難しい | カラーコード(色)

RGB ⇔ Lab | 色変換(色)

RGB → HSL を色モデルで考える | 色変換(色)

「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ)

色モデルイメージ図 | 色変換(色)