ウェブデザイン技能検定3級実技解説その2

ウェブデザイン技能検定3級実技で理解しておくべき内容

1.3級実技試験の概要

2.作業時の注意事項

3.解答作成時の注意事項

4.3級実技試験の作業に必要な知識

5.3級実技試験の作業内容

6.相対パス

7.文章の構造化

8.リンクと画像の配置

9.3級実技試験に必要なCSSの基礎

10.CSSのセレクタ

11.CSSのプロパティと値

 

1~3までの解説は

こちら→ウェブデザイン技能検定3級実技解説その1

 

4.3級実技試験の作業に必要な知識

ディレクトリ図の理解

ディレクトリはデータの所在を把握するための仕組みで、

階層やフォルダと言い換えられる場合もある。

ディレクトリ図とは、フォルダやファイルの構成を階層的な表現の模式図で表したものだ。

全てが含まれているフォルダをルートフォルダ(またはルートディレクトリ)という。

これは、ファイルやフォルダの構成を枝分かれして広がっていく木のようなもの

と考えた場合に、根(ルート)の部分の役割をしていることによるものである。

 

パスの理解

パスとは、ハイパリンクの設定や、画像を配置する際に、特定のファイルを指定するものである。

特定のファイルへ至るまでの道のりと考えると分かりやすい。

・絶対パスと相対パス

パスは、その指定方法により、絶対パスと相対パスに分かれる。

絶対パスはウェブデザインにおいては、http://で始まる、

いわゆるアドレスを指すことが一般的である。

相対パスは、あるファイルから見て、対象となるファイルがどこにあるかを指定する方法で、

起点となるファイルによって記述が異なる。

これについては、「6.相対パス」で詳しく解説する。

 

5.3級実技試験の作業内容

ここでは、実技試験で行う作業がどのようなものかを分類している。

スキルの確認に使用して欲しい。

ファイルの移動、フォルダの作成

パソコンの基本的な操作になるが、ディレクトリ図に従ってフォルダを作成する問題や、

ファイルを移動する問題が出題されている。

 

リンク設定、画像配置

相対パスを正確に記述し、リンクの設定や画像を配置することができなければならない。

 

文書の構造化

与えられた文章に対して、見出しや段落、リストなどの要素をマークアップしていく作業だ。

ポイントは、文章の内容や、指定された条件から新しい要素を選択することである。

 

CSSの適用

HTMLファイルにCSSを適用する作業が出題されている。

これまでは、外部スタイルシートによる指定が出題されている。

HTMLのhead要素内に、link要素を使用して記述する。

 

CSSのプロパティや値のコーディング

あらかじめ用意されたCSSファイルを開き、指定された視覚的表現が反映されるように

編集を行う作業が出題されている。

ポイントは、CSSのソースコードの中のどこを修正すれば、

どのように反映されるかという仕組みの理解と、

主要なプロパティについて知っておくことである。

 

6.相対パス

相対パスは、リンクの設定や画像を配置する際に使用する方法で、正確に記述する必要がある。

相対パスの誤りは、リンクが正常に行われないことや、画像が表示されない原因となる。

相対パスは、記述しているファイルから見て、対象となるファイルが

どこにあるのかを示す道のりのようなものである。

例えば、「サンプルファイルの表示」という文字列をクリックしたら、

contentsフォルダにあるsample.htmlファイルが表示されるように

リンクを設定するのであれば、下記のように記述する。

 

<a href=”contents/sample.html”>サンプルファイルの表示</a>

 

a要素のhref属性にある”(ダブルクォーテーション)で挟まれば部分

(contents/sample.html)が、相対パスと言われている部分である。

a要素の開始タグと終了タグで挟まれた部分が、リンクボタンの役割をする。

画像ボタンであれば、ここに画像を表示する要素である、img要素を用いて

画像表示の記述をする。

 

相対パスの記述方法

相対パスの記述方法自体は簡単なものだ。

まずは2つのルールを覚えよう。

階層の下(フォルダの中)へ進むには、フォルダ名の後に/(スラッシュ)を記述する。

「~フォルダの中の」と読み替えることもできる。

この場合であれば、「contentsフォルダの中の」という意味になる。

もう一つのルールは、階層の上(フォルダの外)に進むには../(ピリオド2つとスラッシュ)

を記述するというものである。

これは「自分が含まれているフォルダの外へ出る」というイメージで考えると分かりやすい。

対象となるファイルが、記述しているファイルの含まれているフォルダの

外側にあるという場合だ。

こういった場合「記述しているフォルダの外にあるのだ」という指示をしなければならないため、

../という記述を行う。

例えば、次のような記述があったとする。

 

<a href=”../contents/sample.html”>サンプルファイルの表示</a>

 

この場合「記述しているファイルが含まれているフォルダの外側に、

contentsというフォルダがあるので、その中の」という説明ができる。

もし、階層が関係なく、対象とするファイルが記述しようとしているファイルと

同じ場所にある場合は、そのファイル名を記述するだけである。

同一階層を表す記述は./(ピリオド一つとスラッシュ)だが、

省略可とされているため、一般的にはあまり記述されていない。

 

まとめ

今回の内容で重要なのはディレクトリ図と相対パスの理解である。

こういった基本的な知識は学科試験でも出題されているため、

なんとなくではなく、理論的にきちんと理解しておいた方が良い。

 


 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です