CSSEdit 2.5 を教育の現場で使う

業務連絡：本日の夜です（チェックイン後、ロビー集合）。

MacRabbit「CSSEdit 2.5」+「Transmit」

CSSEdit 2のリリースが昨年の11月、その後2回のマイナーバージョンアップがあったが、早くもバージョン2.5になった。「こういう機能があったらもっと使いやすくなるのに‥」と思っていたツールが搭載された（対応がはやい）。今回は、CSSの教育用として使用してみる。尚、試行授業ではTransmitと連携してDreamweaverのような総合環境を構築する。

ビジュアルエディターとソースエディターの使い分けがポイントとなる。バージョン2.5の新機能「セレクタ・ビルダー」がCSSの継承、カスケード処理の理解に役立つ。

ビジュアルエディターから「セレクタ・ビルダー」を使用する（手順の一例）

子孫セレクタだけではなく、子セレクタや隣接セレクタの理解にもつなげる

バリデーションパネルは作業中、常に表示しておく（リアルタイム・チェック）

参考：Release Notes

Using the Selector Builder:

Writing selectors manually
The selector represents a number of requirements an element in a web page has to fulfill to be affected by the style. A HTML web page is a tree structure of tag elements, and a CSS selector defines possible paths to such a tag element.
If you so desire, you can always write your selectors manually. An example of a selector is the following:

#sidebar ul > li a:hover
Style every "a" element (links) that is being hovered by the mouse, if it is a descendant of a "li" element (list items), whose parent is a "ul" element (unordered lists) that is a descendant of an element with the "sidebar" identifier.

過去記事：
2006/11/07「CSSEdit 2」