Webページの作成においては、HTMLタグはドキュメントの構造を記述し、レイアウトや装飾はスタイルシートとして記述することが推奨されている。このようにタグとスタイルシートを完全に分離することにより、ソースコードの可読性やメンテナンス性が向上する一方で、ちょっとした修正を行うにもタグとスタイルシートの両方を行き来しながら編集を行い、さらにブラウザでレンダリング結果をチェックするといった手間が必要となる。「StyleNote5」の大きな特徴として「充実したアシスト機能による作業の効率化」が挙げられるが、なかでも特に目立つのが「HTMLタグの編集とスタイルシートの編集をうまく融合させさせている」点だろう。
その代表ともいえるのが「クラスファインダー」。定義済みのセレクタがツリー形式で表示されるため、よく似たセレクタを無駄に定義してしまうようなミスを減らせるし、パラメータを修正したい場合は、スタイルシート内の該当個所を一発で呼び出せる。
一方、HTMLの編集中にスタイルシートの設定値を修正したくなった場合は、「スタイルルーペ」機能を使えば、HTML編集画面から直接パラメータ記述個所を呼び出して、その場で修正できる。
そのほかにも、HTMLタグに対して定義済みのセレクタを割り当てるための機能や、セレクタ名の一覧表示機能などがあるが、これらはどれもスタイルシートファイル自体を開いていない状態で利用できるよういなっている。
このように、HTMLの編集とスタイルシートの編集とが互いにうまく連携して、ちょっとした手間を軽減することが、ひいては全体の作業効率アップにつながっている。
高機能すぎて、Webデザインを学びはじめたばかりの人には少々難しく思えるかもしれないが、スタイルシートの役割やどんなパラメータがあるのかといったことを学ぶ上でも、よい教材になりそうだ。
単なる「タグ挿入機能付きテキストエディタ」ではなく、より効率的なWebデザインツールをお探しの方、構造化されたスマートなサイト作りを目指す方にお勧めしたい。
(福住 護)