Webクリエイター能力認定試験、受験メモ

記事は2011年9月12日~

感想
2012/1/9追記

Webクリエイター(自由問題)における<見本との差異>の件。追記します。

10月29日の試験時。
自由問題をひととおり解き終え、仕上がりと見本をじっくり見比べた。
みばえに<差異>があった場合は、その箇所にかかわる<問題文>を丁寧に見直した。
間違いを発見し、修正することで、見本と一致する箇所もあった。
しかし、どうしても間違いが発見できない箇所もあった。
その場合は、<問題文を重視>。

「こういうタグを追加すると同じになるのになぁ~」
「そっくりにならなくて、気持ち悪いなぁ~」
と、すぐれぬ気分のまま、試験を終了した。

しかしながら、自由問題の得点は、初級98点、上級99点だったので、<問題文重視>の方法で正しかったと思う。
(ちなみに規定問題は初級、上級ともに98点)

10月30日(初級)

  • 見本との差異の件。
    「(ブラウザが同じバージョンであれば)仕上がり見本画像と、差異は生じないはず。
    (差異を)発見したらその都度サーティファイに報告し、改善してもらっていますから」と鶴川の先生。(試験会場の鑑です。さすが!)
  • 初級の後で上級を受けたかった・・・。
  • 初級は3回見直しても時間が余った。(だが・・・)
  • 満点合格するためには、全神経を集中し、「必ずミスがある。見つける!」という気構えで、一瞬の気も抜いてはいけない。
    しかし、30日のわたしはモチベーションが持続できず、「だいたいオッケーだしぃ~」という心の声に負けていた。
10月29日(上級)
  • 規定問題は本当に時間がない。模擬試験で余裕だったとしても、試験会場では時間の流れ方が違う。
    試行錯誤していたらアウト。少しでも迷ったら、とっとと飛ばして次の問題へ。
    仕上がり見本と違いがあっても、次の問題へ。
    (ミスを必死で探して1点をゲットするよりも、その時間で次の問題を解いて5点獲得すべし)
  • 自由問題は、見直す時間が多少ある。
    仕上がり見本と差異が生じた場合、どこかにミスがあるはず。
  • 正解していても、仕上がり見本の画像のとおりにならない箇所がある。(らしい。by新宿ISA。「おや?と思う所がありますよ」とのこと)。
    何度か冷静に丁寧に見直してミスが見つからない場合は、そういうものなのだとあきらめよう。
  • 試験会場で。早く試験問題を終えた人たちが試験についての感想を語り合いはじめた。おいおい。
    精神衛生上、最初から耳栓をしておくべし。
  • 試験では、問題集で登場しないタグ(ID)が使われるなど、「改善」を感じた。 問題はよくできていたと思う。

直前(10月27日~)
  • 腕時計を持って行く。
  • 毛糸の靴下、ひざかけ、上着、うちわなど、ぬかりなく。
  • ティッシュ(印刷のないもの)を、試験開始前に机の上に出しておく。(ただし、試験監督さんにお断りをしましょう)
  • リファレンスをしごく。(そんなものに頼ろうと思っている時点でアウト)
  • 規定問題
    • ブラウザとテキストエディタ、CSSのリンクを確認。
      (ブラウザを開く。テキストエディタでcssをリンクさせる。cssでbodyをredにする。ブラウザをF5でリロード。redの行を削除)
    • ブラウザ右クリックでテキストエディタが開けばラッキー。
      フォルダからテキストエディタを開く場合は、そのフォルダを最後まで閉じない。
    • ひとつの問題にはまってしまうのは、最大の危険。すんなり解けなかった場合は、即飛ばし、次の問題へ。
      とばした問題は、他を解き終わってから、最後に冷静に処理すべし。
    • タイピングミスは大きなロス。あわてず、ゆっくり確認しながら、ノーミスで!
    • コピーできるところは、できるだけ使いまわす。
    • キーボードショートカットとマウスを、適材適所で効率よく使う。
    • メモ帳は<上書き保存 ctrl+s>して、閉じないでおく。最後に見直す。(実際は見直す時間はないかも)
事前準備と試験当日
  • FOMの「Webクリエイター能力認定試験 公認テキスト& 問題集」補足資料に目を通す
    • Internet Explorer 8での表示がかなり違う場合があるので、「Internet Explorer 7 standalone Installer (427KB)」をインストール・・・
      したかったのですが、エラー(PathMatchSpecExWがダイナミックリンクライブラリSHLWAPI.dllから見つかりませんでした)に・・・。あっさりあきらめる!
  • Webクリエイター能力認定試験受験者用リファレンス(以下、リファレンス)を両面印刷しておく
    • 上記リファレンスが試験会場でひとりひとりに配られるが、試験時に「どこに書いてあるかな~?」と探す暇はない。
    • 試験当日、リファレンスが配布されたら、20ページほどの紙の束をよくしごき、よれよれにしておくべし。(右下画像参照)
      実際の試験ではリファレンスを見る暇はない。見なくてもよいように覚えましょう。
    • 試験当日、濡らしたハンカチ(印刷のないもの)を持参すべし。指にうるおいを与え、リファレンスをめくりやすくする。
    • ど忘れしたときのために、リファレンスからすばやく情報を得る練習をしておく。0.1秒で!
      (これはしておくとよい。お守りがあるとないとでは、当日の心拍数に影響が出るので。あくまでお守り)
    • リファレンスに頼らず、自力で回答できるようになるのが最終目標。(リファレンスは、お守り)
  • 受験者用リファレンスDreamweaver設定:(参考サイト
  • 規定のプログラムを変更
    • HTMLファイルは、Internet Explorer 8で開く(参考サイト
    • (Internet Explorer を右クリック→)[ソースの表示]は、メモ帳に設定。
  • 試験会場に以下を確認し、試験と同等の環境下で勉強する。
    • ブラウザのバージョンは、Internet Explorerの何か。
      (8の場合、Internet Explorer 9をアンインストールし、8にしておく)
    • テキストエディタは、何か。メモ帳なのか、それ以外なのか。
      特定のエディタを試験会場で指定されるわけではないと思う。メモ帳を使いましょう。
  • 英文タイピング。(規定問題では、タグはテキストエディタ(メモ帳)に書く。タイピングが遅いと間に合わない)・・・ココ(英文タイピング-e-typing)ココ(CSS、HTMLのタイピング練習)で練習しましょう。
  • 急ピッチで入力するよりも、ノーミスを目指して注意深く丁寧に書いた方が、結果として圧倒的に早い!
リファレンスに乗っていない (要注意)
  • lang="ja", "en", "fr"(規定問題であれば、他のファイルで確認可能)
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">(規定問題であれば〃)
  • <meta http-equiv="Content-Style-Type" content="text/css">(規定問題であれば〃)
  • right bottom(背景イメージの右下)(P.10に、値は水平、垂直方向の順序で指定、と書いてありました)
  • lt(<)、gt(>)、copy(C)、reg(R)、trad(TM)、quot(”)、nbsp(ノーブレイクスペースはP.1にありました)
  • param name="autostart"(リファレンスP.2では、src、loopだけ)
  • 「(文字属性を一括指定する際に)行間隔を150%」・・・/150(line-heightのところにも、一括指定のところにもないようです)
  • 「(リストスタイルで)アラビア数字」・・・decimal(リファレンスでは10進数という表現です)
  • 「リストの余白」・・・margin(リファレンスでは「マージン」という表現です)
  • 「背景色を透明に」・・・transparent(P.10にありました)
  • 「リストのインデント」・・・
リファレンスにあるが、模擬試験で見たことのない(ような気がする)タグ(要注意???)
  • <form enctype="データタイプ" Action="アクション" method="メソッド">
  • <div style=""> <div id="">・・・「ID」は来年度の過去問題集に出るかな。10月29日
  • <span style=""> <span id="">
  • text-transform
  • letter-spacing
  • white-space
  • font-variant: small-caps(フォントをスモールキャプスにする) 
    (スモールキャプス:小文字と同じ高さに作られた大文字)
  • overflow
  • z-index
  • visibility
Webクリエイター試験ならでは、の注意点 こちらから抜粋
  • × width="100px", ○ width="100", ○ width=100 (img属性)
    • 右はサーティファイ公式問題集の正答例(CSS)で、pxを使用・・・font-size、border-width、padding、margin、領域の幅、ページの幅、テーブルの幅
    • 右はサーティファイ公式問題集の正答例(html)で、pxを使用していない・・・img属性、Flashの幅と高さ
    • 右はFOM問題集の正答例(html)で、pxを使用していない・・・video(avi)の幅と高さ
  • 作成編集ソフトが自動的に付加する属性:(HTML4.01で非推奨の属性は)削除しないと減点される
  • × <br />, × <img src="" />, ○ <br>, ○ <img src="">
    Webクリエイター試験では、HTMLで記述する必要があり、XHTMLで記述した場合は、減点
疑問
  • (FOM上級P.43) うちの環境で、aviファイルが再生できない。以下を追記すれば再生される。(模擬試験、過去問題の中にはaviがないので、出題されないのか?)
    <embed src="movies/kuma.avi"></embed>
  • (FOM上級P.43)自動再生をfalseにしても、勝手に再生する。
  • (FOM上級P.107)overflowでscrollを設定できるのは、1つのページで1か所だけ・・・か?
  • (FOM上級P.108)(受験者用リファレンスP.12)visibility:hidden;を使う状況は・・・?
  • (FOM上級P.129)ここでCSSファイルを3つに分けて書く理由は?・・・たとえばFOM上級P.161の場合、top.cssを分ける必要があるようだ。bodyで背景画像を指定すると、.top bodyで背景画像をnoneにしても、背景画像がなくならない。 
  • (FOM上級P.149)keybord.swf。音がときどきしか鳴らない。(試験とは関係ないが・・・)
  • (FOM上級P.153 問題3)fontプロパティを使って一括指定する方法と1行ずつわけて指定する方法とで、文字の形が変わる
  • (FOM上級P.155 問題6)リストで、フォントサイズや行間隔をliに設定するのはなぜ?ulやolでも設定できる。小里の湯トップページ
  • 公式初級P.77)なぜbodyタグ直下の画像(logo.gif)には、img用に書かれたスタイルが適用されないのか?
  • (公式初級P.77)クラスmainのpadding-topは、Internet Explorerでは、70px程度にしないと、h1に設定したborder-topのdottedが見えない・・・。
  • (公式初級P.77)h1のwidthの設定がないと、imgスタイルのせいで、h1がlogo.gifの右に回ってしまうから?ただし、contentsで幅のしばりを入れるので、その時点で、h1のwidth設定は必要ないかも。少なくともInternet Explorer 8では。
  • (公式初級P.77)h2の文字列の左側にスペースを取る場合、解答はmargin。paddingでもできるが、どちらでもよい?
  • (公式初級P.98)text-align:centerは、解答はtdだが、tableでもよい?
  • (公式上級P.95)印刷されていないが、用意されているstyle.cssに、transparentが使われている。これの使用目的は?
  • (公式上級P.95)行頭記号付きリストで、fontスタイルを1行にまとめると、行の高さが変わる
解決した疑問
  • 終了タグを持たない空要素に、スラッシュはつける?・・・XHTMLは、スラッシュが必要。Webクリエイター試験では、HTMLで記述する必要があり、XHTMLで記述した場合は、減点される。
    参考サイト:Webクリエイター能力認定試験 採点基準 Q&A
  • border-style くぼんでいるのか、盛り上がっているのか。全体的なのか。わからん。
    (模擬試験では、線を盛り上がらせる、というような抽象的な出題ではなく、タグを指定してくれるので気にしないこと)
  • Dreamweaverで、border-width としたいのに、 border-top-width;からはじまって、right,bottom,leftの4行が生成されてしまう。・・・仕様なので仕方ないとのこと。(←新宿ISAにて)・・・ということはない。環境設定-CSSスタイルシートで、ショートハンドの設定をすればOK。
  • Dreamweaverで、画像に電子メールリンクを貼りたいのだが、電子メールリンクダイアログボックスで作成すると、以下のようにテキストが生成され、画像に直接リンクが貼れない。
    <img src="logo.gif"><a href="mailto:xxx@xxx">xxx@xxx</a>・・・仕様なので仕方ないとのこと。(←新宿ISAにて)
  • (公式初級P.29)代替文字なし、という出題はどのように解答すればよいのか?・・・正答例で確認したところ、右のように空欄にする。alt=""
  • (FOM初級P.120)body直下から/bodyまでの間にdivで入れたclassタグと、bodyに入れたclassタグとでは、背景画像の入り方が異なる。
  • (FOM上級P.88)IE8で、preとnowrapの違いがわからない。・・・下のwhite-space参照
  • (FOM上級P.109)displayのlist-itemとblockの違いがわからない。・・・list-itemは、そのままだと左marginが不足でリストマークが見えない。よって、margin-leftを設定することで、リストマークが見える。
  • (FOM上級P.138 問題4)なぜリストの行頭記号は消えるのか。なぜinsideにすると見えるのか。・・・参考ページ
  • 試験で配布される仕上がりの参考画像は、Internet Explorer 8の画像?それとも7?・・・Internet Explorer 8の画像。ただし、問題文を解いてもそっくりにならない箇所がいくつかある。そっくりになるように操作しても、採点にプラスにはならない。ただし、指示と異なる結果にならなければ、減点にはならない。
    採点の対象となるのはあくまでも「指示」に対して。とのこと。(←新宿ISAにて)
  • 今さらDreamweaverなしで受験したい、ということは可能か?・・・手入力の方が早いように感じてもDreamweaverで助けられる問題文もある。状況に応じて手入力をするのがよいのでは?(新宿ISAにて)
  • CSS。Dreamweaverで、コメントをはさんでその下に新規CSSを追加したい、という場合には、新規CSSルールダイアログでは、意図した位置に入力でできない・・・やむを得ない(←新宿ISAにて)。・・・ということはない。コメント行が複数ある状況でその間に、という場合でなければ、カーソルの入っているタグのすぐ下に新規CSSが追加される。
  • ページ本分全体にクラスを設定、という設問の場合、bodyに設定してはいけないのか・・・bodyにクラスを書くことは普通はしないので、divでくくる。(新宿ISAにて)
  • Dreamwerverでフォームをダイアログで入れると、id,name,method,action,lavelなどを自動で入れてしまう。IDはあった方がよい。削除しなくても減点の対象にはならない。 (←新宿ISAにて)
  • Dreamweaverで選択リストを入れる場合、中身のoptionを入力する機能がない。手入力するしかない。(←新宿ISAにて)・・・ということはない。プロパティインスペクタにて、リスト値をクリックし、入力することができる。
  • Dreamweaver。以下、プロパティインスペクタにて、設定できる。
    • テキストボックスの文字幅や最大文字数
    • テキストエリアの文字数、ライン数
    • ラジオボタンやチェックボックスのチェック済み
    • ボタンの値、
      送信なのか、リセットなのか
  • Dreamweaver。selected
    • フォームの選択リストでは、プロパティインスペクタの初期選択値の欄で項目をクリックし、青く反転させる
    • フォームのラジオボタンでは、プロパティインスペクタのチェック済みをクリック
  • Dreamweaver。フォームで新規に作成する際、ラベルタグなしを選択すること。
  • Dreamweaver。フォームのチェックボックスの値(value)は、プロパティインスペクタのチェック済み値で設定できる。
  • Dreamweaver。フォームのチェックボックスなどでIDをダイアログで複数を作成すると、同じIDは12345と連番がつけられてしまう。・・・手動で削除するしかない。(新宿ISAにて)
  • Dreamweaver。送信ボタンは、ID、ラベルを空欄で作成し、プロパティインスペクタのボタンも空欄。値とアクション欄を設定。
もう一度ぜひ解きたい問題
  • FOM 初級 模擬試験第2回 規定問題 9・・・左のブロックと右のブロックの間の線。padding margin。
メモ
HTML
  • HTMLのbody要素の中でつかわれるものは、「ブロックレベル要素」と「インライン要素」のふたつ。
    • ブロックレベル要素:
      • 文書を構成する基本要素
      • 見出し、段落、リスト、テーブル、DIVなど
    • インライン要素:
      • ブロックレベル要素の内容
      • img、br、spanなど
      • インライン要素はブロックレベル要素の中に記述する
  • 空要素:IMG要素のようにない要素を「空要素」という。空要素は終了タグを持たない
  • a href・・・アンカーエイチレフ、アンカーハイパーリファレンス
CSS
  • HTMLファイル内にCSSを記述する場合、CSS未対応の環境を配慮するため、コメント扱いにする
    • <!– –>
  • CSSファイルの文字コードをブラウザに判別してもらうため、文字コードを指定する
  • @charset "Shift_JIS";
  • CSSの記述方法
    • (読みやすくするため)改行、タブ、半角空白を適宜入れる
    • スタイルごとに改行し、最後にセミコロンを入れる
  • インライン要素にはspan。ブロックレベル要素にはDIV。
  • style属性は使わない。classを使う。
  • 総称フォントファミリー
    • 明朝系:serif
    • ゴシック系:sans-serif
    • 筆記体、草書体系:cursive
    • 装飾系:fantasy
    • 等幅フォント:monospace
  • ID属性
    • シャープをつける
    • 1つのhtmlファイルに1か所だけ適用できる
  • font属性を一括指定する順番
    • 1番目・・・style(省略可)、variant(省略可)、weight(省略可)
    • 2番目・・・size、line-height(/150%)
    • 3番目・・・family
  • border属性を一括指定(順番は特にない?)
    • border:thin inset #ffffff;
  • marginやpadding の順番:上、右、下、左。
    margin:60px 0 90px 0; は、トップが60、下が90
  • tableを中央揃えにする方法:tableの左右マージンをautoにします。参考サイトはこちら
  • white-space
    • normal:widthの設定に従う。半角空白、タブ、改行は、(複数が連続して入力されていても)1か所につき1つの半角空白に変換される。
    • pre:widthが設定されようとも、テキストエディタで表示されているありのままに表示する。改行されていればbrなどのタグがなくても改行する。
    • nowrap:Widthの設定を無視し、改行しない。brなどのタグには従う。半角空白、タブ、改行の扱いは、normalと同じ。
  • transparent(背景色を透明にする)
    • これってどんな場合に必要なの?と思い検索してみたら、こんなページが・・・。
    • 省略した場合でも、同じ結果(透明)になる。bodyなどで特定の色やイメージが設定されていても、少なくともIE8では、指定してもしなくても変わらない。(同じようなことを実験しているサイトが・・・)
    • 環境などによって必要な場合があるのかも?(このサイトではインラインフレームではIEやOperaで指定が必要、としている)
  • position(右図のように、画像3枚を配置する場合・・・)(ちなみに3枚の画像の大きさは140px-105px)(relativeとabsoluteで同じ位置に設定されるように調整しています)
    • static
    • rpositionelative・・・相対的な位置を指定
      • .cat1{ position:relative; top:19px; left:12px; }
      • .cat2{ position:relative; top:-36px; left:132px; }
      • .cat3{ position:relative; top:-91px; left:252px; }
    • absolute・・・絶対的な位置を指定
      • .cat1{ position:absolute; top:60px; left:20px; }
      • .cat2{ position:absolute; top:130px; left:140px; }
      • .cat3{ position:absolute; top:200px; left:260px; }
  • テキストの非表示方法3種(SEO対策として、隠しキーワード、隠しリンクに使うのか?ただし、Googleは、見抜けますから問題ありません、ということのようだ。ただ、”正当な合理的な理由”なるものがわたしにはいまひとつわからない)
    • display:none;・・・非表示にし、描画領域も確保しない
    • visibility: hidden;・・・不可視にする。描画領域は確保
    • text-indent: -9999px;・・・画面の外に出してしまう
  • line-heightとmargin-bottomの違い
  • displayで、blockとinlineの違い
  • margin
    • 上のブロックと下のブロックの間にmarginを入れる場合は、上のブロックの下(margin-bottom)に入れても、下のブロックの上(margin-top)に入れても結果は同じ。
    • 両方に入れた場合は、(加算されることはなく)、いずれか、値の大きい方が優先される。ゼロ(0)にすると、上のブロックと下のブロックがぴったりとくっつく。
  • グローバルナビゲーションで、横に並んだリスト(ボックス)の高さを3em、line-heightを3emと、同じ高さに設定することで、ボックス内の文字列を、ほぼ上下中央に設定できる。
  •  
  • XHTMLとCSS

    「実践 Web Standards Design」(XHTML1.0 Second Edition・CSS2.1)より・・・(注:Webクリエイターの試験は、<xhtml>ではなく、<html>文法に基づくものです)

    • 見出しレベル(h1,h2,h3・・・)をスキップしてはいけない
    • 見出しにすべきは何か。見出しを抜き出して、正しい目次になるか
    • 小文字で書く
    • 終了タグを省略してはいけない。<br />
    • 宣言の記述順の規則・・・参考サイト:CSS2 Specificationでのプロパティの出現順序
      順序が定められているわけではないが、一定のルールで記述しておけば、見落としを防げ、再調整がしやすい。
    メモのメモ
    • (参考書を勉強するにあたり)(問題の解き方で試してみたことのひとつ)
      1. 最初に・・・
        1. ブラウザ(例:Internet Explorer 8)で、自分で解くファイルと標準解答ファイルを別タブで開く
        2. (問題の記述順にかかわらず)最初にCSSをリンクさせる。
          (ヘッダー、および、html内のタグ、クラス)
        3. htmlファイルを仕上げる
        4. CSSを書く。1行書くごとに、Alt+Tabキーで、ブラウザをアクティブにし、F5キーでリロード。CSSの反映を確認。
        5. Ctrl+Tabキーで、ブラウザのタブを切り替え、標準解答と比較。
          (わずかな違いがある=ミスがある)
          (ミスは・・・たとえば、クラスの指定をDIVでなくSPANでしている、クラスの指定をimgでなくpにしている、DIVのくくりが一行ずれている、borderやpaddingなどで上下左右の指定を見落としている、スペルの入力ミス、フォントの色の転記ミス、コロンがセミコロンになっている、ダブルクォーテーションが全角になっている、text-alignにすべきところをfloatにしている、などなど)
          (1つの段落内に、改行<br>せずに画像とテキストを配置。その際、テキストエディタ上で改行されていると、ブラウザで見たときに画像とテキストの間に5pxほどの空間ができる)(サーティファイ公式初級P.18)
          (標準回答と見栄えが同一になればOK)
        6. (以下、目で比較するだけではミスがないことを判定できないので注意)
          1. 疑似クラスやリンクは、実際にクリックし、各動作を確認する
          2. 背景画像ありの背景色、フォームのフィールド名、架空のメールアドレス、クリッカブルマップの座標のわずかな差異など、入力時に一発勝負(だなぁ~)
        7. Alt+Tabキーで、テキストエディタをアクティブにし、再びCSSを書く
      2. 次の問題に移る・・・
        1. 問題を解き終えたら、テキストエディタをALT+F4キーで閉じる。
        2. ブラウザはTabキーでアドレス欄をアクティブにし、キーボードで修正し、次の問題を開く。(自分で解くファイル、標準回答、いずれも)
        3. 次の問題の入っているフォルダを開き、該当する問題を右クリックで開く。(テキストエディタを指定)
        4. (3.のフォルダは最初に開いたら最後まで閉じない)
      3. 慣れてきたら・・・
        1. ブラウザで標準回答、自分で解くファイルを開き、問題を見ないで解答。自由問題もテキストエディタで解答。
          「合格」だけが目的であれば、ここまでする必要はないが、本来は「勉強」が目的のはず。この方法はとてもいい勉強になりました。標準回答をブラウザで見て、htmlとcssを推理できれば、Web製作の実力になります。
    • 試験時は標準回答のhtmlファイルはない。(自由問題の場合)画像ファイルがあるので、それを常時開いておき、比較する。
    • (参考書を勉強するにつれて)
      • 最初はわけのわからないまま、タグを打ち込んでいる感じだが、参考書を2順目!、3順目!と繰り返し解くうちに、見えてくる。
      • 最初はFOM参考書の「説明」を読んでもさっぱり頭に入らない。当面、理屈抜きで、問題を解く。
        繰り返し解くうちに、「説明」が読めるようになるので、読めそうな部分を、読めそうなときに読む。
      • 全容が見えてくると、「なんだ、これっぽっちの試験範囲?あれもこれも、出題されないんじゃん?」と思えてくるはず。
      • 試験範囲は非常に限られているので、この試験勉強で、HTMLやCSSがわかったような気にならないこと。自分!