2012-08-01から1ヶ月間の記事一覧
単純な属性セレクタをまとめて指定すると、指定された属性を全てもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [id][class] { /* id属性とclass属性をもつ要素 */ color: red; } </style> </head> <body> <p id="first" class="notification">第１段落です。</p> <p class="infomation">第２段落です…</p></body></html>
単純な属性セレクタは、指定された属性をもつ要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class] { /* class属性をもつ要素 */ color: red; } </style> </head> <body> <p class="notification">第１段落です。</p> <p class="infomation">第２段落です。</p> <p>第３段落です。</p> </body> </html>
IDセレクタは、指定されたIDの要素にスタイルを適用することを表します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> #second { color: red; } </style> </head> <body> <p id="first">第１段落です。</p> <p id="second">第２段落です。</p> <p id="third">第３段落です。</p> </body> </html> レンダリング（Chrome） 関連エン…
クラスセレクタを１つにつなぐと、class属性に全てのクラス名が指定された要素が指定されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* infomationクラスとnotificationクラスの両方が割り当てられた全ての要素 */ .infomation.notification { color: red; } </style> </head> <body> </body></html>
クラスセレクタは、class属性のクラス名で要素を指定します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> .notification { /* notificationクラスが割り当てられた全ての要素 */ color: red; } span.notification { /* notificationクラスが割り当てられたspan要素 */ font-wei</style></meta></head></html>…
.NETからOfficeを扱うのは非常に面倒です。１つでもCOMオブジェクトの解放漏れがあるとプロセスが解放されずに残ってしまうからです。 複数のCOMオブジェクトを確実に解放する - プログラマーな日々.NETでCOMを扱う際に、複数のCOMオブジェクトを確実に解放…
ユニバーサルセレクタは、アスタリスクで表されます。ドキュメントの全ての要素にスタイルをを適用することを意味します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> * { color: red; } </style> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>子見出し</h3> </body> </html> レンダリング（Chrome） 関連エントリー CSSエントリー…
複数の種類の要素にスタイルを適用するには、要素セレクタをカンマ区切りで指定します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> h1, h2 { color: red; } </style> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>子見出し</h3> </body> </html> レンダリング（Chrome） 関連エントリー CSSエントリーのまとめ - プログラマーな日…
F#のコードをブラウザで実行できるサイト「Try F#」を紹介します。 サイトはAzureで構築されており、Silverlightで動作します。 Try F#We'll provide the tutorials, resources and tools you’ll need to begin working with F# right away. ... スクリーン…
財団法人地方自治情報センターが、「地方公共団体における情報システムセキュリティ要求仕様モデルプラン（Webアプリケーション）」を公開しています。「地方公共団体における情報システムセキュリティ要求仕様モデルプラン（Webアプリケーション）」を一般…
sidebarキーワードは、サイドバーに表示するドキュメントを表します。 使用例 start.html <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p><a href="./html5top.html" rel="sidebar">サイドバーにHTML5トップページを登録</a></p> </body> html5top.html <html lang="ja"> <head> <title>H…</head></html></html>
Technetサポート情報のサイトがいつのまにかリニューアルされていました。 サポート情報マイクロソフトの主要製品に関して、より多くの IT ご担当者の皆様に実際にご利用いただいている情報を集約しました。よくある問い合わせに加え、サポート技術情報、目…
licenseキーワードは、著作権情報を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p>当サイトのライブラリは、<a href="http://opensource.org/licenses/mit-license.php" rel="license">MITライセンス</a>で公開します。</p> </body> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
externalキーワードは、外部サイトへのリンクを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <p>参考サイト:<a href="http://www.jfa.or.jp/" rel="external">日本サッカー協会公式サイト</a></p> </body> 関連エントリー HTML5エントリーのまとめ - プログラマーな日々</html>
spellcheck属性は、入力可能な要素にスペルチェックを有効にするかどうかを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5</title> <meta charset="UTF-8"> </head> <body> <form action="./regeister.html"> <input type="text" name="username" spellcheck="true" /> </form> </body> レンダリング スペルチェック有効 スペルチェック無効 関連エントリー HTM…</html>
autofocus属性は、ページ表示時にその入力フィールドにフォーカスを当てることを指示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> ユーザーID:<input type="text" id="userid" autofocus="autofocus" /> <input type="submit" value="送信" />…</p></form></body></html>
placeholder属性は、その入力フィールドのウォーターマークを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 書籍検索:<input type="search" id="booktitle" placeholder="書籍名" /> <input type="submit" value="検索" /> </p> </form></body></html>
step属性は、その入力フィールドの入力単位を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング…</html>
min属性、max属性は、その入力フィールドに入力可能な値の範囲を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 時刻:<input type="time" id="time" min="10:10:20" max="11:10:20" step="1" /> </p></form></body></html>
pattern属性は、その入力フィールドに入力可能な値の正規表現を表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> TEL:<input type="text" id="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" title="[半角数字２〜４桁]-[半角数字２〜４桁]-[半角数字４桁]" /> <…</p></form></body></html>
multiple属性は、その入力フィールドに複数の値を入力できることを表します。type属性の値がemail、fileの場合に指定できます。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> Mail:<input type="email" id="email" size="30" multiple="multiple" /> </p></form></body></html>
required属性は、その入力フィールドに値が必須であることを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" required="required" /> <input type="submit" value="送信" /> </p> </form> </body></html>
list属性は、datalistでマークアップされた要素を入力候補として表示します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" list="namelist" /> <input type="submit" value="送信" /> </p> </form></body></html>
オートコンプリート機能を有効にするか無効にするかを指定します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 名前:<input type="text" id="text" autocomplete="on" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリン…</html>
ファイルアップロード用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> ファイル:<input type="file" id="file" multiple="multiple" size="50" /> <input type="submit" value="送信" /> </p> </form> </body></html>
色を指定するための入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 色:<input type="color" id="color" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 クリックでカラーピッカー表示 カラーピ…</html>
Expression Blendでアニメーションをグラフィカルに作成する方法を紹介します。 検証環境 Expression Blend 3 手順 [オブジェクトとタイムライン]ビューの[＋]ボタンをクリックします。 Storyboardを作成します。 アニメーションさせるオブジェクトを選択し…
範囲を制限された数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 範囲:<input type="range" id="range" min="20" max="80" step="10" oninput="this.form.elements.output.value = this.value;" />…</p></form></body></html>
数値用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 数値:<input type="number" id="number" step="0.1" /> <input type="submit" value="送信" /> </p> </form> </body> レンダリング 初期表示 上（下）ボタンクリッ…</html>
タイムゾーンなしの日時用の入力フィールドを表します。 使用例 <html lang="ja"> <head> <title>Hello! HTML5></title> <meta charset="UTF-8"> </head> <body> <form action="hoge.cgi" method="post"> <p> 日時:<input type="datetime-local" id="datetime" step="1800" /> <input type="submit" value="送信" /> </p> </form> </body> レン…</html>
