Webクリエイター能力認定試験の模擬問題を解いてみた
Webクリエイター能力認定試験を受験してみようかと思い、
Webクリエイター能力認定試験│資格検定試験│ビジネス能力認定 サーティファイ
久しぶりに模擬問題１ 実技問題を実施
Dreamweaverを利用したので、
90分で終わらなくてはいけないのに100分ちょっと経過。
見直しもしたら110分以上かかったかもしれない。。。
実はこの模擬問題に挑戦するのは２回めなのに、
まだまだ特訓が必要ですね。
orz......
マージンが
上：２エム、下：０、
左：０、右：３０ピクセル
って意地悪な書き方をしているので、数値設定を間違えてしまい
何度も修正をしたのが原因か・・・
「値４つの場合」
margin: [上][右][下][左]
上から時計回り！！覚えましょう！！
IllustratorからファイルをSVGとして保存してみる
ドットインストールでSVGの基礎を学習したので
何か作ってみたい・・・と思いながらぐぐっていたら
SVGをIllustratorから書き出してHTML5に埋め込む方法 | ITベーシストぱらじの日常
というサイトに辿り着く。
ということは、くまのロゴもSVGになるのかしら
なるなんてすごい(∩´∀｀)∩
と思い、試してみました。
illustrator > ファイル > スクリプト > ドキュメントをSVGとして保存
SVGファイルを開くと
<g>
<image style="overflow:visible;" width="408" height="346" xlink:href="ADA2363FB17B8312.png" transform="matrix(1 0 0 1 -13 25)">
</image>
</g>
ん？pngファイルにリンクされている・・・？
思ってたのと違う・・・
拡大するとぼんやりする・・・
失敗。
イラストのグループ解除し、再度SVGとして保存してみると、
▼（仕組みはよく分からないけど）できました！
これこれ。この数字ばっかりのファイルが見たかったのです。
<circle style="stroke:#000000;stroke-miterlimit:10;" cx="73.047" cy="126.016" r="48.837"/>
<circle style="fill:#FFFFFF;stroke:#CC9D69;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;" cx="73.44" cy="126.146" r="28.332"/>
<circle style="stroke:#000000;stroke-miterlimit:10;" cx="309.047" cy="126.016" r="48.837"/>
<circle style="fill:#FFFFFF;stroke:#CC9D69;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;" cx="309.44" cy="126.146" r="28.332"/>
<circle style="stroke:#000000;stroke-miterlimit:10;" cx="193.155" cy="198.047" r="136.047"/>
<circle style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" cx="125.279" cy="214.403" r="24.093"/>
<circle style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" cx="260.279" cy="214.403" r="23.008"/>
<ellipse style="fill:#CC9D69;stroke:#000000;stroke-miterlimit:10;" cx="187.899" cy="260.69" rx="24.806" ry="12.946"/>
<circle style="stroke:#000000;stroke-miterlimit:10;" cx="125.202" cy="214.744" r="17.054"/>
<circle style="stroke:#000000;stroke-miterlimit:10;" cx="260.202" cy="214.744" r="17.054"/>
丸を使って書いたのでcircleばっかりですね
▼index.htmlのボディにSVGの部分をコピペ。表示させるとこんな感じ。
▼拡大しても滑らか！
満足。
ドットインストール：SVG入門 (全14回)修了
これからの時代はSVGなんだよ！と聞いて、
ミーハー精神丸出しで早速やってみる
SVG入門 (全14回) - プログラミングならドットインストール
絵心の無い私には（？）、この数字を入れたら
どんどん図形が出来上がる仕組みが面白くてたまりませんでした。
アニメーションで動きをつけたり、
JavaScriptと合わせて図形の属性をランダムに変化させたり
かなり奥が深そう。
▼ドットインストール先生の授業で作った
ランダムな色＆大きさの丸が沢山出てくるSVG&JavaScript
極めたい・・・
CSS3入門：ドットインストール
引き続きドットインストールでCSSの復習＆お勉強！
CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3
box-shadowやlinear-gradient、transform、
transition、animationなどCSS3の使い方を再確認。
画像やJavaScriptに頼らずにデザインしたり、
動きのあるサイトを作ったりできることにすっかり夢中です。
数字を入れると色や形が決まっていくところが個人的に（*´▽｀*）萌える
▼特に驚いたのが属性セレクタ。
まだまだ知らない指定方法が沢山ありました。
=============================
-要素の後に[]をつけて、特定の属性値を持つ要素に適用することができる！
a[href="http://dotinstall.com"]{color:yellow;} =>全体一致
a[href^="http"]{color:yellow} => 先頭一致
a[href$="jp"]{color:yellow} =>後方一致
a[href*="dotinstall"]{color:yellow} =>部分一致
-要素の状態で指定ができるセレクタ！ （フォームなどで使える）
input[type="text"]:disabled{border: 1px solid red;}
:enabledなども利用可能
-さらに、次に続く要素にスタイルを当てる！
input[type="radio"]:checked+label{font-weight:bold;}
ラジオボタンにチェックをするとラベルがboldに。
=============================
今回は便利なサイトも沢山教えてくれました。
★HTML5やCSS3の各ブラウザ対応状況を確認することができるサイト
ベンダプレフィックスが必要かどうか確認しましょう
★とってもとっても便利なCSS3ジェネレーター
http://www.colorzilla.com/gradient-editor/
出来上がりイメージを想像しながらCSSを書いて、
ブラウザで表示確認＆リロードしながら作業していたのが嘘のような便利さ。
もっと早く視聴するべきでした。
ドットインストールでCSSの復習
ドットインストールの「CSS入門 (全18回)」を視聴 http://dotinstall.com/lessons/basic_css_v2
こちらも結構知らないこともありました
(・_・;)
▼復習になったこと＆新たに学んだことまとめ▼
===============================
[セレクタの種類]
*全てのセレクタ
a b aの下にある全てのbを指定
a>b aの直下にあるbを指定（子要素だけ）
a+b aの直後のb要素1つだけを指定
ab a要素であってかつ、b要素
※(p.item p要素かつクラスがitem)
.........a+b, ab, a>b、ややこしいぃ
[スタイル指定の優先度]
- 後から書いたほうが優先
- インラインで書いたほうが優先
- 詳細度の高いほうが優先 #(100) .(10) 要素(1)
- !importantが最優先
===============================
基本中の基本（？） セレクタやスタイル指定の優先度をきちんと把握していなかったという事実。 人の書いたCSSを読むときによく理解できていなかったのはこれが原因かもしれない。
position、z-index、擬似クラスは 説明を聞くと理解出来たきがするけれど、 使ってみるとうまくいかない場合もあって これは何度もTRYして覚えるしかなさそう。
