「毎日考ブログ」はとっくの昔に移転してました
個別記事にお引越し表記するの、一年近く忘れてました(最低
すでに新しくもないブログのURLは以下ですよろちくび。(最低

mkb : http://mkb.salchu.net/

<< はてなブックマーク拡張を入れたのでちょこっとレビュー | main | 私のiGoogle(ホーム)はこんな感じ。 >>

CSSエディタのCSSEditを愛用してます。

2009-04-21 Tue[Apple/Mac > アプリケーション]

CSSEditアイコン少し前に「Web制作に使っているアプリケーション」というようなエントリを見かけたんですけれども、その中でこのCSSEditを使っている方をいくにんか見かけましたんで自分もレビュー。ちょこっとだけど。

CSSEditは舶来ものの、CSS編集に特化したエディタでして、シェアで$29.95する有償のアプリケーションです。私はこれに日本語パッチを当てて使っております。

そのインターフェースはこんな感じで。

CSSEditの画面(クリックで拡大します)

CSSEditの画面

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

いわゆる一般的な画面。左にグループ分けした(後述)項目、右にCSSのファイルの中身が表示されとります。

CSSEditは補完機能もそこそこ優れていて、bと打てばborderだのbackgroundだの、teと打てばtextなんちゃらだの、とプルダウンが表示されたり、}やカンマを補完してくれたり、決してお節介ではない使い勝手がマルです。

CSSEditの画面 2(クリックで拡大します)

CSSEditの画面 2

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

表示スタイルを変えると、右の…これはなんていうのかな(ビジュアルエディタというそうです)。要は簡単に、視覚的に属性が入れられるようになっとります。…選ぶより打っちゃった方が速いので、閉じっぱなしですけど。

新規セレクタ(クリックで拡大します)

CSSEdit:新規セレクタ作成

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

ツールバーアイコンの「新規セレクタ」をクリックすると、なんかいろいろ適当にできるのですが、これもまず使いません。選ぶより以下略。

CSSEdit:グループ作成(クリックで拡大します)

CSSEdit:グループ作成

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

一枚目のサムネイルで「後述」と書いたのがこれ。CSSファイルのほうを見るとわかるんですが、@groupから@endのコメントアウトで囲まれたところが、左ではフォルダとして表示されます。これは自動ではなく自分で挿入するものですが、CSSの整理がしやすいので使っています。(さすがに会社のサイトでは使いませんけど)

CSSEdit:ライブプレビューでインスペクタ(クリックで拡大します)

CSSEdit:ライブプレビューでインスペクタ

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

CSSEditにはブラウザ(Webkit)がついてます。FirefoxのFirebugのように、そのボックスにどんなクラスやIDが付いているかを調べたり、そのCSSファイルを抽出して、当該箇所を開いたりすることもできます。それが下のサムネイル。

CSSEdit:CSSを読み込んで修正(クリックで拡大します)

CSSEdit:CSSを読み込んで修正

写真をモバイル端末で見る]画像リンク用URL※写真右上の×か、写真上をクリックでclose

CSSファイルのほうには「extracted」と付いてまして、overrideしてますよ、といった印です。適当なページをプレビューで開き、CSSを編集してプレビューしなおしたり。ここらはFirebugと同じです。

動作も機敏ですし、進捗記録が保存できたり、CSSのバリデートができたり、ブラウザとの連携がしやすかったり(ブックマークレットもあったりします)、CSSを整形できたり…まあ、素晴らしい機能満載なんですけどただひとつ。

文字コードあたりがちょっとねー。UTF-8のファイルしか扱えないっつーのが難と言えば難。Shift-JISもEUCも読み込めますが、2バイトが化ける上、上書きしたらUTF-8に大変身。

まあ、全部統一しておけば良いのですけど、実際そのファイルがUTF-8かどうかはCSSEditでは表示されないので、注意が必要ではあるんですが…ここらが完全にキラーアプリ化できない要因でもあります。が。

やっぱり使いやすい。私、HTMLエディタにしてもCSSエディタにしても、補完機能って単なるお節介としか思ってこなかったんですが、属性を知っているいないにかかわらずこれを上手く使いこなせば、入力スピードが格段にアップするんですよね。

で、どうしてもCSSEditを使いたいがために、自分のブログのCSSのエンコードも変えてしまったという。(それまではブログ本体と同じ、EUCだったんですが)

例えばプレビューもWebkitだけではない他のものも選べるとか、某エディタのようにカラーコードが抽出できるとか…今後どのようにバージョンアップしていくか楽しみなアプリケーションであることは間違いないっす。

にほんブログ村 デザインブログ Webデザインへ にほんブログ村 PC家電ブログ Macへ

<< はてなブックマーク拡張を入れたのでちょこっとレビュー | main | 私のiGoogle(ホーム)はこんな感じ。 >>

同じカテゴリの新着記事

いただいたコメント

ハム | 2009-04-22 02:45 AM
僕も以前Macを使っていた時は比較的愛用しておりました。タグ補完も便利な機能ですし、なによりFirebugのように、リアルタイムで編集しながら適応状態をみれるのがいいですよね。比較的早くCSSを設定したい時に重宝しておりました。
(簡易なときはいつもCotEditorで使ってましたが。)
このソフト、Windowsでも使えるようになってほしいくらいです。
forestk | 2009-04-23 03:28 PM
多分今後は Espresso に統合されていくのだと思います。
link (www.macrabbit.com)

CSSだけでなくサイト構築すべてが行えるらしく良さげですよ!
(自分はまだOSがTigerだったりして使ってないのですが・・・)
salsa | 2009-04-23 10:59 PM
■ハムさん
そうなんですよねー。このリアルタイム編集はけっこう重宝してます。や、するときもあります、くらいかな?(笑)

■forestkさん
Espresso、MacHeistのときにインターフェース見て、それっぽいなーって思ってました。MacHeistは購入しませんでしたけど、結局Espressoは皆さん手に入れられたんでしょうかね…

トラックバックはこちらから。



いただいたトラックバック

ページの先頭へもどる


毎日考ブログ新着

緑町のウェブ屋新着

Author:salsa

MacとWebが三度の飯よりは好きでない猫好きのWeb屋。
Twittersalchu's flickrFriendFeedsalblr.
» about

Categories

Archives

mobile

QRコード

» 携帯で読む