CSS属性フォーマット Version 0.2

CSS属性フォーマット Version 0.2をリリースしました。この拡張機能を使うとバラバラになりがちなCSSの属性を、位置を指定するもの→ボーダーを指定するもの→・・・といった具合にに並び替えることが出来ます。この拡張機能はDreamweaver 4以降で動きます(MX2004でしか検証してませんが…)。インストール方法は上のリンクからCSS_AttrFormat020.mxpをダウンロードしてダブルクリックするとExtensionManagerが立ち上がり、自動的にインストールされます。

この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマットしてくれるものです。例えば以下のようなCSSがあるとします。

.sidetitle {
border-right-width: 8px;
border-left-width: 8px;
text-align: center;
background-color: #F9DFE3;
border-right-style: solid;
border-left-style: solid;
padding-top: 0.2em;
padding-bottom: 0.2em;
font-size: 9pt;
border-right-color: #CC1133;
border-left-color: #CC1133;
}

このCSSは属性がバラバラになってしまっていますが(ボーダー関連の属性が.sidetitleセレクタの上下に散らばっていますよね)、このコマンドを使うと以下のように整列されます。

.sidetitle {
padding-bottom: 0.2em;
padding-top: 0.2em;
border-left-color: #CC1133;
border-left-style: solid;
border-left-width: 8px;
border-right-color: #CC1133;
border-right-style: solid;
border-right-width: 8px;
font-size: 9pt;
text-align: center;
background-color: #F9DFE3;
}

こうすることで、Dreamweaverのダイアログを使って編集したときにバラバラになってしまいがちな属性をカテゴリーごと(ポジションを指定するものとかボーダーを指定するものとか)に分類してわかりやすくすることが出来ます。もちろん属性の並び順は変更することが出来ます。変更するにはDreamweaver のメニューから コマンド > CSS属性フォーマットの設定 と選び、出てくるダイアログの中で属性の並び順を変更してください。そこにある並び順でCSSファイルの並び替えが行われます。

Version 0.2では属性を整列する順番を設定するダイアログを付けました。バグなどを見つけたらコメントに書き込んで頂けるとたすかります。

そのうち実装しようと思っている機能として、shorthand propertyにまとめる機能を追加しようと思ってます。例えば次のような宣言font-size: 80%; font-family: sans-serif;font: 80% sans-serif;のようにまとめる機能です。

13 thoughts on “CSS属性フォーマット Version 0.2

  1. 2004年02月21日 (土)

    最近はCSSをバリバリ使ったページも増えてきているが、その編集は手打ちでやってるのかな? Dreamweaverかな? GoLive? その中で、Dreamweaverな方にいい情報です。

  2. 初めまして。
    CSS属性フォーマット早速インストールさせていただきました。
    katzさんのお陰でますますWebページの制作がDreamweaver1本で完結でき、パフォーマンス的にも大助かりで、感謝しております。(今まではTopStyleProで一気に整形してました)

    感謝ついでに1つ要望を述べてみたりします。
    普段はセレクタを一列で表記して、一定の文字量に達すると複数行に整形してくれる機能なんかあれば、コードがより見やすくなり、嬉しいなぁと思ったりましました。

    気が向いた時にでも検討していただければ嬉しいです。

  3. くーさん、使っていただいてありがとうございます。
    折り返し機能はたしかにあると良さそうですね。次のリリースの時に盛り込めたらいいなと思います。

  4. ご検討いただき、ありがとうございます。
    こういった、かゆい所に手が届くextensionこそ、
    実は一番役に立つもので、毎日活用させていただいてます。

  5. はじめまして。以前ダウンロードさせていただいて、とても便利に使っております。ありがとうございます。

    ひとつお願いなのですが。
    異なるブラウザでも同じように表示させるために、先頭に「_(アンダーバー)」をつけてIEだけに適用させる技があると思います。その技をつかっている場合、CSS属性フォーマットを適用させるとアンダーバーが消えて”正しい”書式になってしまうのです。
    正しい書式にしてくれているのに文句言えない気もしていますが、アンダーバー付いたままに出来ませんでしょうか。勝手なお願いで恐縮ですが、ご検討くださいませ。

  6. pukaさん、
    使ってもらってありがとうございます。
    アンダーバーが消えてしまうのはおそらくバグです。
    早いところ修正して新しいバージョンをリリースしようと思っています。

  7. お忙しいところ失礼します。こちらの機能拡張は大変便利で重宝しております。私としては、widthなどのタグの後に、tabキー(タブ)を2回ほどいれていただきたいのですが。

    よろしくお願いいたします。

  8. keiさん、
    とりあえずの対処療法ですが、タブを入れる方法をご紹介します。
    C:¥Documents and Settings¥(ログインユーザー名)¥Application Data¥Macromedia¥Dreamweaver MX 2004¥Configuration¥Commands¥CSS_AttrFormat.htm
    を開きます。(パスが違うことがあるので、OSのファイル検索機能でCSS_AttrFormat.htmを検索して開いた方が良いかもしれません)
    90行目は
    result += “t” + o.attr + “: ” + o.val + “n”;
    となっていると思うのですが、以下のように書き換えます。
    result += “t” + o.attr + “tt: ” + o.val + “n”;

    これでタブが2つはいるようになると思います。

  9. CSS属性フォーマット Version 0.2:DreamWeaver で CSS属性を整理

    会社の同じグループの子に教えてもらった、DreamWeaver用の extension、CSS の各セレクタ毎の属性を、背景、マージン、余白など指定した順…

  10. Pingback: 「dreamweaver」「 Edge Code CC」にプラグインを入れて効率化 | WEBに関するあれこれ解決!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>