Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

2012-09-01から1ヶ月間の記事一覧

Silverlight スタイルの継承

スタイルを継承するサンプルです。 ソースコード MainPage.xaml

Silverlight リソース・ディクショナリを外部ファイルに定義する

リソース・ディクショナリを外部ファイルに定義するサンプルです。 手順 ソリューションエクスプローラからプロジェクトを右クリックし、[追加]→[新しい項目]を選択する。 [Silverlight リソースディクショナリ]を選択し、[Dictionary1.xaml]の名前で追加す…

Silverlight リソース・ディクショナリでオブジェクトを共有する

リソース・ディクショナリでブラシを共有するサンプルです。 ソースコード MainPage.xaml

Silverlight DockPanelで要素を四隅にレイアウトする

DockPanelで要素を四隅にレイアウトするサンプルです。 ソースコード MainPage.xaml

Silverlight WrapPanelで要素を折り返しレイアウトする

WrapPanelで要素を折り返しレイアウトするサンプルです。 ソースコード MainPage.xaml

Silverlight Gridの列の幅と行の高さを割合で指定する

Gridの列の幅と行の高さを割合で指定するサンプルです。 ソースコード MainPage.xaml

Silverlight Grid内要素のサイズによって列の幅と行の高さを自動調整する

Grid内要素のサイズによって列の幅と行の高さを自動調整するサンプルです。 ソースコード MainPage.xaml

Silverlight Gridの列と行のサイズを固定にする

Gridの列と行のサイズを固定にするサンプルです。 ソースコード MainPage.xaml

Silverlight ScrollViewerでスクロールバーを表示する

スクロールバーを表示するサンプルです。 ソースコード MainPage.xaml

Silverlight Canvasにシェイプを配置する

Canvasにシェイプを配置するサンプルです。 ソースコード MainPage.xaml

Silverlight 直線を描画する

直線を描画するサンプルです。 ソースコード MainPage.xaml

Silverlight ListBoxのItemsSourceプロパティに配列を設定する

ListBoxのItemsSourceプロパティに配列を設定するサンプルです。 ソースコード MainPage.xaml

Silverlight ButtonのUIを変更する

ButtonのUIを変更するサンプルです。 ソースコード MainPage.xaml

Silverlightエントリーのまとめ

Silverlight関連のエントリーのまとめです。エントリーするたびに随時更新します。 コントロール Silverlight LabelとTextBox - プログラマーな日々Targetプロパティで、Labelと他のコントロールと関連付けることができます。 ...Silverlight ButtonのUIを変…

Silverlight LabelとTextBox

Targetプロパティで、Labelと他のコントロールと関連付けることができます。 Label.Target プロパティ (System.Windows.Controls)この Label が関連付けられているコントロールを取得または設定します。 ソースコード MainPage.xaml

CSS 疑似クラスセレクタ(:first-child)

CSS

他の要素の最初の子である要素にスタイルを適用します。 使用例 <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>2番目の子の段落です。</p> </body> </html> レンダリング(Chrome) 関連エン…

CSS 疑似クラスセレクタ(:active)

CSS

入力によってアクティブになった要素にスタイルを適用します。 使用例 <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>

CSS 疑似クラスセレクタ(:hover)

CSS

現在、マウスオーバーされている要素にスタイルを適用します。 使用例 <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>

CSS 疑似クラスセレクタ(:focus)

CSS

現在、入力フォーカスを持っている要素にスタイルを適用します。 使用例 <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>

CSS リンク疑似クラスセレクタ(:visited)

CSS

リンク先に既にアクセスしたアンカーに、スタイルを適用します。 使用例 <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…

CSS リンク疑似クラスセレクタ(:link)

CSS

リンク先にまだアクセスしていないアンカーに、スタイルを適用します。 使用例 <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…

CSS 隣接セレクタ(その2)

CSS

隣接セレクタを他のセレクタと組み合わせることができます。 使用例 <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>大見出しの1つ目の<strong>強調語句</strong>と、2つ目の<strong>強調語句</strong>です。</h1> <p>段…</p></body></html>

CSS 隣接セレクタ

CSS

ある要素の直後の要素にスタイルを適用したい時は、隣接セレクタを使用します。 使用例 <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>段落1です。</p> <p>段落2です。</p> </body> </html> レンダリング(Chrome) 関連エントリー CSSエントリー…

CSS 子セレクタ

CSS

子孫ではなく、ある要素の子(直下の要素)のみにスタイルを適用したい時は、子セレクタを使用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* p要素の子のstrong要素 */ p > strong { color: red; } </style> </head> <body> <p>段落1の<strong>強調語句</strong>です。</p> <p><em>段落2の<strong>強調語句</strong>です。</em></p></body></html>

CSS 子孫セレクタ(その2)

CSS

子孫セレクタを他のセレクタと組み合わせることができます。 使用例 <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>段落1の<strong>強調語句</strong>です。</p> <p class="notification">通知文の<…</p></body></html>

CSS 子孫セレクタ

CSS

ある要素の子孫の要素にスタイルを適用します。 使用例 <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> レンダリング(…

CSS 特殊な属性セレクタ

CSS

[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>

CSS 部分的な属性値セレクタ

CSS

部分的な属性値セレクタを使うと、スペース区切りで値を複数指定できる属性で、そのいずれかの値指定の有無に基づいて要素にスタイルを適用させることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class~="notification"] { /* class:notificationが指定された要素</style></meta></head></html>…

CSS 属性値セレクタの複数指定

CSS

属性値セレクタを複数指定すると、指定された属性と値の組み合わせを全てもつ要素にスタイルが適用されます。 使用例 <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>

CSS 属性値セレクタ

CSS

属性値セレクタを指定すると、指定された値に一致する属性をもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class="notification"] { /* クラスnotificationが指定された要素 */ color: red; } </style> </head> <body> <p class="notification">第1段落です。</p> <p class="infomation">第2…</p></body></html>