知らないと損する時短テクニック集

知らないと損する時短テクニック集

【目次】

時間がない

Webクリエイター能力認定試験の公式テキストを学習し、サンプル問題(模擬試験)を一通り解き終えた方はいろいろと思うところがあるはずです。

アレ? 意外と時間ないぞ!

そう思われた方もいらっしゃるでしょう。

エキスパート」の場合、知識問題(20分)と実技問題(110分)の計130分
2時間10分で全ての問題を解き終え、できれば見直しの時間も10分程度確保しようと考えると、とても時間が足りません。

このページでは実技問題(サイト構築)にかかる時間と手間をできるかぎり減らすためのテクニックと知識をお伝えします。

メモ帳を2画面で開くことのメリット

Webページの作成にはHTMLCSS、2つの工程があります。

HTMLでそのページの構造(中身)を定義し、CSSで表示(見た目)をととのえる、という感じです。

実技試験/テキストでは以下のような流れでサイトを構築していきます。

実技試験/テキストの流れ
  1. すべてのページに共通する部分を作成
  2. 1をコピーし、以下の各ページを作成
  3. トップページ(スライドショー、レスポンシブWebデザイン)
  4. テキスト主体のページ
  5. テーブル(表)のページ
  6. ギャラリーのページ
  7. フォームのページ

ベースとなるページを作ってそれを5つ分コピーし、トップページテキスト主体テーブル(表)ギャラリーフォームの各ページを作っていきます。

時間も集中力も削がれる1画面オペレーション

HTMLとCSS、その2つ工程をテキストエディターで行います。

Windowsのメモ帳の場合、基本的に1画面しか使用できない仕様になっています。

メモ帳の「ファイル」から開く
メモ帳の「ファイル」からCSSフォルダ内のstyle.cssを開くと……
Webクリエイター能力認定試験サンプル問題
それまで編集していたbase.htmlが消え、style.cssが開きます

そのため、HTMLが終わったらCSSを開き、CSSが終わったらまたHTMLを開き直すという手間が生じます。

うんざり

この無駄な切り替え作業を各ページを作成するたびに繰り返さなくてはなりません。

時間だけでなく、集中力も削がれます

見直し中、表示ミスを発見したときのことを想定してみて下さい。
その原因がHTMLにあるのかCSSにあるのか一見してわからなかった場合、HTMLファイルを開くとCSSが消え、CSSファイルを開くとHTMLが消え……、という「メモ帳」の仕様はフラストレーションを増幅させずにはおきません。
ただでさえ短い試験時間がこの仕様のおかげでより短くさせられている、と考えるとなおさらです。

HTMLとCSSの2画面を同時に開ければ、滞りなく作業を継続できます。

以下、その方法を紹介します。

HTML用とCSS用のメモ帳を同時に開く方法

style.cssを選択し、ホームタブの「開く」の横にあるをクリックします。

ファイルを開く
style.cssを選択して、「開く」の横の▼をクリック

そのファイルを開くアプリケーションが表示されます。
そこから「メモ帳」を選択します。

メモ帳を選択
メモ帳を選択

そこに「メモ帳」が表示されていなかった場合は、「別のプログラムを選択」から「メモ帳」を探します。

右クリックしてメモ帳で開く
style.cssを右クリックして「メモ帳」で開いても結果は同じです

あるいはstyle.cssを選択した後、右クリックして、「プログラムから開く」 > 「メモ帳」を選択します。

メモ帳を同時に2つ開く
style.css(右上)とbase.html(右下)が表示されました

画面に2つのファイル、base.htmlとstyle.cssが表示されました。

切り替えはタスクバーにある「メモ帳」のアイコンから行います。

現在開いているメモ帳の表示
ミスに気付いたとき、すぐさま修正できます

タスクバーの「メモ帳」にポインタ(矢印)を重ねると、現在開いているファイルが表示されます。

編集したい方をすぐに編集できるので大幅に時間と労力を節約できます。
ぜひ試してみて下さい。

レファレンスを参照せよ

付箋でびっしりのテキスト

サンプル問題(模擬試験)を何度か解き終えてみてこう思ったことはないでしょうか。

覚えること、多すぎない?

例えば、画像「logo.png」に「index.html」へのリンクを設定しなさいという問題。

画像は、「<img src="images/logo.png" alt="xxx" >」だったっけ?
それとも「<img href="images/logo.png" alt="xxx" >」?

リンクは、「<a src="index.html" alt="xxx" ></a>」だったような……
いやいや、「<a href="index.html" alt="xxx" ></a>」のような気もする。

ほとんど答えはわかっているのに、「src」か「href」か迷っている内に残り時間がすくなくなっていく……。

こうした「自分の答えに自信が持てない」、「覚えたのにド忘れしてしまった」ということはまれにあることです。
HTML/CSS辞典を調べればものの数秒で正答できるのに、足元のカバンからそれを出して参照することは許されません。

HTML入門書

手元にもないという方はこちらから!

実は、正々堂々参照が許されている参考資料が存在します!

リファレンスの場所
参考資料(リファレンス)はここにあります

受験者用リファレンス」です。

リファレンスの場所
HTML編とCSS編、両方あります

先の例で説明すると、リンク先の指定は「src」ではなく「href」ということがわかります。

aタグのリファレンス
<a>をクリックすると……、その記述方法が載っています

同様に画像を表示するタグが<img>とわかっていれば、<img>の項目をクリックするだけで答えが確認できます。

つまり、テキストに載っているHTMLタグとCSSルール(セット)を丸ごと暗記する必要はありません。

最低限それがどのような働きを持つのかさえわかっていれば、レファレンスを参照することで正答できるのです。

ここに注意!

ただし、HTMLタグもCSSルールも覚えられるだけ覚えておいたほうが時間を節約できます。
模擬試験プログラムを本番形式(制限時間130分)でやってみればわかりますが、レファレンスをのんびり参照している暇はあまりないのです

どうしてもわからないときだけ見る(基本的に見ない)、くらいに考えて本番に臨みましょう。

知らないと損する時短テクニック集

ここまで「メモ帳」を複数画面で開く方法と受験者用リファレンスの使い方を見てきました。

いずれも基本的なことなので、すでに知っていたという方もいらっしゃると思います。

逆にこれらのことを知らなかったとしたら、その学習と解答にかかる時間および労力は膨大なものになっていたに違いありません。

もしこのページを読むまで知らなかったという方がおられましたら、これを期に目標を合格から満点合格に引き上げてみてはいかがでしょうか。

そのくらいの負担軽減はできたと思います。

手前味噌はこのくらいにして、次に「エキスパート」の試験範囲からHTMLの間違えやすいところを具体的に見ていきましょう。

TOP