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

ウェブデザイン技能検定実技出題範囲

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

1.3級実技試験の概要

2.作業時の注意事項

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

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

5.3級実技試験の作業内容

6.相対パス

7.文章の構造化

8.リンクと画像の配置

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

10.CSSのセレクタ

11.CSSのプロパティと値

 

1~3までの解説は

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

 

4~6までの解説は

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

 

7の解説は

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

 

8.リンクと画像の配置

実技試験では、文章の構造化と同様、以下に説明する内容についても

テキストエディタを使用して実際にコーディングできるようにしておこう。

 

リンクの設定

リンクを設定するにはa要素を使用する。

<a href=”index.html”>ホーム</a>

 

aはanchorの頭文字、hrefはhypertext referenceの略である。

記述に関しては”(ダブルクオーテーション)を忘れがちなので気を付けよう。

href属性の値で対象となるファイルを指定する。

画像ボタンであれば、a要素の内容をimg要素で画像にする。

 

HTMLの場合

<a href=”index.html”><img src=”images/home.gif”alt=”ホーム></a>

XHTMLの場合

<a href=”index.html”><img src=”images/home.gif”alt=”ホーム”/></a>

 

画像の表示

画像を表示するには、img要素を使用する。

img要素は空要素なので記述には注意しよう。

src属性の値で表示したい画像を指定する。

srcはsourceを略して者である。

alt属性で、画像の代替テキストを記述する。

altはalternateを略したものである。

代替テキストとは、画像が何らかの理由で表示されない場合、

代わりに文字で情報を提供するものである。

仕様においては、src属性とalt属性は、必須となっている。

代替テキストには、画像が表示されない場合、

それを読めば画像の想像がつくような意味を持ったものを記述する。

ユニバーサルデザインの観点から必要なものだが、

装飾として使用されているなどの理由で言葉では説明しにくいものや、

説明が不要と考えられるものに対しては、値を空にする。

 

HTMLの場合

<img src=”images/xxx.gif”alt=””>

XHTMLの場合

<img src=”images/xxx.gif”alt=””/>

 

実技試験に際して、リンクの設定と画像の配置に関しては、

最低限これらの作業ができるようにしておこう。

また、a要素の属性に関してはname属性やid属性を使用して

ページ内リンクを行う方法、

title属性でリンク先の情報を補って追加する方法などいくつかあるが、

これまでのところ3級実技試験では出題されていない。

 

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

実技試験で行うCSSの作業内容は、大きく2つに分かれる。

1つはHTMLファイルにCSSファイルを読み込ませること、

もう一つは指定されたCSSのプロパティの値を設定することである。

 

スタイルの適用

実技試験におけるスタイルの適用は、外部スタイルシートという方法を用いる。

ブラウザで表示した状態のキャプチャ画像が示され、

複数のCSSファイルの中から、

正しいものを選択するというスタイルや、

読み込みの為のパスの記述を正しく修正するという内容である。

どのファイルを読み込ませるかという指定の方法は、

一つずつ読み込ませてブラウザで表示結果を確認しながら

進める方法が最もわかりやすい。

CSSのプロパティの値を設定する作業は、

主に色や背景画像などについて指定されたものを

指示された場所に適用するというものである。

 

・外部スタイルシートの読み込み

外部スタイルシートをHTMLファイルに読み込ませるには、

HTMLファイルのhead要素内に、link要素のhref属性で、CSSファイルを指定する。

rel属性とtype属性は次のように記述する。

 

HTMLの場合

<link rel~”stylesheet”type=”text/css”href=”sample.css”>

XHTMLの場合

<link rel=”stylesheet”type=”text/css”href=”sample.css”/>

 

・CSSのシンタックス

CSSのプロパティの値を設定するには、次のようなシンタックス(記述)で行う。

 

セレクタ{ プロパティ: 値; }

具体的には次の例のようになる。

h1{ color: red; }

 

セレクタとは何に対して指定をしているのかを特定する部分である。

{ }の中に、何をどうする、という指示を記述する。

「何を」の部分をプロパティといい、「どのようにする」の部分を値という。

プロパティと値は:(コロン)で区切り、

;(セミコロン)で指示の終わりを表し、

半角スペースを任意で入れることができる。

プロパティと値は、一つのセレクタに対して複数指定することができる。

 

10.CSSのセレクタ

CSSでは、セレクタで支持の対象を特定する。

セレクタの種類はいくつかあるが、

3級実技試験で押さえておいた方が良いものをまとめておく。

 

タイプセレクタ

タイプセレクタとは、各要素そのものに対して指示を行うものである。

セレクタとしてh1やpなどの要素名を記述する。

HTMLファイル中に現れる指示した要素すべてに対して内容が反映される。

 

p{ color: white; }

 

ユニバーサルセレクタ

ユニバーサルセレクタとは、*(アスタリスク)一文字のセレクタで、

HTMLファイルの中のすべての要素に対して反映することができる。

プロパティと値を一括指定したい場合に使用できる。

 

クラスセレクタ

クラスセレクタとは、HTMLファイル中でいずれかの要素に対して、

class属性を指定して名前をつけ、

このクラスに対してスタイルの指定を行うものである。

class属性は、次のように使用する。

 

<p class=”note”>(内容)</p>

 

この例では、段落に対して、クラス名をnoteとしている。

CSSでクラスに対して指定を行うには、

クラスの前に「.(ピリオド)」を付けてセレクタとする。

これで他のp要素と区別することができる。

 

.note{ color: red; }

 

idセレクタ

idセレクタとは、いずれかの要素に、id属性を使用して名前を付け、

これにスタイルの指定を行うものである。

「一意セレクタ」と表記される場合もある。

id属性は次のように使用する。

 

<div id=”footer”>(内容)</div>

 

この例のdiv要素についてはこの後解説する。

CSSでidに対して指定を行うには、

id名の前に「#(ハッシュ記号)」をつけてセレクタとする。

 

#footer{ color: white; }

 

・クラスセレクタとidセレクタの使い分け

クラス属性とid属性の名前は、制作者が任意に決めることができ、

同じような方法に見えるが、大きな違いがある。

クラスセレクタは、記述しているHTMLファイルの中で、

複数の場所に現れるものに使用するのに対して、

idセレクタは、一回しか現れないものに使用する。

例えば、特定の単語だけ色を変える場合は、

複数回現れる可能性があるのでクラスセレクタを使用する。

また、「ページのフッタに対して」というように

重複しないものは、idセレクタを使用する。

 

グループ化要素について

グループ化要素はHTMLの要素で、

「CSSを適用するために、HTMLソースの特定の場所に識別用の印を付ける」

と考えると分かりやすい。

グループ化要素にはdiv要素やspan要素がある。

クラスやidと併せて使用することにより、

特定の部分を他の部分と明示的に分けることができる。

 

・div要素とspan要素

div要素はdivisionの略で、区分けするという意味である。

span要素はインライン上に(一行のライン上に)

特定の範囲を指定するものである。

どちらも同じように見えるがこれも大きな違いがある。

その前提としてHTML5以前のブロックレベル要素と

インライン要素について解説する。

 

・ブロックレベル要素とインライン要素

HTML5以前の要素はブロックレベル要素とインライン要素に分かれる。

ブロックレベル要素はh1要素やp要素など、

一つのかたまりとして他の要素と明確に分かれて表示されるものである。

インライン要素はブロックレベル要素の中に含まれる性質のもので、

a要素などが該当する。

 

インライン要素の例

<p>詳しい説明は、<a fref=”faq.html”FAQページ</a>をご覧ください。</p>

 

div要素はブロックレベル要素で、span要素はインライン要素である。

 

div要素でid属性を指定する例

<div id=”note”>

<h1>(見出し)</h1>

<p>(内容)</p>

</div>

 

span要素で、class属性を使用する例

<p>横浜市は、政令指定都市で<span class=”pref”>神奈川県</span>の県庁所在地です。</p>

 

組み合わせのセレクタ

セレクタ同士を「,(カンマ)」で並べると、複数のセレクタに対して、

同時に指定を行うことができる。

 

h1,h2,h3{ color: red; }

 

また、セレクタ同士を半角スペースで空けて並べると、

指定を絞り込むことができる。

 

p em{ color: red; }

 

この場合は、p要素の中に含まれるem要素だけに適用される。

em要素はemphasisの略で、内容の強調を意味するものである。

 

11.CSSのプロパティと値

3級実技試験で押さえておきたい基本的なプロパティと値を解説する。

また、関係の深いプロパティや値を掲載しているので

学科試験の参考にして欲しい。

 

colorプロパティとbackground colorプロパティ

colorプロパティとbackground-colorプロパティは、

それぞれ、前景色、背景色という。

文字の色指定を行う際はcolorプロパティを使用する。

background-colorプロパティは、要素の背景色を指定することができる。

 

h1{

color: white;

background-color: black;

}

 

background-imageプロパティ

background-imageプロパティは要素の背景に画像を指定するものである。

値はurl( )関数を使用するが、( )内に記述する方法は

リンクなどで使用するパスと同じものである。

 

body要素にbackground-imageを指定すると、

ブラウザウインドウ全体に広がるように背景画像が表示される。

 

body{

background-image: url(images/bg.gif);

}

 

・参考:background-repeatプロパティ

background-repeatプロパティはbackground-imageプロパティと一緒に、

背景画像の繰り返し方について指定するものである。

値repeat-xは水平方向にのみ繰り返し、

値repeat-yは垂直方向のみに繰り返す。

また繰り返しを行わず、一つだけ表示するno-repeatという値もある。

 

body{

backgroun-image: url(images/img1.jpg);

background-repeat:repeat-x;

}

 

paddingプロパティとmarginプロパティ

ボックスモデルに、paddingプロパティと

marginプロパティで余白を指定することができる。

例えば、body要素直下のdiv要素にmarginプロパティで左右の値をautoにすると、

両側の余白が均等になり、中央配置することができる。

次のpaddinngのように値が一つしかない場合は上下左右が10pxに、

marginの例のように値が2つある場合は、

上下が0px、左右がautoという指定になる。

値が3つある場合は、左から順に、「上」「左右」「下」の指定になる。

 

#wrap{

padding: 10px;

margin: 0px auto;

}

 

単位

値として数値などを指定する場合の、長さと色の単位について解説する。

 

・長さの相対単位

長さの単位は相対単位と絶対単位に分かれる。

相対単位は条件に応じてサイズが変化するもので、

px(ピクセル)、em(エム)などがある。

emは大文字一文字分の大きさという意味である。

例えばline-height(行間)プロパティでは10ポイントで大きさを指定された

文字に対して、line-heightプロパティの値を1.5emとすると、

10ポイントの1.5倍で15ポイントの指定になる。

 

・長さの絶対単位

絶対単位は、条件などによって変化しない単位である。

pt(ポイント)、in(インチ)などがある。

 

・色の単位

色は、redやblackなどのようにキーワードによる記述のほか、

RGBの値を%(0~100)や256段階(0~255)の数字で表すものもある。

 

16進数の色の単位の例(Blueが最大値の青)

 

#0000ff

 

16進数とは、0~9、a~fを使用して表したもので、

0が最小値、fが最大値である。

これらを2桁ずつそれぞれRGBの値として割り当てたもので、6桁の数値になる。

先頭に「#(ハッシュ記号)」を付けて表す。

例えば、#0000ffという表記では、RGBのR(Red)が00(最小)、

G(Green)が00(最小)、B(Blue)がff(最大)ということで青色となる。

また、RGBの各値の2つの数値が同じである場合は、

3桁で表現することもできる。

この例の場合は、#00fとすることができる。

 

・参考:RGBA

CSS3のRGBAカラーでは、RGBの値を%(0~100)または、

256段階(0~255)をカンマで区切り、

続けて、A(Alpha:透明度)を0(透明)~1(不透明)の値で指定できる。

 

rgba(0,0,255,0.5)

 

まとめ

今回の内容で重要なのは、リンクの設定や画像の配置に関する内容である。

これは実技でも学科でも出題率が高いので覚えておくべきだ。

実際にコーディングする際にもリンクや画像を貼るという行為は

避けられないのでこの内容は必須と言える。

更に実技でも学科でもよく出題されるのが、CSSの基本である。

CSSでは、セレクタの内容をしっかり把握しておく必要がある。

セレクタ、プロパティ、値、の意味と使い方をしっかりと理解して

実際にホームページを作成してみれば、

ウェブデザイン技能検定3級の実技は難しい内容ではない。

ホームページの作成は白紙の状態から作らなければならないが、

ウェブデザイン技能検定3級実技の問題は、

すでにあるコードを変更したり、付け加えたりするだけなので

ホームページを作成できるレベルであれば十分対応できる。

今回で、ウェブデザイン技能検定3級学科と実技の内容は

すべて解説し終えたので、次回から、過去問を解説していく。


 

 

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

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

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

コメントを残す

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