ウェブデザイン技能検定1級 学科試験

自画像ではない落書き

平成26年度ウェブデザイン技能検定1級の学科試験に合格しました。

平成26年度の受験段階(2014年の11月頃)の時点で、1級学科試験の対策となるようなテキストやサイトなどはほぼ皆無といえる状態でした。
自身も受験を決めたものの、さて、どうやって勉強しようか?と、まずはそのことに頭を悩ませたものです。

2級試験用の対策テキストが発売されたりと、今後は1級試験対策のテキストなども刊行されていくとは思いますが、これから1級を受験しようとする方々の一助となればと思い、今回は自分の経験と勘によるその学科対策を紹介します。
駄文にて失礼しますが、よろしくお願いします。

始めの一歩、過去問をやりましょう。
これによって今の自分のレベルが把握できるので大事です。
過去問をやるにあたっての注意点は完全に自信を持って答えられる問題と自信薄の問題とを区別できるようにしておくこと。
自信薄の解答は問題文や他の選択肢によっては解答を変えてしまうものだと思いますし、自信薄なのに正答してしまってその部分の勉強をおろそかにしてしまうのは危険なので、区別しておく必要があります。

自分が受験勉強を始めるにあたって、はじめてやった過去問の正答は「自信あり」のものだけで半分の50%ほど。自信薄も含めると60%といったところでした。
「知るかっ!」って問題もそれなりにあったりして絶望感にさいなまれました。
学科試験の合格ラインは70点以上で、問題数は50問、つまり1問2点の配点数だとすると、15問は間違えられる計算になります。
とはいえ、単純に1問2点ではなく各問題の配点数は秘密となっているようで、話はそう単純ではない建前になっていますが、まあ、このままだと不合格間違いなしって感じでした。

ちなみに自分が1級の受験を決めたのは受験申込日締日の当日。
2月の試験のときにでも申し込むか・・と考えていたのですが、1級受験のチャンスが一年位一度しかないことに気づいて慌てて申し込みをしました。
その時点で試験まで残り一か月ぐらいだったと記憶しています。
これから知識を詰め込むには生半可なやり方では無理だな、俺の場合!

そこで考え出した方法が五感のフル活用。
まあ、視覚、聴覚、触覚、味覚、嗅覚のうち味覚、嗅覚は使いませんが、視覚⇒読む、聴覚⇒言葉に出す、触覚⇒書くということをしました。
正直、なかなかいい歳のおっさんになってきたし、読むだけじゃ覚えられないんスよ。

さて、過去問をやってみて「自信あり」で解答できた部分はOKなのでそこは捨て置いて、「自信薄」、「知るかっ!」の部分を勉強していきます。

まず、間違えた部分をググって調べる。
大抵の場合IT用語辞典やウィキペディアのお世話になると思うのですが、分からない部分を調べるとすぐにまた分からない部分に出会うと思います。
そこはめげずにどんどん追っていきましょう。いずれわかるモノにたどり着きます。そうすると点と点が線でつながります。
(どこまでたどってもわからん!というような人はまず3級から受験しましょう。)

でも、追っていくだけではだめです。それがなんなのかをそれなりに把握しなくてはなりません。
そこで、読む、書く、声に出すを実行します。
自分の場合はあくまでも覚えるための「触覚」として書いているのであって、あとで書いたものを読み返すつもりはありませんでした。
ゆえにググって読みながらノートに重要と思われる個所や言葉を殴り書きしました。
さらに書きながら読んでいることに対して「フンフン、なるほどね~24bitカラーも32bitカラーも使えるRGBは同じなのね~」とか「RAID5とRAID6の違いなんか知るかボケェ!」とか文句を言いながら読んでは書いて、言葉を発していきました。

これが意外と効果的で、文句を言いながら書いたとことかそれに紐づいて覚えていったりします。特に文句が大きいほどのちのち覚えていたりします。
そうこうしているうちに過去問で自信を持って正答できなかった部分の勉強が終わると思いますので、そしたら次の過去問をやります。
過去問は3年分用意されているので、一気にまとめてやらずに、自分の知識を確認するためにも一つづつ大事にやっていきましょう。

で、他の過去問をやってみると・・・なんということでしょう!!
前に自信薄だった箇所が「なにあたり前のこと聞いてるんだ?」と思える問題がチラホラ出てくるはず。
さらにググってわからない箇所を掘り下げていった過程で目にしたモノも出題されたりすると楽しくなってきます。

しかし!1級はそこまで甘くありません。
1級試験の出題範囲は果てしなく広い・・・「自信あり」の問題は前回の50%ほどだったりとさほど変わっていなかったりします。
でも、一度の勉強で「知るかっ!」の問題がぐっと減り、「自信薄」の問題が増えているはずです。
正答できたかどうかはおいておくとしても、そのこと自体が勉強が進んだ証拠としてとらえていいでしょう。

あとはこれの繰り返しです。
まあ、過去問が3年分しかないので、3回しかできないんですけどね。
しかも、過去問をやるとわかりますが、新しい年度の問題の方が難しくなっています・・・というより、最新の知識が必要になっています。
自分がやったときも昔の問題にはFlashのActionScript3.0の問題がそこそこあったりしてびっくりしました。
こういう今は必要としないであろう知識は時間もないので思い切って捨てましょう。
3回も過去問をやると頻出される問題傾向もつかめると思います。それらは間違いなく出る問題なので、そこだけは間違わないように!
ここまでくれば本番も50点は「自信あり」で堅いでしょう。

さて、合格には50点では足りません。
合格ラインが70点だとすると残り10問正答しなくてならないけど、配点数がわからないとうこともあるのでここはバッファをもって残り半分の25問のうち半分の12~13問に正答できればまず合格と考えていいでしょう。
自信薄の問題もヤマ勘が発動しまくれば残り半分ぐらい正答を導けそうです。

どうです?意外といけそうな気がしてきませんか?
あとは自信薄を少しでも自信のある方に持っていくことで、合格の道が近づきます。
でも、先ほど書いたように、1級の出題範囲は限りなく広いのです。
すべてを網羅して勉強していたらとても時間が足りないのは間違いないので、何を捨てるか?にかかってきます。

FlashのAS3は当然のように捨ててよいでしょうが、さらにほかに何を捨てるかは皆さんの知識しだいです。
スマホのアプリの知識がまったくない状態ならアプリ関連の問題はあきらめましょう。
やったことがないもので1~2問程度しか出ないのに、試験のために覚えるのは厳しすぎます。
とはいえ、「PHPやサーバーも触ったことないから捨てよ」はNGです。
いずれ実技試験で使いますし、問題も頻出なので、そういう人は受験自体を見合わせるべき。
要は3年分の過去問をやって、問題として1問ぐらいしか出題されなかったカテゴリで、かつ自分の知識範囲から大きく外れているものは除外して勉強って感じです。

あと、1級試験は1年に一回しかないというのが他の3級や2級に比べると対策を立てづらい部分。
26年度はいままで過去問でまったく出てこなかったCSS3アニメーションの問題が多めだったり、Javascriptの問題もぱっと見では解けなくてちゃんと順序立てて考えないとわからない問題が出たり、長いソースを読まなければいけない問題があったりと常に変化しています。

そこで、自分が取った方法は2級の過去問をやる!でした。
問題のレベルとしては1級に比べれば簡単なのは言うまでもないのですが、試験の出題傾向のようなものがつかめるかも!と思ってやりました。
まあまあ出題傾向が完全につかめたとは言い難いですが、3年分の過去問を何度もやるのも無駄なので、2級の問題も活用です。
自分は受験直前にやりましたが、2級の問題は間違えても1問くらいというところまで知識が進んでいました。
逆に言うと2級の問題程度で複数個誤りがあるようでは合格はかなり厳しいかと。

いずれにしても今後はHTML5がW3Cから勧告されたこともあるので、その問題が頻出していくのは間違いないでしょうな。
今回もcanvasの問題とかやったことないとチンプンカンプンであろう問題がありました。
これは外せないでしょう。
HTML5といってもHTMLだけで完結することはなくたいていJavaScriptが絡むのでそのあたりも必須ですけどね。

あとは、直感を信じるですかね。
よくよく考えると裏を書いたりして解答をこねくり回してしまうこともありますが、自信のない問題はいくらこねくり回してだめです。
裏を読んで誤って解答しても後悔するので、自信が薄い、ない問題は直感を信じて解答し、天命を待ちましょう。
でも、問題をよく読んでみて答えが違うと思ったら書き直すのはありです。
今回の受験中に驚いたのが、自分がまだ半分ぐらいしか解き終わっていないのに、解答を終了させて帰っていく人が現れたことです。
自分は念のために問題を再度読み直して解答を検討したりしましたが、90分の受験時間を全部使わなかったとはいえ、自分が帰るころには残り5人ぐらいになっていました。(東京会場の受験者は40人はいた。)
「マジか!?」と思いましたが結果的に開始1時間も立たずに帰った人たちの大部分は結局問題がわからないから早かったんだなというのが合格が発表された人数を見てわかりました。
確か全国で7人しか受かっていなかったので。

問題をもう一度やり直すのは大事です。
なぜなら、初回はやはりあがっているのか、力が入っているのか、競馬で言うところの入れ込み過ぎ状態なので、意外と凡ミスをしています。
2週目はとりあえず解け終わった後なので体の力も抜けて普段通りの実力が出せます。
もう一度読むと「あぶねーあぶねー」というシーンがありますので点数を漏らさないためにもやっておきましょう。

最後に簡単にまとめると

  • 過去問をやってわからないとこ、あいまいなところを中心に勉強する。

  • 自分の引き出しに全くないカテゴリはバッサリ捨てる。

  • 受験当日は周りのことは気にせず、時間をたっぷり使い、問題を2回解くつもりでやる。

さて、役立ちましたでしょうか?
きっとさほど役に立たなかったことでしょう。
結局、ローマは一日にしてならず、日ごろのウェブ制作経験が生きます。
2級や3級は一夜漬けでも合格可能だと思いますけど、1級は進取の気鋭を持って実務をやっているのが一番の合格の道かなと思いますので、これから受験を検討している方は日ごろのウェブ制作すべてが1級合格につながっていると考えて、がんばってください。

httpsのページからhttpの外部リソースを参照するとめんどくさい件

落書き-ねむし!

https環境に設置しているページから、http環境の外部ファイル(CSSや画像、JSなど)を参照するとブラウザがセキュリティの観点からhttp環境の参照ファイルをブロックしてしまいます。

IEならこんな感じで警告してくる。

ie9の警告

毎回、こんなのが出てきたらコンテンツとして成り立たないが、ちゃんと解決方法がある。

以下のように外部参照ファイルを絶対パスで記載するとNGなので・・・
https://samurai-ferret.upper.jp/css/hoge.css

絶対パスのプロトコル部分(http:)を除外して記述すると問題なし!
//samurai-ferret.upper.jp/css/hoge.css

GoogleからJQueryを参照するときのパスも//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.jsとなっているのはプロトコルの違いに考慮したからってことだね。

SEO的にhttpよりhttpsを上位にするということをGoogleが明言しているというのもあるので、これから既存のコンテンツをhttpからhttpsにしていくということもあるだろう。
そんなときにリソースが参照されてねぇ!と慌てないためには今のうちからプロトコル部分を取り払った絶対パスで記述するように癖をつけたほうがいいかもしれませんな。

CSSセレクタの優先度の計算

首長女の落書き

CSSを組むときって知らず知らずのうちに優先度などを考えてセレクタを指定していると思います。
実際俺もそうでした。
でも、ちゃんと計算方法を知っておくと、やたらめたら「!important」を使うことや、上の階層のクラスからセレクタ引用してセレクタが冗長になってしまうなんてことを避けることができます。

まあ、個人で制作から運営までしているサイトなら上記ようなの事態に陥ることは少ないとは思うのですが、web制作を仕事としている場合にはそんな事態に少なからず出会ったことがあるはず。

そこで、CSSセレクタの優先度の計算式
それぞれに決まった点数をつけることで決まるらしい。

  • タグのstyle属性(1000点)
    例:<p style="font-color:#00F;">

  • ID(100点)
    例:#hoge {font-color:#00F;}

  • 疑似クラス(10点)
    例:a:hover {font-color:#00F;}
    ※疑似クラス単体で記載することはないので、例の場合は要素+疑似クラスで11点となる

  • 属性セレクタ(10点)
    例:a[href*="google"] {font-color:#00F;}
    ※属性セレクタ単体で記載することはないので、例の場合は要素+属性セレクタで11点となる

  • クラス(10点)
    例:.hoge {font-color:#00F;}

  • 擬似要素(1点)
    例:a:first-letter {font-color:#00F;}
    ※擬似要素単体で記載することはないので、例の場合は要素+擬似要素で2点となる

  • 要素(1点)
    例:ul {font-color:#00F;}

  • 全称セレクタ(0点)
    例:* {font-color:#00F;}

疑似クラスと疑似要素の区別が難しく感じるが、疑似要素は下記の四つしかないので覚えてしまうべし。
※:first-childは疑似クラスだったりするのでしっかり覚える。

  • :before

  • :after

  • :first-line

  • :first-letter

では、実際に試してみよう!
上記の点数の理論が本当かどうかこちらのページで色々試してみた。

CSSセレクター実験

はい、実験の結果は上記の理論は正しくない!ということでした。

では、何が正しい計算方法なのか?いろいろググってみると、こんな考え方がでてきた。

AをインラインCSS、BをID、Cを属性/クラス/疑似クラス、DをHTMLタグ/疑似要素とする。
それをもとにすると、セレクタの点数は以下のようになる。

セレクタ A B C D 点数
*(全称セレクタ) 0 0 0 0 0.0.0.0
h1(要素) 0 0 0 1 0.0.0.1
.c001(クラス) 0 0 1 0 0.0.1.0
a[title](属性) 0 0 1 0 0.0.2.0
#id001(ID) 0 1 0 0 0.1.0.0
style=””(インライン) 1 0 0 0 1.0.0.0
div.c001 p 0 0 1 2 0.0.1.2
div.c001 a[title] 0 0 2 2 0.0.2.2
.a.b.c.d.e.f.g.h.i.j 0 0 10 0 0.0.10.0

点数というより、アプリなどのバージョンをイメージするとわかりやすいだろうか・・。
この計算式だと、クラスや属性をいくつ集めてもIDに勝てないという理論に説明がつく。

CSSの優先度の考え方としてはこちらの計算方法で考えるのがベターなようですな!

バックグラウンドサイズだけAndroidで効かない件

AndroidのCSSのコーディングハマったので覚書。

背景画像のサイズを指定できるプロパティ「background-size」があるが、これを「background」の値として書いてはいけない。
「background」「background-size」の順番で記載してあげれば問題なし!

・・・と言い切ってしまった感があるけど、具体的には以下のように記述するべし!

おススメ例
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size : contain;

おススメしない例
background : url("背景画像") no-repeat scroll center center / contain rgba(0, 0, 0, 0);

おススメしないやり方だとAndroid標準ブラウザで背景画像が表示されないバグ?の発生を確認しました。
確認したAndroid OSのバージョンは2.1、2.3、4.2といったところです。
AndroidのChromeなら問題なし。
このあたりGoogleなんとかせいやっ!って感じだけど、Androidデフォルトブラウザのことなんてもうどうでもいいのだろうな。

margin-bottomやmargin-topなどを個別に指定するのではなくプロパティをまとめてmargin:0 0 0 10px;のように指定することをショートハンドというらしいですが、今回の問題はbackground-sizeをbackgroundのショートハンドとして指定するとNGという問題のようですな。

使用前に調べたらbackgroundのショートハンドプロパティとして背景画像のサイズを指定する場合はpositionのあとにスラッシュで区切って指定せよとあった。
この「スラッシュで区切って指定せよ」というのがCSSのコーディングで見かけない記述だったので気になってはいただけど、まさかこんな落とし穴があるとは・・・ですよ。

background-positionのピクセル指定も右や下基準の指定だとAndroidは対応していないし、なかなか厄介なり、Android!

あ、ちなみに、以下のように記述したらやはりNGだから気を付けよう。
background-size : contain;
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);

background-sizeを記載したあとにbackgroundのショートハンド設定のパターン。
これはショートハンドでサイズを指定していないけど、省略していると思われて「auto」がついているのと同じと解釈するブラウザがあるみたい。
CSSの優先度は後に書いた方が優先されるので、せっかく指定したものがautoで上書きされて想定と異なる事象が起きてアワアワするので気を付けよう。

落書き_着流し