プロパティリストペイン
ここでは編集モードであることを前提に解説しています
StyleEdidorにおける機能のキモともいえるのが、このプロパティリストペインです。
Trident（IEのレンダリングエンジン）で利用可能なCSSの書式をほとんど利用できますし、簡単な操作で選択したタグや各セレクタのプロパティへ値をセットできますので、スタイルファイル作成を大きく支援してくれます。
しかし、ここの使い方を一つ一つ解説していくのは困難なので、他に同様な記述となりそうな部分は省き、主要な部分のみに絞ります。
また、各セレクタに対するプロパティやその値の意味などは別途ネット上で有志が公開されている各種CSSリファレンスを参考にしてください。
一応、ここで用いる用語の意味を記しておきます。
Trident（IEのレンダリングエンジン）で利用可能なCSSの書式をほとんど利用できますし、簡単な操作で選択したタグや各セレクタのプロパティへ値をセットできますので、スタイルファイル作成を大きく支援してくれます。
しかし、ここの使い方を一つ一つ解説していくのは困難なので、他に同様な記述となりそうな部分は省き、主要な部分のみに絞ります。
また、各セレクタに対するプロパティやその値の意味などは別途ネット上で有志が公開されている各種CSSリファレンスを参考にしてください。
一応、ここで用いる用語の意味を記しておきます。
| セレクタ | プロパティ | 値 |
| 適用先を指定する部分を指す (タグ、あるいはそれに関連するidやclass) |
適用させたいスタイルの種類を指定 | そのスタイルを具体的にどうしたいのかを指定 |
では、簡単ではありますがプロパティペインの使い方を見ていきましょう...
選択中の要素
ここには、現在ビュー上あるいは【現在の文書の構造】ペインで選択中の要素が表示されています。
この例ではdiv要素にmainbodyというidが指定されているものすべてにここで加えた変更が適用されます。
つまり、これ以降の子要素にはここで指定したプロパティの値が継承されると言うことを意味します。
また、これと同じdiv要素対してmainbodyというidが指定されているものが同階層に存在した場合、それらにも適用されてしまう場合があります。
このボックス内へ直接『:hover』などの擬似クラスを入力することにより、それらへのスタイルを設定することも可能になっています。
この例ではdiv要素にmainbodyというidが指定されているものすべてにここで加えた変更が適用されます。
つまり、これ以降の子要素にはここで指定したプロパティの値が継承されると言うことを意味します。
また、これと同じdiv要素対してmainbodyというidが指定されているものが同階層に存在した場合、それらにも適用されてしまう場合があります。
このボックス内へ直接『:hover』などの擬似クラスを入力することにより、それらへのスタイルを設定することも可能になっています。
ピンポイントで要素を選択
上記のようにして選択した場合、目的としないものにまで変更が適用されてしまう場合がありますが、StyleEditorでは目的の要素をShiftキーを押下しながらクリックすることで狙った要素のみを選択できる機能があります。
これはビュー上でも、【現在の文書の構造】ペインのツリー上であっても有効です。目的に合わせて適宜使い分けましょう。
また、ビュー上で選択しようとした際に時々クリックがナビゲートされてしまい別のページへ飛ばされてしまうこともありますが、このような場合は目的の要素にマウスホバーさせて赤いアウトラインが目的の範囲であることを確認し、その後にCtrlキーとAltキーを押すことで選択範囲を確定できます。
これはビュー上でも、【現在の文書の構造】ペインのツリー上であっても有効です。目的に合わせて適宜使い分けましょう。
また、ビュー上で選択しようとした際に時々クリックがナビゲートされてしまい別のページへ飛ばされてしまうこともありますが、このような場合は目的の要素にマウスホバーさせて赤いアウトラインが目的の範囲であることを確認し、その後にCtrlキーとAltキーを押すことで選択範囲を確定できます。
プロパティの指定
目的の要素に対して、どのプロパティを変更したいのか選ぶときは3種類のアプローチが用意されています。
ひとつはプロパティボックスに直接目的のプロパティ名を入力する方法。
この方法の場合、最初の数文字を入力した時点で候補に近いものが補完されます。
ふたつめは画像のようにドロップダウンリストを出してそこから目的のプロパティを選択する方法です。
そして、みっつめの方法が以下で解説する方法になります。
ひとつはプロパティボックスに直接目的のプロパティ名を入力する方法。
この方法の場合、最初の数文字を入力した時点で候補に近いものが補完されます。
ふたつめは画像のようにドロップダウンリストを出してそこから目的のプロパティを選択する方法です。
そして、みっつめの方法が以下で解説する方法になります。
表示されているプロパティから値を編集
みっつめの方法、というよりは一番先に目がいく部分ですが、実際のプロパティの値の設定はここでおこないます。
ドロップダウンからプロパティを選択するのと同様に、この部分においてもスクロールすることによって目的のプロパティを選択できます。
これ以降、主要なダイアログだけを取り上げていきますので、他のプロパティにおいて同様の操作がおこなえる部分とCSSの基本的な値については割愛します。
ドロップダウンからプロパティを選択するのと同様に、この部分においてもスクロールすることによって目的のプロパティを選択できます。
これ以降、主要なダイアログだけを取り上げていきますので、他のプロパティにおいて同様の操作がおこなえる部分とCSSの基本的な値については割愛します。
色に関する部分
各プロパティの色に関するドロップダウンメニューはほぼ共通なので、ここではbackground-colorプロパティを一例として取り上げます。
選択中のプロパティの値の横にあるボタンを押すか、プロパティをダブルクリックすることでドロップダウンメニューが現れます
ここで、『色の選択...』をクリックするとWindows標準のカラー指定ダイアログが開きますので、色味を確認しながら任意の色を指定することが可能になります。（画像は割愛）
『16進数入力...』をクリックすると、直接値をセットするためのちいさなダイアログが開きます。
また、値を入力中には色のプレビューが出来るようになっています。 あるいは、すでに用意されているWebセーフカラーリストをスクロールして目的の色をセットすることも可能です。
選択中のプロパティの値の横にあるボタンを押すか、プロパティをダブルクリックすることでドロップダウンメニューが現れます
ここで、『色の選択...』をクリックするとWindows標準のカラー指定ダイアログが開きますので、色味を確認しながら任意の色を指定することが可能になります。（画像は割愛）
『16進数入力...』をクリックすると、直接値をセットするためのちいさなダイアログが開きます。また、値を入力中には色のプレビューが出来るようになっています。 あるいは、すでに用意されているWebセーフカラーリストをスクロールして目的の色をセットすることも可能です。
画像に関する部分
ここでは画像の指定方法について解説します。
画像の指定には2種類の方法が用意されています。
ひとつは画像のURIを直接指定する方法で、『URL入力...』をクリックすると以下のようなダイアログが現れますので、ここに画像のアドレスを記入します
(表記の揺れはα版と言うことで...)
ふたつめはローカルPCにある画像を指定する方法で、『画像データ読み込み...』をクリックするとWindows標準に近いファイル選択ダイアログが開きます。
ここで指定した画像はuser.styleファイルの中へ格納されますので、ローカルの画像であっても配布の時に問題になることはありません。
しかし、画像ファイルの著作権には十分に配慮する必要がありますのでご注意ください。
また、カーソルファイルもローカルファイルを指定した場合には同様に扱われます。
画像の指定には2種類の方法が用意されています。
ひとつは画像のURIを直接指定する方法で、『URL入力...』をクリックすると以下のようなダイアログが現れますので、ここに画像のアドレスを記入します
(表記の揺れはα版と言うことで...)
ふたつめはローカルPCにある画像を指定する方法で、『画像データ読み込み...』をクリックするとWindows標準に近いファイル選択ダイアログが開きます。
ここで指定した画像はuser.styleファイルの中へ格納されますので、ローカルの画像であっても配布の時に問題になることはありません。
しかし、画像ファイルの著作権には十分に配慮する必要がありますのでご注意ください。
また、カーソルファイルもローカルファイルを指定した場合には同様に扱われます。
数値に関する部分
ここでは数値の指定について解説します。
数値入力が可能なプロパティには2種類の方法が用意されています。
ひとつめは数値の直接指定で、『数値入力...』をクリックするとそのとき設定可能な単位を指定して数値を設定できるようになっています。
ふたつめは親要素に対するパーセント指定で、『パーセント入力...』をクリックすると親要素に対するパーセンテージを指定してやることができるようになっています。
数値入力が可能なプロパティには2種類の方法が用意されています。
ひとつめは数値の直接指定で、『数値入力...』をクリックするとそのとき設定可能な単位を指定して数値を設定できるようになっています。
ふたつめは親要素に対するパーセント指定で、『パーセント入力...』をクリックすると親要素に対するパーセンテージを指定してやることができるようになっています。
文字列に関する部分
ここでは文字列入力が必要となるプロパティについて解説します。
たとえば、FilterなどのIE系でしか使えない特殊な項目は文字列を直接入力してやる必要があります
右側のボタンを押下すると文字列の入力ダイアログが現れますので、このような感じで文字列を入力します。
たとえば、FilterなどのIE系でしか使えない特殊な項目は文字列を直接入力してやる必要があります
右側のボタンを押下すると文字列の入力ダイアログが現れますので、このような感じで文字列を入力します。
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200)必要ならばスタイルシート［CSS］/フィルタ - TAG indexなどを参考に試して見ましょう。
フォントに関する部分
ここではフォントの指定について解説します。
フォントの指定をするには右側のボタンを押してフォントファミリーダイアログを表示させます。
ダイアログの操作法は特に説明の必要もないほど直感的に操作できますので割愛します。
フォントの選択に現れるフォント名はIEオプションで表示されるものと同等のようなので、現状では手持ちのいろいろなフォントを試すなどの細かい指定は出来ません。
どうしてもという場合には、【設定内容】ペインから直接CSSを記述してやるという手があります。
作者注：フォント選択ドロップダウンに直接任意値を入力して、設定することが可能です。
フォントの指定をするには右側のボタンを押してフォントファミリーダイアログを表示させます。
ダイアログの操作法は特に説明の必要もないほど直感的に操作できますので割愛します。
フォントの選択に現れるフォント名はIEオプションで表示されるものと同等のようなので、
どうしてもという場合には、【設定内容】ペインから直接CSSを記述してやるという手があります。
作者注：フォント選択ドロップダウンに直接任意値を入力して、設定することが可能です。
