【070-480】試験対策その2-3 CSS3のセレクターとスタイル プロパティ | P1
CSS3 のセレクターとスタイル プロパティを中心に学習します。
（CSS＝カスケーディング・スタイル・シート）
Selectors
Combinators
Color properties
Text properties
Box properties
CSSの役目はHTMLをどう見せるか指定すること
選んで書式を設定する、という考え方。
選ぶのが「Selectors（セレクター）」。Selectorsの種類。
type selectors
.class selectors
#id selectors
[attribute] selectors
:pseudo-cpass an ::pseudo-element selectors
the universal selectors
selector chains
type selectors…要素（≒タグ）で選ぶ
ex)table {color:red;}…tableタグ内の文字が赤くなる
.class selectors…class属性で選ぶ
ex)
.fancy {color:red;}…class="fancy"のタグ内の文字が赤くなる
合わせ技
ex)
div.fancy …div要素のfancyクラスを対象にする
#id selectors…idで選ぶ
classは形容詞、要素の状態。idは固有の値、特定の要素を表す。
ex)
#loren {color:red;}…idが「loren」の要素を対象とする
[attribute] selectors…属性で選ぶ
ex)
[data-author="psmith"] {color:red;}…data-authorが「psmith」の要素を対象とする
[data-author$="smith"]…「smith」で終わる
[data-author^="smith"]…「smith」で始まる
[data-author*="smith"]…「smith」を含む
セレクタ・チェイニング
table,ul {color:red;} … どちらかのセレクタに一致する要素はすべて赤になる
h1,h2,h3,h4. {color:red;} … 前ヘッダ要素を対象とする
疑似要素にはコロンを二つ「::」
ex)
p::first-letter {color:red;}…p要素の最初の一文字だけを赤色に
p::first-line {color:red;}…p要素の最初行だけを赤色に
コンビネータはセレクタを組み合わせる方法
#Div1 div {color:red;}…idがDiv1の要素の中の「div」要素を赤くする。直接の子孫でなくても構わない。
#Div1 > div {color:red;}…#Div1の直接の子要素divが対象。孫要素はNG。
一般兄弟
ul ~ div {color:red;}…ul要素の後にあるdiv要素を対象とする
ul + div {color:red;}…ul要素と弟関係にあるdiv要素を対象とする
疑似クラス
li:first-child {color:red;}…リストの最初の子要素を対象とする
li:nth-child {color:red;}…リストの指定の順番の子要素を対象とする
li:nth-child(3) {color:red;}…リストの3番目の子要素を対象とする
25分はなかなか長い……！
【070-480】試験対策その2-2 HTML5 のセマンティック構造 | P2
MVA JavaScript × CSS3 × HTML5 開発ジャンプ スタート
(01) HTML5 のセマンティック構造 | P2
なんと「日本語」を選ぶと字幕がハングルででてきます……orz
助けてー！
次の3つの解説とデモ
Audio/Video
Canvas
SVG(Scalable Vector Graphics)
なんとなくVSでVideo入れるのがすごく簡単そうなのはわかった。
CanvasとSVGの使い分けをするのが良いらしいのもわかった。
HTML5でゲームが作れちゃうんだぜ！と興奮ぎみなのが印象的でした。
英語字幕で見てるけど、ね、眠い……
【070-480】試験対策その2-1 HTML5 のセマンティック構造 | P1
MVA JavaScript × CSS3 × HTML5 開発ジャンプ スタート
(01) HTML5 のセマンティック構造 | P1
Microsoft テクニカル エバンジェリストの Jeremy Foster と Michael Palermo が、優しくHTML5で取り入れられたタグについて説明してくれます。
資格取得のための集中コースで、通常5日間で学習するコースを1日に凝縮、2日間にわたりお届けします。
だそうです。
英語だけど大丈夫、ちゃんと日本語字幕が選べます。
※でもNexus7のChromeで見ると、字幕が選べないみたい。
最初のテーマはHTML5のセマンティック構造
セマンティック要素を理解する
id属性、class属性はお馴染み
<div id="header">
<div id="nav">
<div class="article">
<div class="section">
<div id="sidebar">
<div id="footer">
ヘッダも本文もナビゲーションも文字列が複雑
複雑だった構造がシンプルになった
<header>
<nav>
<article>
<section>
<aside>
<footer>
フォームに関する機能
自動的にテキスト型が設定される
プレイスホルダーが簡単にセットできる
VS2012 とデモ
VS2012ではWindows8アプリでJavaScriptが選べる
HTML、CSS、JavaScriptを使って作ることができる
簡単な文字表示のデモ。
プレイスホルダ付の入力エリアも簡単。
実行すると、アプリができる。Webではなく、アプリで実行される。
アプリを書くときもWebサイトと全く同じ方法でできてしまう凄さが、体感できちゃいます。
【070-480】試験対策その2 Microsoft Virtual Academy
試験対策本は出ていないようなので、Microsoft Virtual Academy に頼ることに。
JavaScript × CSS3 × HTML5 開発ジャンプ スタート
まずはこれで、様子見です。
でも英語か！字幕出るけど英語か！くじけそう……orz
【070-480】試験対策その1 試験内容の確認
最初に受験するのは「HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング」。
一般的な試験対策としてまず、受験対象者と出題範囲の確認。
受験対象者は、以下の通り。
この試験の受験対象者は、JavaScript を使用したさまざまなアプリケーション タイプおよびハードウェア/ソフトウェア プラットフォームに欠かせないビジネス/アプリケーション ロジックのプログラミングで 1 年以上の実務経験が必要です。また、受験対象者は、HTML を使用した、オブジェクト指向のイベント ドリブン プログラミング モデルの開発経験が最低 1 ～ 2 年必要です。
開発から遠ざかっている身としては、結構ハードル高いなぁ。
ハードルというより、高跳び？
評価スキルは、以下の通り。
ドキュメントの構造とオブジェクトの実装と操作 (24%)
プログラム フローの実装 (25%)
データのアクセスとセキュリティ保護 (26%)
アプリケーションでの CSS3 の使用 (25%)
25%ずつではない微妙な配分が気になるね。
データのアクセスとセキュリティ保護が1%だけ、重要。
試運転開始
MCSD（マイクロソフト認定ソリューションデベロッパー） の取得を目指したお勉強状況＋情報セキュリティ関連多めの技術ブログ、試運転開始です。
まずはMCP 70-480なのですが、なんと2013年3月31日まで、無料で受験できるみたいです♪
マイクロソフト認定資格試験 (MCP) 70-480 無料受験のご案内
さて、HTML5＋JavaScript＋CSSのお勉強です。
ん？よく見たら2013年3月31日って、過ぎてますね……orz
