CSS

www.altova.com このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  ユーザーマニュアル > HTML と CSS >

CSS

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

 

構文色分け

 

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

CSSsyntaxcoloring

(以下のスクリーンショットにあるように)オプションダイアログのテキストフォントタブから、様々な CSS コンポーネントの色を指定することができます。左上にあるコンボボックスから CSS を選択し、各 CSS アイテムに対して必要な色をスタイルペインから選択してください。

options_fonts_css

 

ソースの折りたたみ

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

 

テキストの折りたたみ (またはソースのおりたたみ) は XQuery 中かっこ、XQuery コメント、 XML 要素、XML コメントにより有効化され、これらのノードを展開または折りたたむ機能を意味します。 このようなノードは、 +/- サインによりソース折りたたみ余白内で表示されます(下のスクリーンショット参照)。余白はテキストビュー設定ダイアログにより切り替えのオンとオフを行うことができます。ノードが折りたたまれると、視覚的に省略記号により表示されます (下のスクリーンショット参照)。マウスのカーソルが省略にポイントされると、ポップアップで折りたたまれたノードの内容が表示されます (スクリーンショット参照)。内容がポップアップでの表示に大きすぎる場合、ポップアップのしたの部分に省略記号で表示されます。

テキストツーバー内の 「全ての折りたたみを切り替える」 アイコン icToggleAllFolds は、全てのノードを展開された書式でまたはトップレベルのドキュメント要素まで折りたたみ表示します。

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

 

CSS アウトライン

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

 

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

CSSOutlineCSSOutlineSorted

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

 

ic_cssout_autosync

ドキュメントとの自動同期の有効/無効を切り替えます。自動同期が有効になっている場合、ドキュメント内で入力されたセレクターが(入力中でも)入力ヘルパーに表示されるようになります。

ic_cssout_sync

入力ヘルパーの内容を現在のドキュメントの状態から更新します

ic_cssout_sort

アルファベット順による並び替えの有効/無効を切り替えます。オフになっている場合、セレクターはドキュメント内に記述されている順序で表示されます。アルファベット順で並び替えられた場合、ハッシュ記号により記述される ID が最初のセレクターとして表示されます。

 

プロパティ入力ヘルパー

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

CSSProperties

 

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

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

CSSPropertiesAutoComplete

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

 

CSS 情報ウィンドウ

CSS ファイルがアクティブになっていれば、CSS 情報ウィンドウが有効になります。CSS 情報ウィンドウでは以下の機能が利用可能です:

 

CSS 2.1 と CSS 3.0 との切り替えを行うことができます。GUI における入力ヘルパーとインテリジェントな編集機能が、情報ウィンドウで選択されている CSS のバージョンにより切り替わります。
CSS ファイルを HTML ファイルにリンクすることができます。この機能により CSS ドキュメントの修正により反映される結果をただちに確認することができます。他にも、リンクされた HTML を複数のブラウザーで表示することができ、CSS ドキュメントの修正を異なるブラウザーにて確認することができます。
CSS 情報ウィンドウにはインポートされた CSS スタイルシートが表示され、アクティブな CSS ドキュメントにインポートされたファイル構造の概要を知ることができます。

CSSInfoWin01

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

 

情報ウィンドウのツールバーには CSS 2.1 と CSS 3.0 のアイコンが含まれます。目的のバージョンを選択することで、選択したバージョンの CSS に対応した入力ヘルパーならびに編集機能を使用することができます。
アクティブな CSS ドキュメントからリンクすることのできる HTML ファイルは1つだけです。リンクされた 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 を開く リストに追加された後は、(「インストールされたブラウザーを追加」 コマンドにより追加されたものを除いて)アイテムを選択して、「F2」 キーを押下することにより名前の変更を行うことができます。
プログラムから HTML を開く に表示されているアプリケーションの右にあるアイコンからは、(i) アプリケーションを開く、(ii) アプリケーションを開き、リンクされている HTML ファイルを開く、(iii) リストからアプリケーションを削除するコマンドを選択することができます。アプリケーション名をダブルクリックすることで、リンクされている HTML ファイルをそのアプリケーションで開くことができます。
プログラムから HTML を開く リストに(から)追加/削除されたアプリケーションは、HTML 情報ウィンドウのアプリケーションとも連動しています。
インポート済み アイテムには、アクティブな CSS ファイルにインポートされた CSS ファイルが表示されます。

 


(C) 2018 Altova GmbH