Altova XMLSpy 2021 Professional Edition

テキストビューのインテリジェント編集機能を使用して CSS ドキュメントの編集を行うことができます。CSS の編集に利用することができる編集機能は以下のとおりです。

 

構文色分け

CSS ルールはセレクター、（１つ以上の）プロパティ、そしてそれらプロパティの値により構成されます。これら３つのコンポーネントは、細かな指定を行うため、更に細かなカテゴリに分割されることもあります。例えば、セレクターにより指定されるものにクラス、擬似クラス、ID、要素、または属性があります。更に、CSS ドキュメントは（例えばコメントのような）ルール以外のアイテムも含むことができます。テキストビュー内ではこのようなアイテムのカテゴリはオプションダイアログ内で設定された設定に従い異なる色で表示されます (下のスクリーンショット) (下のスクリーンショット参照)。

オプションダイアログのフォントと色のセクションで多種の CSS コンポーネントの色を設定することができます (下のスクリーンショット).（以下のスクリーンショットにあるように）オプションダイアログのテキストフォントタブから、様々な CSS コンポーネントの色を指定することができます。

 

ソースの折りたたみ

ソースの折りたたみは、 ソースの折りたたみ余白内で +/- サインにより表示される、各 CSS ルールを展開または折りたたむ機能を指します。余白はテキストビュー設定ダイアログにより切り替えのオンとオフを行うことができます。ルールが折りたたまれると、視覚的に省略記号により表示されます。マウスのカーソルが省略記号にポイントされると、折りたたまれたルールの内容がポップアップ内に表示されます。内容がポップアップに大きすぎる場合、 これは、ポップアップの下に省略記号で表示されます。

テキストツールバー内の 全ての折りたたみの切り替え アイコン はすべての ルールを切り替え、トップレベルのドキュメント要素に対するルールを展開または折りたたみます。

メモ:        中かっこのペアは、ルールを区切り、(上のスクリーンショット) 中かっこの前または後ろにカーソルがポイントされると太字で表示されます。これにより特定のルールがどの位置で開始し終了するかの定義が表示されます。

 

CSS アウトライン

（以下のスクリーンショット） CSS アウトライン入力ヘルパーでは、ドキュメント内にあるセレクターが表示されます。CSS アウトラインにあるセレクターをクリックすると、ドキュメント内の対応する箇所がハイライトされます。左下にあるスクリーンショットでは、セレクターの並べ替えは行われず、ドキュメント内で表示される順番通りに表示されています。右下のスクリーンショットでは、（ツールバーアイコンの）アルファベット順の並び替え機能が有効になっており、セレクターがアルファベット順に並べ替えられています。

 

以下の点に注意してください：(i) セレクターの並べ替えを行う際には、（ピリオド、ハッシュ、コロンといった）セレクター全ての箇所が並べ替え評価の対象になり、(ii) 複数のセレクター（例：h4, h5, h6 {...}）が１つのルールとしてグループ化されている場合でも、CSS アウトラインではグループ内の各セレクターは別々に表示されます。

CSS アウトラインイン入力ヘルパーにあるツールバーアイコンを左から順に説明します：

 

 

プロパティ入力ヘルパー

（以下のスクリーンショットにある）プロパティ入力ヘルパーには、全ての CSS プロパティがアルファベット順に表示されます。プロパティのアイテムをダブルクリックすることで、カーソルのある位置にそのプロパティが挿入されます。

 

プロパティの自動補完とプロパティのヒント

プロパティの名前を入力しようとすると、XMLSpy により、入力された文字から始まるプロパティのリストが表示されます(下のスクリーンショット)。その他にも、カーソルをプロパティ名の中まで移動させ、Ctrl+Space を押下することで CSS プロパティのリストが表示されます。

リストをスクロール、または矢印キーによりリストのナビゲーションを行うことで、プロパティの定義と使用可能な値が記されたツールチップが表示されます。表示されるツールチップはハイライトされたプロパティのものです。選択されたプロパティを挿入するには、「Enter」 を押下するか、プロパティをクリックしてください。

 

CSS 情報ウィンドウ

CSS ファイルがアクティブになっていれば、CSS 情報ウィンドウが有効になります(下のスクリーンショット)CSS 情報ウィンドウでは以下の機能が利用可能です：

 

•CSS 2.1 と CSS 3.0 との切り替えを行うことができます。GUI における入力ヘルパーとインテリジェントな編集機能が、情報ウィンドウで選択されている CSS のバージョンにより切り替わります。

•CSS ファイルを HTML ファイルにリンクすることができます。この機能により CSS ドキュメントの修正により反映される結果をただちに確認することができます。他にも、リンクされた HTML を複数のブラウザーで表示することができ、CSS ドキュメントの修正を異なるブラウザーにて確認することができます。

•CSS 情報ウィンドウにはインポートされた CSS スタイルシートが表示され、アクティブな CSS ドキュメントにインポートされたファイル構造の概要を知ることができます。

以下の点に注意してください：

 

•情報ウィンドウのツールバーには CSS 2.1 と CSS 3.0 のアイコンが含まれます。目的のバージョンを選択することで、選択したバージョンの CSS に対応した入力ヘルパーならびに編集機能を使用することができます。

•アクティブな CSS ドキュメントからリンクすることのできる HTML ファイルは１つだけです。リンクされた HTML の左にあるアイコンをクリック、「HTML リンクを設定」 コマンドを選択し、目的の HTML ファイルを選択します。選択されたファイルがリンクされた HTML アイテムの下に表示されます。このリンクを作成しても CSS や HTML ドキュメントへの修正が施されるわけではありません。このリンク機能により、アクティブな CSS ファイルを適用して、ファイルを試験することができます。

•リンクされた HTML ファイルをダブルクリックすることで、その HTML ファイルが XMLSpy により開かれます。

•ツールバーアイコンにより、CSS ファイルと HTML ファイルを水平、または垂直に配置することができます。

•変更された CSS ドキュメントを保存する際、XMLSpy で開かれている HTML ファイルを自動的に更新することができます。この機能を有効にするには、保存時にリンクされた HTML のブラウザービューを更新 ボックスにチェックを入れてください。この機能による自動更新は、編集された CSS ドキュメントへの参照を行っている HTML ファイルに対してしか行われないことに注意してください。

•リンクされた HTML ファイルを変更するには、「HTML リンクを設定」 コマンドから、別の HTML ファイルを選択してください。

•HTML ファイルへのリンクを削除するには、リンクされた HTML ファイル の右にあるアイコンをクリックし、「リンクを削除」 コマンドを選択してください。

•プログラムから HTML を開く の右にあるアイコンを使うことで、リストへアプリケーションを追加することができます。コンピューターにインストールされたブラウザーまたは（テキストエディターの様な）任意のアプリケーションをメニューコマンドに追加することができます。割り当てを行うアプリケーションは、通常ブラウザーかエディターです。

•アプリケーションがプログラムが HTML を開く リストに追加された後は、（「インストールされたブラウザーを追加」 コマンドにより追加されたものを除いて） HTML を開くリスト内の名前は選択範囲を選択し、「F2」 キーを押下することにより名前の変更を行うことができます。

•HTML を開く に表示されているアプリケーションの右にあるアイコンからは、(i) アプリケーションを開く、(ii) アプリケーションを開き、リンクされている HTML ファイルを開く、(iii) リストからアプリケーションを削除するコマンドを選択することができます。アプリケーション名をダブルクリックすることで、リンクされている HTML ファイルをそのアプリケーションで開くことができます。

•HTML を開く リストに（から）追加/削除されたアプリケーションは、HTML 情報ウィンドウのアプリケーションとも連動しています。

•インポート済み アイテムには、アクティブな CSS ファイルにインポートされた CSS ファイルが表示されます。