非公式　　Style Note5 マニュアル

　概要　
1990年代後半から HTMLタグエディタでホームページを作り続けてきたが、つい一か月ほど前に HTML エディタを選定し直した時に、「Style Note5」というタグ挿入型の HTMLエディタがあることを知りました。
正直、当初は WysiWygに乗り換えようかと思っておりタグ挿入型にはそれほど期待していませんでした。それにそれまでずっと愛用してきたエディタとは使い勝手がかなり違うので戸惑いましたが、使えば使うほどよく考えられているツールだと言うことに気付きました。ただ、残念ながら、正式な使い方を説明した資料が見つからず、こうしたツールにはそれほど手こずらない私でも結構右往左往し、このページを作りながらやっと「ああ、こんな風に使うのか」という程度の理解が出来つつあります。
そこで折角習得した操作方法を　忘れやすい自分自身のメモとして残し、ついでに公開することで若干なりとも同じ道で迷っている人の助けになればと思った次第です。
従って、私が戸惑ったところの説明が中心で、ここを読めば誰でも使えるようになるとかは保証しませんし、アプリを設計した方の意図はもっと違う使い方なのかも知れません。それでもまぁ　一つくらいは参考にしていただければと・・・・

目次　：

StyleNote を設定する

0-1：　エディタの文字色設定
0-2：　オートコンプリートの設定
0-3：　プレビュー画面の表示位置
0-4：　特殊文字の登録
0-5：　カスタムツールバーの設定
0-6：　デスクトップのショートカット

新しいページを作成する

1-1：　新規作成
1-2：　名前を付けて保存
1-3：　ドキュメント定義
1-4：　ファイル保存

タグ・属性・属性値を挿入する

2-1：　スマートエディット
2-2：　オートコンプリート
2-3：　右クリックのコンテキストメニュー
2-4：　ツールバーのボタン

編集に便利な機能

3-1：　タグ範囲表示
3-2：　検証ツール

A：　スタイルルーペ
B：　タグ整合性チェック
C：　ID/CLASS属性検証
D：　リンクチェック
E：　カラーコード一覧表示
F：　キーワード検索リストアップ
G：　オブジェクトインスペクター

3-3：　タグ階層のチェック(エレメントオーダービュー)

番外編

IME辞書の活用

各種 HTML Editor の私的評価

－０－ StyleNote　の設定
以下は最初に設定した方がいいと思う項目。この他にもかなり広範なカスタマイズが出来るが、それは使いながら追々やっていくとする。エディタの文字色設定図.１－１「設定」＞＞「エディタ設定」＞＞「カラーの設定」からタグや属性、属性値などの色分けの設定をする。デフォルトで設定されているが、大人しい色分けで　個人的にはもっとドギツイ設定の方が分かり易くていいと思う。オートコンプリートの設定図.１－２「設定」＞＞「StyleNoteの設定」で「オートコンプリート」の設定は行っておいた方がいい。タグだけをオートコンプリートさせるなら、図.１－２のように「カスタムコード補完を利用する」にチェックを入れて「タグを登録」ボタンを押すと全てのタグが登録されるので、使用頻度の低いタグを削除していけば楽。一方で、複数のタグの組み合わせでも使用頻度の多いものはここで追加登録しておくと非常に便利。例えば図.１－２の一番上の行のように<figure><img src="" alt="" class="" width=""><figcaption></figcaption></figure> などと登録すると、｛ <fi ｝と入力しただけで登録文字列が候補として表示されるのでEnterキーを押せば確定できる(詳細は後述)。（登録は直接リスト画面にキー入力する、あるいはコピペしてから右下の「適用」ボタンを押せば即反映される）プレビュー画面の表示位置図.１－３ StyleNoteはプレビュー画面とソース画面の位置関係を変更できる。横長モニターなら左右に配置してもいいが、私は慣れで上下にしている。(図.３) 特殊文字の登録図.１－４ StyleNoteでは　特殊文字はあらかじめ設定されていない。自分で登録する必要があるので、「設定」＞＞「StyleNoteの設定」で「機能」グループから「特殊文字」を選んで、「追加」ボタンを押して登録する。(図.４) 一つ上の「オートコンプリート」の登録はリスト画面に直接入力する方式で、こちらは登録ボタンを押す方式・・・統一してくれると戸惑いが減るが・・・まぁ最初だけなので我慢！カスタムツールバーの設定図.１－５私もかなり使いこんでから気づいたんだが、カスタムツールバーという機能がありここで各種タグをボタン化してツールバーに表示できる。例えばフォントを太文字化するタグ <b>をボタン化しておけば、文字列範囲を選択しておいてこのボタンを押せばその範囲が太文字化する。図.１－６このボタンをカスタマイズするのは「設定」＞＞「カスタムツールバーの設定」で行う。「標準ツールバー」と「HTMLツールバー」タブがあるので「HTMLツールバー」タブを開けば HTMLタグのボタン化が出来る。図.１－６のように左側の項目を選んでから真ん中の「＞＞」ボタンを押して右側に移動させると右欄に移動しそのタグがボタン化されて図.１－５のカスタムツールバーに表示される。図.１－７但し「表示」メニューの一番下の「カスタムHTMLツールバー」にチェックを付けないとツールバー自体が表示されない。デスクトップのショートカットと設定ファイルのフォルダデスクトップにショートカットを作る際には　リンク先指定でフォルダ指定を　C:\Programfiles\StyleNote\sn5.exe "-d C:\My Documents\StyleNote"　などと「-d」スイッチもダブルクォーテーションの中に記述しないといけない。これを他のソフトのように　D:\・・・\StyleNote\sn5.exe -d "D:\My Documents\StyleNote"　としてしまうと　「stylenote.iniに書き込めません」というエラーが発生する。ダブルクォーテーションの位置に注意して作成する必要がある。(間違った指定をするとそのドライブのルートに stylenote.ini が出来てしまう)

－１－新しい Webページを作成する
「ファイル」メニューの　＞＞「新規作成」　を選択図.１－１　図.１－１のような「NewFile」というタブがコード画面に追加され、白紙のコーディングシートが表示される。「ファイル」　＞＞　「名前を付けて保存」でまず保存するこの辺りの流儀は人それぞれで、ある程度コーディングしてから保存する人もいるとは思うけれど、HTML文書の場合相対リンクはそのファイルのフォルダが決まらないと生きないので、私は最初に保存することにしている。「コーディング」メニューの「文書のメタデータ」＞＞「ドキュメント定義」　を選択図.１－２図.１－２のような HTMLドキュメントの <!DOCTYPE> <head> ～ </head> 部分のデータ選択ウインドウが表示されるので、目的の HTMLバージョンやキャラクターコード、外部cssファイルURL 等の設定を行う。 <body> タグ内に指定する css属性や styleの定義などは「その他」タグの方で指定できる。・・・・とまぁ　知ったか振りをしているが、私の場合　それらの宣言の逐一の意味もよく知らないし最初から1行ずつ記述していくのは面倒。おまけにこの作業はサイトをアップする最初に一回行えば、後はそれをテンプレート化して使うので覚えられない。どこかからデザインの気に入ったテンプレート的なフリーのコードをコピーしてきてペーストしてしまうことの方が多い。「コーディング」メニューまたは「ファイル」メニューの中に「テンプレート」等と言う機能があって、一度設定した値を簡単に呼び出せるといいんだが・・・図.１－３余分な話はともかく、図.１－２で設定した状態で「OK」ボタンを押せば　図.１－３の通りのコーディングが出来あがる。まぁ、自分でテンプレート的なファイルを作って保存し、それを開いて「名前を付けて保存」すれば目的は達せられるので、貴重な開発資源はもっと使用頻度が高くて効率に影響するところに有効に使ってもらいましょう。ファイル保存図.１－４ <html> <head>・・・</head> <body> ～ </body> </html>までが、図.１－３の例のように記述されるので、内容を確かめ問題なければ「ファイル保存」ボタン(図.１－４)で保存する（まだ「名前を付けて保存」してない場合は「ファイル」＞＞「名前を付けて保存」で保存する）。かなり端折ましたが、私のマニュアル作成時間も有効に使いたいので、次に行きます　　(^ ^)ゞ

－２－タグ／属性／属性値を挿入する
さて、いよいよ<body> ～ </body> 本体部分の編集に入る。タグや属性の挿入方法は幾つかあるので、スキルや使用頻度に応じた方法を覚えるのがいい。スマートエディットを使う図.２－１多くの HTMLエディタ同様、StyleNoteでは半角入力で < に続けて文字入力していくとキー入力に応じた候補が補完される入力支援機能がある。（スマートエディットと呼ぶらしい）例えば <div> </div> タグをセットで入力する場合は、「 <div 」と入力して終端の > の代わりに半角スペースを入力した途端、 <div></div> と終端タグまで変換確定される。おまけに図.２－１のように、同時に属性の入力候補のリストボックスが表示されるので、クラスやスタイルなどの入力を追加する場合は楽だ。更に、例えば上記操作で属性として class を選択して入力すると「 class="" 」と言う文字列が入力される。そうしたらそのダブルクォーテーション ”” の間にキーボードから１～２文字入力するとその文字列が該当するセレクタが　図.２－２のようにリストで表示され、希望のセレクタをクリックするか ↑ ↓キーで選択入力が可能になる。図.２－２（但し、属性値を複数併記したくてもこの方法は一つ目だけにしか効かない。二つ目以降は普通にセレクタを完全に入力する必要があるが、例えば「font2」のようなセレクタを入力しようとして「fon」と入力した途端、オートコンプリートで何故かセレクターではなく「font-size」などの属性名候補のリストボックスが表示されてしまう。クラス属性のセレクタ併記は結構使うので、いずれ併記に対応するように改善されることを望む。）図.２－３図.２－３は align 属性を入力する場合で、<div> タグの中の <div と > の間に一つ目の半角スペースを入力すると、図.２－２と同じようにそのタグ要素に入力可能な属性の入力候補のリストが表示されクリック or 選択キーで入力が可能になるが、属性名の文字を入力していけばその入力文字で始まる属性名候補だけが表示される。例えば「align=""」と入力する場合半角スペースに続けて「al」と 2文字入力すれば候補は「align」だけになるのでその時点で Enterキーを押すと「align=""」と入力され、同時にその属性値が候補として表示される。或いは ””の間で「c」と入力すると「center」が、「r」と入力すると「right」が候補としてリストされるので一文字＋ Enterキーで入力確定できる。オートコンプリート機能で入力する図.２－４例えば上記０－２の「設定」でオートコンプリートを設定していれば、文字列登録したタグを挿入するには「<fi」と３文字入力しただけで、<figure><img src="" alt=""class="" width=""><figcaption></figcaption></figure> のような長いタグと属性の組み合わせでも候補として表示され、Enterキーで確定できる。この機能は長い文字列になるタグや属性値の組み合わせでも一度登録すれば３キーの入力で候補が表示されるので非常に楽で特にお勧め。右クリックのコンテキストメニューで入力する図.２－５ソース画面上のタグの挿入位置で右クリックして表示されるコンテキストメニューの「HTML」からタグの種類を選ぶ。この方法は上記２つの方法と異なって、文字列選択されていた場合はその選択部分を挟むように開始タグと終了タグが挿入できる。例えばすでに入力済みの文字列を太字に変更する場合など、文字列範囲を選択しておいて、右クリックからタグを選べば <b>選択部分</b> のような挿入が出来る。図.２－６また、<font>タグ等　属性が指定できる場合は図.２－６のような属性指定ウインドウが表示される。ツールバーのボタンで入力する図.２－７図.２－７の赤い点線で囲ったのがタグの挿入ボタン。初期設定の０－５でカスタムツールバーへのボタン登録設定を行って「表示」＞＞「カスタムHTMLツールバー」にチェックが付いていれば、右下の点線で囲った「カスタムHTMLツールバー」が図のように表示される。図.２－８例えば画像挿入の <img> タグ挿入ボタンを押すと図.２－８のようなボックスが表示され、「参照」ボタンを押すと画像ファイルの参照追加が出来る。図.２－９ cssや id を設定する場合は「css」タブを開いて「作成」ボタンを押す。（枠線や上下スペース、表示位置などは「詳細」タブで設定する。）図.２－１０図のように css や　id のセレクタがプルダウンで選択できる。

－３－編集に便利な機能
StyleNoteには編集に便利な機能が満載されています。とても全部は覚えられないので、自分の編集スタイルに合った使用頻度の多い物・便利なものを幾つか覚えておけばいいでしょう。以下は私が現時点で便利と感じている機能です。タグ範囲表示機能図.３－１ <div>タグやテーブルの<td>タグは、長い文章中に２重に入れ子にすることも多く、ソースコードを見ても余程インデントがしっかりしていないと開始タグと終了タグの対応が分からなくなってしまう。その結果、親子の開始／終了タグを間違えて削除してしまい、突然レイアウトが崩れて焦ることがある。図.３－２こうした時に欲しいのが開始タグとそれに対応した終了タグの範囲を表示してくれる機能。StyleNoteでは図.３－１のように親の<td>開始タグにカーソルを置いて、「選択」メニューから「タグ全体を選択」を指定したら図.３－２のように対応した親の</td>タグまでを反転表示してくれるので、一目瞭然でタグ範囲が把握できる(入れ子になっている <table>タグや <tr> <td> タグは跨いで表示してくれる)。これはタグ範囲をまとめて削除したい場合などに便利な機能だ。 StyleNoteのタグ範囲表示機能はこの他　親タグや前後タグの範囲指定等　豊富に用意されているので状況に応じて使い分けが出来る。検証ツール図.３－３「ツールパネルの使用」「表示」メニューの「検証ツール」を表示させると「スタイルルーペ」「HTMLタグの整合性」「CLASS/IDの検証」「ハイパーリンクの検証」の４つの検証ツールが選択できる。この中のどれかの項目をクリックしてチェックを付けるか、右図の標準ツールバーの赤い点線で囲ったボタンを押すと検証ツールパネルが表示され、タブを切り替えることでスタイルや ID/CLASS などのセレクタ一覧や整合性がチェックできる。図.３－４ A：「スタイルルーペ」検証ツールの「スタイル」タブではタグの id や class 属性の値がチェックできる。ターゲットのタグにカーソルを置いて、赤線で囲った更新ボタンを押すと図のような結果が表示される。更新ボタンの下の <> のボタン押すと対応のタグに、表示された属性値を選んでから{} ボタンを押すとスタイルシートの該当のセレクタの設定部分が表示されて編集が可能になる。図.３－４ B：「タグ整合性チェック」整合性タブでは、更新ボタンを押すとそのページのタグの整合性（開始タグと終了タグがセットになっているか）をチェックして片方が見つからない場合にはエラー内容が表示される。問題のタグ位置は検証ツール上では文字インデックスしか表示されないが、その部分をダブルクリックすればソース画面の該当のタグが反転表示されるので必要な修正を入れやすい。（但し、この表示はファイルタブを切り替えても自動では更新されず前回更新ボタン操作時の結果が表示され続ける）図.３－５ C：「ID/CLASS　検証」 ID/CLASS タブでは図.３－４の左上の赤点線で囲った更新ボタンを押すと使用されている要素一覧が表示される。更新ボタンを押すとそのhtmlファイル内で使用している ID/CLASS のセレクタ一覧がリストされ、そのセレクタがどのファイルで設定されているかが分かる。図.３－６例えばセレクタ名称を誤って記述した場合はそのセレクタが赤字で表示されるので、その項目上で「Shift＋ダブルクリック」すると図のような変更ダイアログが表示され正しいセレクタを選択することが出来る。図.３－７ D：「リンクチェック」リンクタブでは、そのページに記述されたリンク設定が適正かチェックできる。URL先にファイルがない(リンク切れ)場合には赤字で表示され修正が可能になる。図.３－８ E：「カラーコードチェック」検証ツールパネルの「カラー」タブでは　使用しているカラー値のチェックが出来る。更新ボタンを押すと使用されているカラーコードのリストが表示され、項目をダブルクリックすると該当のコード部分が反転表示される。図.３－９ F：「キーワード検索リスト」ツールパネルのキーワードタブでは　下の赤点線で囲んだ「検索文字」に文字列を入れて左上の丸い赤点線の中の更新ボタンを押すと、その検索文字が見つかった部分が表示される。(但しこの「行」に表示される数字は物理的な行数らしく、表示の折り返しを使用している場合はコード左端の行数とは一致しない)　「検索」メニューの「検索」とほぼ同じ機能だが、こちらはリストから選択部分に飛べる。見つかったリストのどれかを選択しておいて更新ボタンの下の懐中電灯？のアイコンをクリックするとソース画面の該当箇所の検索語が反転表示される。図.３－１０ G：「オブジェクトインスペクター」「表示」メニューの中段の「オブジェクトインスペクター」にチェックを付けるか、パネル表示ボタン(図の右側の赤点線)を押すとプレビューウインドウの右側にオブジェクトインスペクターパネルが表示される。この状態で画面の赤点線で囲った「要素調査」という部分がボタンになっているのでこれを押しておいてマウスカーソルをプレビュー画面のオブジェクトの上に合わせると、そのオブジェクトの各種設定値がパネルに表示される。但し、ここで表示される位置などの数値は結果だけで、親要素などのファクターがどのように影響しているかまでは分からない。タグ階層 (エレメントオーダービュー)のチェック図.３－１１現在カーソルのあるタグが <body> タグから見てどんな階層の関係にあるのか知りたいときは、「表示」メニューの「エレメントオーダービュー」にチェックを付けると　ソース画面の上部にエレメントオーダービューのバーが表示される。その状態でバーの左端の更新ボタンを押すと、カーソル(StyleNoteではキャレットと呼ぶ)位置のタグ階層が表示される。表示されたタグ階層の上位のタグ上にカーソルを持って行って手のアイコンになった状態でクリックするとその上位タグ部分が反転表示される。その要素の表示が意図しない状態の時、上位のタグの要素が影響していることが多いが、ソースコード上ではその上位タグが離れていると見つけづらいが、この機能はそんな時のチェックに役立つ。

蛇足
直接 StyleNoteとは関係ないが、私が HTML編集時に比較的便利に使用している便利ワザをご紹介それは IME辞書の活用。IME辞書の単語登録機能で　例えば「<br>」という文字列を単語として「ｂｒ」という読みで登録しておくと、改行を入れたいところで漢字変換モードのままキーボードから「ｂｒ」と２文字入力してスペースを押すだけで改行タグが挿入される。「<br class="clrb">」のような属性値まで含めた文字列も「ｂｒｃ」とか「<img src="" alt="" class="image" width="px" id="fltr">」なども「いｍｇ」（キーボードは「ｉｍｇ」）として登録してある。これを上手に使うと文字入力中はキーボードから手を離さずに打てるし、日本語を入力している最中に漢字変換を解除する必要もなくてボタンよりもはるかに早い。文責：　このページの内容の責任は Y.Nakajima にあります。 StyleNote 5.08 を使用して確認しながら作成しておりますが、全てが正しいことを保証するものではありません。記述についての問題点のご指摘は Y.Nakajima 宛てにお願いいたします。

Access Counter:

非公式 Style Note5 マニュアル

非公式　　Style Note5 マニュアル