「プロパティリストペイン」の編集履歴(バックアップ)一覧はこちら
「プロパティリストペイン」(2009/02/11 (水) 15:23:11) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>プロパティリストペイン</h1>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/PropertyPane.png" alt="プロパティリストペイン" /><br /><br /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5>
<div class="disc">StyleEdidorにおける機能のキモともいえるのが、このプロパティリストペインです。<br /><br />
Trident(IEのレンダリングエンジン)で利用可能なCSSの書式をほとんど利用できますし、簡単な操作で選択したタグや各セレクタのプロパティへ値をセットできますので、スタイルファイル作成を大きく支援してくれます。<br /><br />
しかし、ここの使い方を一つ一つ解説していくのは困難なので、他に同様な記述となりそうな部分は省き、主要な部分のみに絞ります。<br />
また、各セレクタに対するプロパティやその値の意味などは別途ネット上で有志が公開されている各種CSSリファレンスを参考にしてください。<br /><br />
一応、ここで用いる用語の意味を記しておきます。</div>
<table style="margin:0;width:470px;"><tbody><tr><td>セレクタ</td>
<td>プロパティ</td>
<td>値</td>
</tr><tr><td>適用先を指定する部分を指す<br />
(タグ、あるいはそれに関連するidやclass)</td>
<td>適用させたいスタイルの種類を指定</td>
<td>そのスタイルを具体的にどうしたいのかを指定</td>
</tr></tbody></table><div class="disc">では、簡単ではありますがプロパティペインの使い方を見ていきましょう...</div>
<br /><div class="subcontent">
<h6>選択中の要素</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_1.png" alt="選択中の要素_Normal_1" /><br /><div class="disc">ここには、現在ビュー上あるいは【現在の文書の構造】ペインで選択中の要素が表示されています。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_2.png" alt="選択中の要素_Normal_2" /><br /><br />
この例ではdiv要素にmainbodyというidが指定されているものすべてにここで加えた変更が適用されます。<br />
つまり、これ以降の子要素にはここで指定したプロパティの値が継承されると言うことを意味します。<br />
また、これと同じdiv要素対してmainbodyというidが指定されているものが同階層に存在した場合、それらにも適用されてしまう場合があります。
<hr />
このボックス内へ直接『:hover』などの<a href="http://anslasax.net/css-make/pseudo.html" target="_blank">擬似クラス</a>を入力することにより、それらへのスタイルを設定することも可能になっています。</div>
</div>
<br /><br /><div class="subcontent">
<h6>ピンポイントで要素を選択</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_3.png" alt="個別選択" /><br /><div class="disc">
上記のようにして選択した場合、目的としないものにまで変更が適用されてしまう場合がありますが、StyleEditorでは目的の要素をShiftキーを押下しながらクリックすることで狙った要素のみを選択できる機能があります。<br /><br />
これはビュー上でも、【現在の文書の構造】ペインのツリー上であっても有効です。目的に合わせて適宜使い分けましょう。
<hr />
また、ビュー上で選択しようとした際に時々クリックがナビゲートされてしまい別のページへ飛ばされてしまうこともありますが、このような場合は目的の要素にマウスホバーさせて赤いアウトラインが目的の範囲であることを確認し、その後にCtrlキーとAltキーを押すことで選択範囲を確定できます。</div>
</div>
<br /><br /><div class="subcontent">
<h6>プロパティの指定</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_dropdownmenu.png" alt="プロパティ_ドロップダウン" /><br /><div class="disc">目的の要素に対して、どのプロパティを変更したいのか選ぶときは3種類のアプローチが用意されています。<br /><br />
ひとつはプロパティボックスに直接目的のプロパティ名を入力する方法。<br />
この方法の場合、最初の数文字を入力した時点で候補に近いものが補完されます。<br /><br />
ふたつめは画像のようにドロップダウンリストを出してそこから目的のプロパティを選択する方法です。<br /><br />
そして、みっつめの方法が以下で解説する方法になります。</div>
</div>
<br /><br /><h6>表示されているプロパティから値を編集</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_SettingsView_1.png" alt="Property_SettingsView" /><br /><div class="disc">みっつめの方法、というよりは一番先に目がいく部分ですが、実際のプロパティの値の設定はここでおこないます。<br /><br />
ドロップダウンからプロパティを選択するのと同様に、この部分においてもスクロールすることによって目的のプロパティを選択できます。<br /><br />
これ以降、主要なダイアログだけを取り上げていきますので、他のプロパティにおいて同様の操作がおこなえる部分とCSSの基本的な値については割愛します。<br /><br /></div>
<br /><br /><div class="subcontent">
<h6>色に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Color_DropMenu_1.png" alt="カラー選択メニュー" /><br /><div class="disc">
各プロパティの色に関するドロップダウンメニューはほぼ共通なので、ここではbackground-colorプロパティを一例として取り上げます。<br /><br />
選択中のプロパティの値の横にあるボタンを押すか、プロパティをダブルクリックすることでドロップダウンメニューが現れます<br />
ここで、『色の選択...』をクリックするとWindows標準のカラー指定ダイアログが開きますので、色味を確認しながら任意の色を指定することが可能になります。(画像は割愛)<br /><br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Color_Select_2.png" alt="Hex_Input" /> 『16進数入力...』をクリックすると、直接値をセットするためのちいさなダイアログが開きます。<br />
また、値を入力中には色のプレビューが出来るようになっています。
<p class="cl"></p>
あるいは、すでに用意されているWebセーフカラーリストをスクロールして目的の色をセットすることも可能です。</div>
</div>
<br /><br /><div class="subcontent">
<h6>画像に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Img_DropMenu_1.png" alt="画像選択メニュー" /><br /><div class="disc">ここでは画像の指定方法について解説します。<br /><br />
画像の指定には2種類の方法が用意されています。<br /><br />
ひとつは画像のURIを直接指定する方法で、『URL入力...』をクリックすると以下のようなダイアログが現れますので、ここに画像のアドレスを記入します<br />
(表記の揺れはα版と言うことで...)<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Img_Select_1.png" alt="Img_URI_Input" /><br />
ふたつめはローカルPCにある画像を指定する方法で、『画像データ読み込み...』をクリックするとWindows標準に近いファイル選択ダイアログが開きます。<br /><br />
ここで指定した画像はuser.styleファイルの中へ格納されますので、ローカルの画像であっても配布の時に問題になることはありません。<br />
しかし、画像ファイルの著作権には十分に配慮する必要がありますのでご注意ください。<br /><br />
また、カーソルファイルもローカルファイルを指定した場合には同様に扱われます。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Cursor_DropMenu_1.png" alt="カーソルメニュー" /></div>
</div>
<br /><br /><div class="subcontent">
<h6>数値に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_DropMenu_1.png" alt="数値メニュー" /><br /><div class="disc">ここでは数値の指定について解説します。<br /><br />
数値入力が可能なプロパティには2種類の方法が用意されています。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_Select_1.png" alt="数値入力" /><br />
ひとつめは数値の直接指定で、『数値入力...』をクリックするとそのとき設定可能な単位を指定して数値を設定できるようになっています。
<p class="cl"></p>
<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_Select_2.png" alt="パーセント入力" /><br />
ふたつめは親要素に対するパーセント指定で、『パーセント入力...』をクリックすると親要素に対するパーセンテージを指定してやることができるようになっています。
<p class="cl"></p>
</div>
</div>
<br /><br /><div class="subcontent">
<h6>文字列に関する部分</h6>
<div class="disc">ここでは文字列入力が必要となるプロパティについて解説します。<br /><br />
たとえば、FilterなどのIE系でしか使えない特殊な項目は文字列を直接入力してやる必要があります<br /><br />
右側のボタンを押下すると文字列の入力ダイアログが現れますので、このような感じで文字列を入力します。<br /><pre>
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200)
</pre>
必要ならば<a href="http://www.tagindex.com/stylesheet/filter/" target="_blank">スタイルシート[CSS]/フィルタ - TAG index</a>などを参考に試して見ましょう。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Filter_Dialog_1.png" alt="文字列入力" /><br /></div>
</div>
<br /><br /><div class="subcontent">
<h6>フォントに関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Font_Dialog_1.png" alt="フォントダイアログ" /><br /><div class="disc">ここではフォントの指定について解説します。<br /><br />
フォントの指定をするには右側のボタンを押してフォントファミリーダイアログを表示させます。<br />
ダイアログの操作法は特に説明の必要もないほど直感的に操作できますので割愛します。<br /><br />
フォントの選択に現れるフォント名はIEオプションで表示されるものと同等のようなので、<strike>現状では手持ちのいろいろなフォントを試すなどの細かい指定は出来ません。<br />
どうしてもという場合には、【設定内容】ペインから直接CSSを記述してやるという手があります。</strike><br /><br /><span style="color:#008000;">作者注:フォント選択ドロップダウンに直接任意値を入力して、設定することが可能です。</span></div>
</div>
<br /></div>
<br /><div class="cntr"><a href="http://www15.atwiki.jp/styleshare/pages/75.html">現在の文書の構造ペイン:Preview</a> ←| <a href="http://www15.atwiki.jp/styleshare/">Home</a> |→ <a href="http://www15.atwiki.jp/styleshare/pages/80.html">Next:スタイル管理</a></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>プロパティリストペイン</h1>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/PropertyPane.png" alt="プロパティリストペイン" /><br /><ul><li><a href="#p1">はじめに</a></li>
<li><a href="#p2">選択中の要素</a></li>
<li><a href="#p3">ピンポイントで要素を選択</a></li>
<li><a href="#p4">プロパティの指定</a></li>
<li><a href="#p5">表示されているプロパティから値を編集</a></li>
<li><a href="#p6">色に関する部分</a></li>
<li><a href="#p7">画像に関する部分</a></li>
<li><a href="#p8">数値に関する部分</a></li>
<li><a href="#p9">文字列に関する部分</a></li>
<li><a href="#p10">フォントに関する部分</a></li>
</ul><br /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5>
<div class="disc" id="p1">StyleEdidorにおける機能のキモともいえるのが、このプロパティリストペインです。<br /><br />
Trident(IEのレンダリングエンジン)で利用可能なCSSの書式をほとんど利用できますし、簡単な操作で選択したタグや各セレクタのプロパティへ値をセットできますので、スタイルファイル作成を大きく支援してくれます。<br /><br />
しかし、ここの使い方を一つ一つ解説していくのは困難なので、他に同様な記述となりそうな部分は省き、主要な部分のみに絞ります。<br />
また、各セレクタに対するプロパティやその値の意味などは別途ネット上で有志が公開されている各種CSSリファレンスを参考にしてください。<br /><br />
一応、ここで用いる用語の意味を記しておきます。</div>
<table style="margin:0;width:470px;"><tbody><tr><td>セレクタ</td>
<td>プロパティ</td>
<td>値</td>
</tr><tr><td>適用先を指定する部分を指す<br />
(タグ、あるいはそれに関連するidやclass)</td>
<td>適用させたいスタイルの種類を指定</td>
<td>そのスタイルを具体的にどうしたいのかを指定</td>
</tr></tbody></table><div class="disc">では、簡単ではありますがプロパティペインの使い方を見ていきましょう...</div>
<br /><div class="subcontent" id="p2">
<h6>選択中の要素</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_1.png" alt="選択中の要素_Normal_1" /><br /><div class="disc">ここには、現在ビュー上あるいは【現在の文書の構造】ペインで選択中の要素が表示されています。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_2.png" alt="選択中の要素_Normal_2" /><br /><br />
この例ではdiv要素にmainbodyというidが指定されているものすべてにここで加えた変更が適用されます。<br />
つまり、これ以降の子要素にはここで指定したプロパティの値が継承されると言うことを意味します。<br />
また、これと同じdiv要素対してmainbodyというidが指定されているものが同階層に存在した場合、それらにも適用されてしまう場合があります。
<hr />
このボックス内へ直接『:hover』などの<a href="http://anslasax.net/css-make/pseudo.html" target="_blank">擬似クラス</a>を入力することにより、それらへのスタイルを設定することも可能になっています。</div>
</div>
<br /><br /><div class="subcontent" id="p3">
<h6>ピンポイントで要素を選択</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Selected_Tag_3.png" alt="個別選択" /><br /><div class="disc">
上記のようにして選択した場合、目的としないものにまで変更が適用されてしまう場合がありますが、StyleEditorでは目的の要素をShiftキーを押下しながらクリックすることで狙った要素のみを選択できる機能があります。<br /><br />
これはビュー上でも、【現在の文書の構造】ペインのツリー上であっても有効です。目的に合わせて適宜使い分けましょう。
<hr />
また、ビュー上で選択しようとした際に時々クリックがナビゲートされてしまい別のページへ飛ばされてしまうこともありますが、このような場合は目的の要素にマウスホバーさせて赤いアウトラインが目的の範囲であることを確認し、その後にCtrlキーとAltキーを押すことで選択範囲を確定できます。</div>
</div>
<br /><br /><div class="subcontent" id="p4">
<h6>プロパティの指定</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_dropdownmenu.png" alt="プロパティ_ドロップダウン" /><br /><div class="disc">目的の要素に対して、どのプロパティを変更したいのか選ぶときは3種類のアプローチが用意されています。<br /><br />
ひとつはプロパティボックスに直接目的のプロパティ名を入力する方法。<br />
この方法の場合、最初の数文字を入力した時点で候補に近いものが補完されます。<br /><br />
ふたつめは画像のようにドロップダウンリストを出してそこから目的のプロパティを選択する方法です。<br /><br />
そして、みっつめの方法が以下で解説する方法になります。</div>
</div>
<br /><br /><h6 id="p5">表示されているプロパティから値を編集</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_SettingsView_1.png" alt="Property_SettingsView" /><br /><div class="disc">みっつめの方法、というよりは一番先に目がいく部分ですが、実際のプロパティの値の設定はここでおこないます。<br /><br />
ドロップダウンからプロパティを選択するのと同様に、この部分においてもスクロールすることによって目的のプロパティを選択できます。<br /><br />
これ以降、主要なダイアログだけを取り上げていきますので、他のプロパティにおいて同様の操作がおこなえる部分とCSSの基本的な値については割愛します。<br /><br /></div>
<br /><br /><div class="subcontent" id="p6">
<h6>色に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Color_DropMenu_1.png" alt="カラー選択メニュー" /><br /><div class="disc">
各プロパティの色に関するドロップダウンメニューはほぼ共通なので、ここではbackground-colorプロパティを一例として取り上げます。<br /><br />
選択中のプロパティの値の横にあるボタンを押すか、プロパティをダブルクリックすることでドロップダウンメニューが現れます<br />
ここで、『色の選択...』をクリックするとWindows標準のカラー指定ダイアログが開きますので、色味を確認しながら任意の色を指定することが可能になります。(画像は割愛)<br /><br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Color_Select_2.png" alt="Hex_Input" /> 『16進数入力...』をクリックすると、直接値をセットするためのちいさなダイアログが開きます。<br />
また、値を入力中には色のプレビューが出来るようになっています。
<p class="cl"></p>
あるいは、すでに用意されているWebセーフカラーリストをスクロールして目的の色をセットすることも可能です。</div>
</div>
<br /><br /><div class="subcontent" id="p7">
<h6>画像に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Img_DropMenu_1.png" alt="画像選択メニュー" /><br /><div class="disc">ここでは画像の指定方法について解説します。<br /><br />
画像の指定には2種類の方法が用意されています。<br /><br />
ひとつは画像のURIを直接指定する方法で、『URL入力...』をクリックすると以下のようなダイアログが現れますので、ここに画像のアドレスを記入します<br />
(表記の揺れはα版と言うことで...)<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Img_Select_1.png" alt="Img_URI_Input" /><br />
ふたつめはローカルPCにある画像を指定する方法で、『画像データ読み込み...』をクリックするとWindows標準に近いファイル選択ダイアログが開きます。<br /><br />
ここで指定した画像はuser.styleファイルの中へ格納されますので、ローカルの画像であっても配布の時に問題になることはありません。<br />
しかし、画像ファイルの著作権には十分に配慮する必要がありますのでご注意ください。<br /><br />
また、カーソルファイルもローカルファイルを指定した場合には同様に扱われます。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Cursor_DropMenu_1.png" alt="カーソルメニュー" /></div>
</div>
<br /><br /><div class="subcontent" id="p8">
<h6>数値に関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_DropMenu_1.png" alt="数値メニュー" /><br /><div class="disc">ここでは数値の指定について解説します。<br /><br />
数値入力が可能なプロパティには2種類の方法が用意されています。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_Select_1.png" alt="数値入力" /><br />
ひとつめは数値の直接指定で、『数値入力...』をクリックするとそのとき設定可能な単位を指定して数値を設定できるようになっています。
<p class="cl"></p>
<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Position_Select_2.png" alt="パーセント入力" /><br />
ふたつめは親要素に対するパーセント指定で、『パーセント入力...』をクリックすると親要素に対するパーセンテージを指定してやることができるようになっています。
<p class="cl"></p>
</div>
</div>
<br /><br /><div class="subcontent" id="p9">
<h6>文字列に関する部分</h6>
<div class="disc">ここでは文字列入力が必要となるプロパティについて解説します。<br /><br />
たとえば、FilterなどのIE系でしか使えない特殊な項目は文字列を直接入力してやる必要があります<br /><br />
右側のボタンを押下すると文字列の入力ダイアログが現れますので、このような感じで文字列を入力します。<br /><pre>
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200)
</pre>
必要ならば<a href="http://www.tagindex.com/stylesheet/filter/" target="_blank">スタイルシート[CSS]/フィルタ - TAG index</a>などを参考に試して見ましょう。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Filter_Dialog_1.png" alt="文字列入力" /><br /></div>
</div>
<br /><br /><div class="subcontent" id="p10">
<h6>フォントに関する部分</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/Property/Property_Font_Dialog_1.png" alt="フォントダイアログ" /><br /><div class="disc">ここではフォントの指定について解説します。<br /><br />
フォントの指定をするには右側のボタンを押してフォントファミリーダイアログを表示させます。<br />
ダイアログの操作法は特に説明の必要もないほど直感的に操作できますので割愛します。<br /><br />
フォントの選択に現れるフォント名はIEオプションで表示されるものと同等のようなので、<strike>現状では手持ちのいろいろなフォントを試すなどの細かい指定は出来ません。<br />
どうしてもという場合には、【設定内容】ペインから直接CSSを記述してやるという手があります。</strike><br /><br /><span style="color:#008000;">作者注:フォント選択ドロップダウンに直接任意値を入力して、設定することが可能です。</span></div>
</div>
<br /></div>
<br /><div class="cntr"><a href="http://www15.atwiki.jp/styleshare/pages/75.html">現在の文書の構造ペイン:Preview</a> ←| <a href="http://www15.atwiki.jp/styleshare/">Home</a> |→ <a href="http://www15.atwiki.jp/styleshare/pages/80.html">Next:スタイル管理</a></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
表示オプション
横に並べて表示:
変化行の前後のみ表示: