StyleNoteにはWEB制作の負担を軽くする様々な機能が搭載されています。
StyleNoteはタグ挿入型のHTML/CSSエディタです。見やすく使いやすいインターフェイスを備え、コーディングをサポートする豊富な編集機能を搭載しています。StyleNoteならではの特徴的な機能が相互に連携することで、効率的な作業環境を実現しています。
スマートエディット
スマートエディットの動作が新しくなりました。スマートエディットの起動はキー入力状況に応じて自動的に行われます。また、起動後に続けてキーワードを入力することで、候補リストの絞込みを行い、より一般的なキー入力支援機能の動作に近づきました。
また、StyleNoteの入力支援はダイナミックに候補リストを構築します。フォント名、ファイル名、カラー名等については、入力文字に応じて候補リストを構築して、より素早いコーディングをサポートします。
StyleNote5のスマートエディットは、CSSの入力支援にも対応しています。CSSセレクタの構造を理解して、適切な候補をリアルタイムに表示します。
zen-coding [新機能]
StyleNote5では、zen-codingへの対応も進んでいます。現時点で省略形の展開(HTML/Selectors対応)と、画像サイズの更新、コメントのトグルに対応しています。未対応の機能についても、今後のバージョンアップで順次対応していく予定です。
Zen-Codingを利用すると、例えば <a> タグを新しく入力するとき、「a」とだけ入力し、TABキーを押すと、自動的に「 <a href=””></a> 」が入力されます。
ホイールインプット [新機能]
StyleNoteではCSSのユニット付数値またはCSS/HTMLの属性値を選択した状態で、Shiftキーを押しながらマウスのホイールを動かすと、数値/属性値を簡単に変更することができます。
「CSS選択の最適化」オプションと併用することで、ダブルクリックで数値範囲を一発選択することができ、素早くホイールインプットを実行できます。
オートコンプリート
StyleNoteでは、キー入力支援機能として、ユーザーが補完候補を独自に設定できる「オートコンプリート」機能を搭載しています。
例えばよく入力する文字列として「http://sn.lowedge.com」というURLを登録し、起動文字数を「3」にすると、「htt」まで入力したタイミングで候補が表示されます。
エレメントオーダービュー [新機能]
キャレット位置のHTMLタグの階層状況を視覚化できます。
エレメントオーダービューはクラスファインダと連携します。エレメントオーダービューにより割り出された階層状況を基に、キャレット位置に影響を及ぼしていると思われるCSSセレクタのみをクラスファインダ上で絞込み表示することができます。
スタイルインスペクター
CSSセレクタの作成・再編集はスタイルインスペクタがサポートします。有効範囲にキャレットが入ると、自動的にインスペクタがアクティブになり、必要な属性を簡単に追加編集することができます。
属性の解説も表示され(W3C Specification原文/一部翻訳)、ユーザーが知らない属性についてのサポートを強化しています。
クラスファインダ
編集中のファイルに定義されているCSSセレクタの一覧を表示します。@import, による外部CSSファイルの参照にも対応しています。
また、キャレット位置に影響を及ぼすと思われるセレクタのみを表示できる「エレメントオーダービュー連携」機能も搭載しています。
スタイルルーペ [新機能]
スタイルルーペを利用すると、HTMLタグに記述されているIDまたはCLASSの定義先を検出し、セレクターの確認及び編集をダイレクトに行うことができます。
外部CSSファイルを開くことなく、スムーズにスタイルシートを編集することができるため、作業効率が劇的に変化します。
オブジェクトインスペクター [新機能]
StyleNoteに内蔵されているブラウザーには、プレビュー中の要素の情報を調べられるオブジェクトインスペクタ-機能が実装されています。
各要素の横幅や、適用されているID/CLASS等の各種情報をマウスクリックで取得できます。
アクティブコードヒント [新機能]
StyleNoteでは、キャレット位置に応じた各種情報をポップアップする機能が実装されています。
例えば、カラーコードの文字列内にキャレットがあるとき、アクティブコードヒントが自動的に起動して、当該カラーコードの色を自動的にプレビューします。また、ID/CLASS名の文字列内にキャレットがあるとき、自動的にポップアップされるボタンから、ダイレクトにインラインエディターを起動して、当該CSSファイルを開くことなく内容のプレビューと編集を行うことができます。
関連ファイル機能 [新機能]
WEBページの制作では、ひとつのHTMLファイルを編集する際に、編集対象のファイルを切り替えることが頻繁に発生します。一方でCSSの外部参照やリンク先ページ等、編集範囲はある程度限定されます。
StyleNoteでは編集中のファイルに関連するファイルを自動的に検出してファイルバーに列挙します。また、ベースとなるHTMLファイルをロックすることで、CSSファイルやJSファイルへの切替をスムーズに行えるようになります。また、ロックモード時には、関連ファイルを編集して保存すると、自動的にベースファイルのプレビューが更新されるようになります。
クイック検索 [新機能]
編集画面と同じウインドウに設置される検索窓から、ドキュメントのキーワード検索を素早く実行できます。
ENTERキーを連続して押すことで、連続的に検索を実行することができ、目的の場所を簡単に見つけられます。
２つの内蔵ブラウザ [新機能]
StyleNoteでは編集領域の横に表示できる内蔵ブラウザと、独立ウインドウで表示できる内蔵ブラウザを搭載しています。
内蔵ブラウザは両方同時に利用することができます。例えば、デュアルディスプレイ環境下では、編集画面横のブラウザで縮小版を確認し、もう１つのモニターでは全画面表示して実行結果をを確認することもできます。
また、リアルタイムプレビューにも対応（v3.04予定）しています。キー入力と同時に、ファイルを保存することなくプレビューが自動的にアップデートされます。
タグの整合性チェック [新機能]
レイアウト崩れや、想定外の範囲にCSSが適用される等の現象が発生した場合、タグの整合性が疑われます。
StyleNoteでは入力ミスによる不完全なタグや、コピペによる思わぬタグの混入を簡単にチェックすることができます。
また、タグの交差エラーのチェックも可能です。
スニペット [新機能]
StyleNote4に搭載されていたユーザータグ、ユーザー定型文は、StyleNote5では「スニペット」の名称で機能が統合されました。
スタイルノートスクリプトを埋め込むことができ、これまでよりもインタラクティブな動作を実現できます。
ライブラリー [新機能]
StyleNoteではスニペット、スタイルノートスクリプト、コーディングメニューに表示される項目の全てがライブラリーパネルに集約されています。ライブラリーの特徴は、これらの項目を横断的に検索することが可能な点です。
例えば、ライブラリーを常用すれば、ツールバーのボタンを最小限に減らし、ウインドウ領域を広くとることが可能です。また、数多く登録されているコーディングメニューの内容を検索できるため、目的の項目もすぐに見つかります。
マルチヒストリー [新機能]
StyleNoteでは、クリップボードの履歴や、HTML/CSSの挿入履歴を簡単に利用できます。マルチヒストリーを利用することで、繰り返し編集の負担を少しだけ減らすことができます。