2012-09-01から1ヶ月間の記事一覧
スタイルを継承するサンプルです。 ソースコード MainPage.xaml
リソース・ディクショナリを外部ファイルに定義するサンプルです。 手順 ソリューションエクスプローラからプロジェクトを右クリックし、[追加]→[新しい項目]を選択する。 [Silverlight リソースディクショナリ]を選択し、[Dictionary1.xaml]の名前で追加す…
リソース・ディクショナリでブラシを共有するサンプルです。 ソースコード MainPage.xaml
DockPanelで要素を四隅にレイアウトするサンプルです。 ソースコード MainPage.xaml
WrapPanelで要素を折り返しレイアウトするサンプルです。 ソースコード MainPage.xaml
Gridの列の幅と行の高さを割合で指定するサンプルです。 ソースコード MainPage.xaml
Grid内要素のサイズによって列の幅と行の高さを自動調整するサンプルです。 ソースコード MainPage.xaml
Gridの列と行のサイズを固定にするサンプルです。 ソースコード MainPage.xaml
スクロールバーを表示するサンプルです。 ソースコード MainPage.xaml
Canvasにシェイプを配置するサンプルです。 ソースコード MainPage.xaml
直線を描画するサンプルです。 ソースコード MainPage.xaml
ListBoxのItemsSourceプロパティに配列を設定するサンプルです。 ソースコード MainPage.xaml
ButtonのUIを変更するサンプルです。 ソースコード MainPage.xaml
Silverlight関連のエントリーのまとめです。エントリーするたびに随時更新します。 コントロール Silverlight LabelとTextBox - プログラマーな日々Targetプロパティで、Labelと他のコントロールと関連付けることができます。 ...Silverlight ButtonのUIを変…
Targetプロパティで、Labelと他のコントロールと関連付けることができます。 Label.Target プロパティ (System.Windows.Controls)この Label が関連付けられているコントロールを取得または設定します。 ソースコード MainPage.xaml
他の要素の最初の子である要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> p:first-child { /* 他の要素の最初の子であるp要素 */ background: pink; } </style> </head> <body> <p>body要素の最初の子の段落です。</p> <p>２番目の子の段落です。</p> </body> </html> レンダリング（Chrome） 関連エン…
入力によってアクティブになった要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:active { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label></p></form></body></html>
現在、マウスオーバーされている要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:hover { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label><input id="sei" type="text">…</p></form></body></html>
現在、入力フォーカスを持っている要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:focus { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label></p></form></body></html>
リンク先に既にアクセスしたアンカーに、スタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> a:visited { color: red; } </style> </head> <body> <p><a href="./first.html">まだアクセスしていないページ</a></p> <p><a href="./next.html">アクセス済みのページ</a></p> </body> </html> レンダリング（Ch…
リンク先にまだアクセスしていないアンカーに、スタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> a:link { color: red; } </style> </head> <body> <p><a href="./first.html">まだアクセスしていないページ</a></p> <p><a href="./next.html">アクセス済みのページ</a></p> </body> </html> レンダリング（Ch…
隣接セレクタを他のセレクタと組み合わせることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* h1要素の直下のstrong要素の直後のstrong要素 */ h1 > strong + strong { color: red; } </style> </head> <body> <h1>大見出しの１つ目の<strong>強調語句</strong>と、２つ目の<strong>強調語句</strong>です。</h1> <p>段…</p></body></html>
ある要素の直後の要素にスタイルを適用したい時は、隣接セレクタを使用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* h1要素の直後のp要素 */ h1 + p { color: red; } </style> </head> <body> <h1>大見出し</h1> <p>段落１です。</p> <p>段落２です。</p> </body> </html> レンダリング（Chrome） 関連エントリー CSSエントリー…
子孫ではなく、ある要素の子（直下の要素）のみにスタイルを適用したい時は、子セレクタを使用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* p要素の子のstrong要素 */ p > strong { color: red; } </style> </head> <body> <p>段落１の<strong>強調語句</strong>です。</p> <p><em>段落２の<strong>強調語句</strong>です。</em></p></body></html>
子孫セレクタを他のセレクタと組み合わせることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* notificationクラスを指定されたp要素の子孫のstrong要素 */ p.notification strong { color: red; } </style> </head> <body> <p>段落１の<strong>強調語句</strong>です。</p> <p class="notification">通知文の<…</p></body></html>
ある要素の子孫の要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> p strong { /* p要素の子孫のstrong要素 */ color: red; } </style> </head> <body> <h1><strong>大見出し</strong>です。</h1> <p>段落の<strong>強調語句</strong>です。</p> <p>段落です。</p> </body> </html> レンダリング（…
[attribute|="value"]という構文で、attribute属性の値がvalueで始まる要素にスタイルを適用させることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class|="en"] { /* enで始まるclassが指定された要素 */ color: red; } </style> </head> <body> <p class="en">This is an English sentence.</p> …</body></html>
部分的な属性値セレクタを使うと、スペース区切りで値を複数指定できる属性で、そのいずれかの値指定の有無に基づいて要素にスタイルを適用させることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class~="notification"] { /* class:notificationが指定された要素</style></meta></head></html>…
属性値セレクタを複数指定すると、指定された属性と値の組み合わせを全てもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [id="first"][class="notification"] { /* id:first、class:notificationが指定された要素 */ color: red; } </style> </head> <body> </body></html>
属性値セレクタを指定すると、指定された値に一致する属性をもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class="notification"] { /* クラスnotificationが指定された要素 */ color: red; } </style> </head> <body> <p class="notification">第１段落です。</p> <p class="infomation">第２…</p></body></html>
