Home > Web Site > スタイルシート作成&最適化ツール

スタイルシート作成&最適化ツール

2004-11-17 (水)
Web Site

blogのカスタマイズをするのにスタイルシートは避けて通れないシロモノです。
でもblogを始めるまではスクロールバーの色を変えたりリンクの装飾をしたりって感じの小技程度にしか使ってなくて正直よくわかりませんでした。

今日も職場でスタイルシートをいじろうと思ったんですが自宅のPCのブックマークがわからないので久しぶりにいろいろ検索したらいくつか便利なサイトを発見しました♪
(これに懲りて最新のブックマークもYahoo!ブックマークに追加して職場からも利用できるようにしました。)

ホームページレイアウト on HTML for stylesheet
あらゆる要素のスタイルシートをブラウザ上で作成できます。
カラーサンプルを見ながらカラーコードが選べればもっといいのになって思いました。
確かに便利だけど全くの初心者にはわかりにくいかも…

CSS Maker - スタイルシート作成ツール
こちらもブラウザ上でスタイルシートが作成できるツール。
作成できる要素は上に紹介したツールより少ないですが言葉もわかりやすいしカラーサンプルを見ながら選べるのがいいです！
でも逆にカラーコードが決まってる場合コードを直接入力できないのが残念。
プレビューして確認しながら設定できるのも初心者にはありがたいです。

今回はCSS Makerを使わせていただいたんですが出来上がったスタイルシートは無駄の多い記述になってますのでサクっとダイエットしてみます。

Online CSS Optimiser/Optimizer
＜参照元＞Stylesheet Stylebook：サクッと最適化
スタイルシートの重複して無駄な記述を短く最適化してくれます。
例えば…

font-size: 90%;
line-height: 180%;
font-family: arial, "Lucida Sans", "Futura", sans-serif;

↓

font: 90%/180% arial, "Lucida Sans", "Futura", sans-serif;

こんな感じに最適化してくれるんです。
最適化したいcssファイルのurlを指定しても直接中身をコピペしてもどっちでもOKです。
さっきウチのスタイルシートを最適化したら…

OptimisedCSS