ソフトの便利機能(エディター部分)
***エディター部分 ◎環境から ・右クリックメニューの表示文字サイズ変更 ・「body」タグの自動挿入 ◎コンテキストから ・良く使うCSS文やHTML文を自分好みに登録 ◎右クリックから ・CSS内の色コードを簡単に変更 ・CSS内の色コードの実際の色の確認 ・作成したCSSセレクタをHTMLに簡単に記載 ・CSS文やHTML文を簡単に記載 ・一時保存、読み出し機能 ・コメント挿入機能 ◎その他 ・ワーニング機能 ・エディタージャンプ機能

1.右クリックメニューの表示文字のサイズ変更
エディター操作で右クリックメニューはとても良く使いますが、画面の大きさによっては文字が見づらい場合もありますので、文字の大きさを自由に変更することができるようにしています。

2.ワーニング機能
・HTMLに記述されているCSSファイル名との整合性
CSSファイルを編集してもHTMLファイルに反映されない。良く見たら、使っているHTMLファイルで指定しているCSSファイル名が別ファイル名となっていた、なんてことはないでしょうか。私は結構そうしたポカをやったので、本ソフトではCSSファイルとHTMLファイルの両方を読み込んだ場合、HTMLファイルに読み込んだCSSファイル名がないとワーニングを出す仕様としています。(ワーニング後も編集可能です。)
・「{ }」の記述
CSSファイルは「{ }」に挟んで記述しますが、このどちらかを書き忘れたり、誤って削除したりすることがあります。このため、本ソフトではペアにならない「{ }」の記述があった場合はワーニングを出す仕様としています。(ワーニング後は編集不可です。)

3.「body」タグの自動挿入
webページのレイアウトは横幅に関しては、コンテンツがブラウザの幅に追随するもの(ブラウザの幅を変えるとコンテンツの横幅も変わる)と横幅は一定で常にブラウザの中央に位置するものの2種類があります。個人的には後者のwebページの方が好きなので、本ソフトでは自動でブラウザの中心に配置されるようにbodyタグを挿入するようにしています。新規レイアウト作成やレイアウト変更する場合にレイアウトの横幅を自動計算してその計算結果をwidthで指定するようにしています。このため、横幅を変更してもbodyタグ内のwidthを手作業で修正する必要はありません。 bodyタグにはwidth以外にも多くの記述がなされることがありますが、レイアウト変更を行うと(レイアウト変更ボタンをクリックすると)既存の記述は全て削除されてしまいますので注意してください。この機能を使うには設定で「bodyタグの自動挿入」のチェックを入れます。

4.CSS内の色コードを簡単に変更
CSS内で色を定義している場合、色を変更するには色コードを変更しますが、表示させたい色コードを検索するのは結構面倒です。このソフトでは、右クリックメニューで「色の変更」を選択し出現する色ダイアログから色を選択することで簡単にCSS内の色コードを変更します。

5.CSS内の色コードの実際の色の確認
CSS内に色表記がある場合、そのソースコードの色はコードを読んだだけでは分かりません。このソフトでは色コードがある行をマウスでクリックし「色の確認」を選択することで当該コードの色をカーソルの上に表示します。色コードは「#数字」を対象とし、文字列のコードは対象とはしていません。

6.作成したCSSセレクタをHTMLファイルに簡単に記載
CSSは記述しただけでは動作しません。あくまでもHTML文で作成したCSSを指定し適用させなくてはなりません。今まではCSSの当該セレクタ名をコピーしてそれにdiv要素などを付けて貼り付けていたのですが、結構な手間です。本ソフトでは作成したセレクターはHTMLファイルの編集画面で右クリックして「セレクタの挿入」に進むと、作成したセレクタ名の一覧が出て、div付のセレクタを選択して貼り付けることができます。 挿入したい文字列を選択してから操作するとその文字列の前後に挿入されます。

7.CSS文やHTML文を簡単に記載
CSSには色々なプロパティや値がありますが、スペルを含めて正確に覚えている人はまずいないと思います。殆どの方は既存のコードから必要部分をコピーして使っていると思いますが、これも結構な手間です。本ソフトでは前もって登録したコードを右クリックで何度でも使いまわすことが可能であり、その内容は自分い合わせて簡単にカスタマイズすることができます。HTMLタグについても同じです。

CSSファイルについては複数行のコードの登録もサポートしています。1行であればコンテキストメニューのテキストに登録内容を表示させるだけで何が貼り付けられるかが分かりますが、複数行の場合は1行目だけを表示させても何のコードかは分からないことから、表題は例えば枠のCSSであれば「黒太枠」などと文字で表すようにして内容が分かるようにしています。

8.良く使うCSS文やHTML文を自分好みに編集
登録は「コンテキスト」タブから行います。3つの入力画面があります。左から■1行CSSコンテキスト、■複数行CSSコンテキスト、■HTMLコンテキストとなっています。両端はCSSファイル、HTMLファイルへ一行挿入用です。挿入したい文字列をそのまま記入します。真ん中はCSSファイルへの複数行登録用です。登録は内容、表題(区切り文字)順に記載して行きます。表題の前に全角アスタリスク「*」を付けることで自動で表題が区切文字になります。

9.一時保存、読み出し機能
編集中のファイルの少し前の状態を参照したいときがあります。右クリックから一時保存を選ぶか、上の「T」ボタンをクリックすることで現在の状態を保存しておくことができます。なお、当該ボタンは保存しなくとも「更新」ボタンの10クリック毎に自動保存されます。

10.コメントアウト挿入機能
上の「C」ボタンか右クリックの「コメント挿入」によりカーソルのある行をコメントアウトすることができます。コメントアウトさせる文字列を指定する必要はありません。カーソルが当該行のどこの位置にあってもコメントアウトすることができます。HTML文の場合は選択範囲をコメントアウトすることができます。

11.エディタージャンプ機能
左下の「SET」ボタンでカーソル位置に「/*JUMP*/」マークを挿入し、これらの箇所に順にジャンプすることができます。ジャンプは下の「<前へ」「後へ」ボタンにより行い、「□削除」ボタンにより全てのジャンプポイントを削除します。 また、CSSの編集に関しては上のコンボボックスでセレクター名を選択することで、当該セレクタ名の箇所にジャンプします。

▶ソフトの基本操作
CSSグリッドについて
noby'sソフト