昨日、Adobe Dreamweaver CS3 10 周年記念 イベント - 夢を紡ぐ者たちへ -に参加してきました（レポートのエントリーを後日掲載します）。

そこで紹介されたTipsやCS4に関する最新情報は、どれも興味深く、自分にとっては役立つ情報ばかりでしたが、その中ですぐに試せて、かつ大変便利そうで、さらに自分が今までずっと欲しかった機能があったので紹介します。

それは、Dreamweaverの拡張機能を使って、CSSプロパティの記述順序を自動的に並べ替えることができる、というものです。

以前の「CSSプロパティの指定順序」というエントリーでも書いたとおり、これまでは「自分が作ったプロパティの指定順序と、Dreamweaverの「CSSルール定義ダイアログボックス」からはき出されるコードのプロパティの指定順序が全く違う」ということに非常に不便を感じていました。今回の拡張機能は、それを解決する、まさに目から鱗の機能です。

  • CSS属性フォーマット（合同会社レゾリューションズ）
  • 提供中のバージョン：Version 0.2
  • 対応情報：Dreamweaver MX以降

使い方は簡単です。

まず上記サイトから「CSS属性フォーマット」をダウンロードします。ダウンロードしたファイルを開くと、Adobe Extension Managerが立ち上がり、「承諾する」をクリックすれば「CSS属性フォーマット」がDreamweaverにインストールされます。

CSSファイルを開き、「コマンド」→「CSS属性フォーマット」をクリックすれば自動的に並べ替えてくれます。

CSS属性フォーマット

さらにこの拡張機能の嬉しいところは、「コマンド」→「CSS属性フォーマットの設定」からプロパティを並び替える順序を自分の好きなように変更できるという点です。

CSS属性フォーマットの設定

僕は先日エントリーした「CSSプロパティの記述順序」の順序に並べ替えました。以下にその順序のプレーンテキストを掲載しておくので、必要な方はの「CSS属性フォーマットの設定」画面へコピペして使ってください。

display
list-style
list-style-type
list-style-image
list-style-position
marker-offset
position
top
right
bottom
left
float
clear
z-index
width
min-width
max-width
height
min-height
max-height
line-height
vertical-align
overflow
clip
visibility
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top
border-bottom
border-right
border-left
background
background-color
background-image
background-repeat
background-attachment
background-position
color
font
font-family
font-style
font-variant
font-weight
font-stretch
font-size
font-size-adjust
text-indent
text-decoration
text-align
vertical-align
white-space
othertext
text-shadow
letter-spacing
word-spacing
text-transform
white-space
caption-side
table-layout
border-collapse
border-spacing
empty-cells
contentcounter-increment
counter-reset
quotes
outline
outline-width
outline-style
outline-color
cursor
size
marks
page-break-before
page-break-after
page-break-inside
page
orphans
widows
speak-header
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-numeral

ところで、CSSは「属性」じゃなくて「プロパティ」では。。。