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

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

ウェブデザイン技能検定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級実技試験で、文章の構造化として最低限使えるようにしておきたい要素は、

見出し(h1~h6)、段落(p)、リスト(ol、ul、li)の3つである。

出題時には、使用する要素を指定される。

次のような文章を例に考えてみよう。

 

インターネットについて

プロトコルの役割

インターネットとは、コンピュータ同士の通信網である。共通のプロトコルを

使用することにより、異なるOSを使用するコンピュータ間でも通信が可能になる。

プロトコルの例

HTTP

TPC/IP

FTP

 

見出しはh1要素から使用する。複数の文からなる段落はp要素を使用する。

箇条書きの部分は、序列があればol要素を使用し、序列がなければul要素を使用する。

序列があるとは、なんらかの手順の流れを箇条書きにするような場合や、

順番を明示したいときに使用する。

ol要素を使用するとCSSで特に何も指定がされてない場合、

ブラウザは箇条書きの先頭に1.2.3と自動的に数字が振られる。

 

<h1>インターネットについて</h1>

<h2>プロトコルの役割</h2>

<p>インターネットとは、コンピュータ同士の通信網である。共通のプロトコルを

しようすることにより、異なるOSを使用するコンピュータ間でも通信が可能になる</p>

<h2>プロトコルの例</h2>

<ul>

<li>HTTP</li>

<li>TCP/IP</li>

<li>FTP</li>

</ul>

 

これまでの実技試験では、文章の構造化について、

見出し(h1~h6)、段落(p)、リスト(ol、ul、li)の

3つの記述作業について出題されている。

ただし、これだけしか出題されないということではない。

学科では、もっと多くの要素や属性に関して出題されている。

また、table要素(表組み)やdl要素(定義リスト)も基本的で重要な要素だと考えられるが、

これまでの3級では出題されていない。

次に、それぞれの要素を適切に使用するために、

見出し、段落、リストの考え方について詳しく解説する。

 

見出し

見出しを表す要素のhはheadingsの頭文字である。

見出しとしてマークアップされる文章は、

以下に続く文章の内容を簡潔に示していなければならない。

h1~h6の6段階(レベル)の見出し要素が使用できる。

ポイントは、見出しのレベル訳を明確にし、h1から順に使用するのが望ましいという点だ。

大きさや色などの見た目はCSSで指定できるので、

あくまで文章全体の構造として、どのレベルの見出しであるかを、

誰が見ても分かりやすいように使用する。

 

・見出しの段階の例

例えば、日本の都道府県を紹介するページがあったとする。

見出しとして「日本の行政区分」「関東地方」「関西地方」「東京都」「大阪府」

などとあれば、適用の一例として、「日本の行政区分」にh1要素、

「関東地方」「関西地方」はともにh2要素、

「東京都」「大阪府」にはともにh3要素を適用することが望ましい。

 

段落

段落は、パラグラフともいい、p要素のpはpragraphの頭文字である。

段落ごとにp要素を用いる。

多くのブラウザは、p要素で文章をマークアップにすると、

特にCSSで指定せずとも1行分のスペースを空けて他の要素と分けて表示する。

 

・段落の分け方

段落を説明するために「長い文章」という場合があるが、

どのタイミングでp要素を使用するかは、文章の内容によって異なる。

学校教育における原稿用紙の使い方で「段落を変えて行頭を1マス空けること」

と指導する場合がある。

パラグラフはこれに似ているが、パラグラフ・ライティングといって、

パラグラフ単位の発想で文章を書く方法がある。

これを理解するとパラグラフの本来の意味が分かりやすい。

 

・パラグラフを構成するセンテンス

パラグラフ・ライティングでは、まず初めに、トピック・センテンスという一文を書く。

センテンスとは「文」という意味で、日本語でいえば、

一文の「。(句点)」までの一区切りのことである。

トピック・センテンスで、このあと書きたいことの主旨を先に記す。

そのあとに、サブ・センテンスという文を続けていく。

これはトピック・センテンスを補う内容の文で、

トピック・センテンスには複数のサブ・センテンスが続く場合が多い。

これを話題が変わるまで続け、話題が変わる際に、次のトピック・センテンスを書く。

トピック・センテンスと、それに従うサブ・センテンスのひとまとまりがパラグラフである。

この単位でp要素を適用していく。

この方法は、見出しと組み合わせると、上から下にスクロールして

読み続けるウェブページの仕組みと親和性がある。

つまり、見出しとパラグラフの先頭の一行だけを読み進めていくと、

言いたいことの概要が瞬時に理解できるようになる。

また、文章の書き換えも、パラグラフ単位で移動することができ、

容易に検討することができる。

 

・改行

文章の途中で開業を入れるbr要素がある。

これはline breakから取ったもので、HTMLでは<br>、

XHTMLでは</br>と記述する空要素の一つで、段落とは異なる。

 

リスト

リストはol要素、ul要素、dl要素の3種類があるが、

ここでは実技試験でよく出題されるol要素とul要素について解説する。

実技試験においてはol要素、ul要素をマークアップする場合は、

内容や例示を元にどちらがふさわしいか判断する。

 

・序列のあるリスト

ol要素はordered listの頭文字を取ったもので、序列のあるものについて使用する。

CSSで何も指定しなければ、ブラウザは先頭に「1.2.・・・」のように数字をつけて表示する。

 

・序列のないリスト

ul要素はunordered listの頭文字を取ったもので、序列のないものについて使用する。

CSSで何も指定しなければ、ブラウザは先頭に「・(中黒)」を付けて表示する。

先頭の文字はol要素、ul要素ともに、list-style-typeプロパティを使用すると、

種類を変更したり、なくしたりできる。

リストの各項目に対しては、それぞれli要素を使用する。

liはlist itemの頭文字である。

 

<ol>

<li>最初に野菜を洗う</li>

<li>洗った野菜を切る</li>

<li>切った野菜を炒める</li>

</ol>

 

1.最初に野菜を洗う

2.洗った野菜を切る

3.切った野菜を炒める

 

また、li要素の中で、olまたはul要素を記述すると、項目の中にさらにリストがある、

「入れ子」構造にすることができる。

 

<ol>

<li>肉の下ごしらえを行う</li>

  <ol>

    <li>塩をふる</li>

    <li>コショウをふる</li>

  <ol>

<li>肉を焼く</li>

</ol>

 

1.肉の下ごしらえを行う

  1.塩をふる

  2.コショウをふる

2.肉を焼く

 

まとめ

「7.文章の構造化」では、見出し(h1~h6)、段落(p)、リスト(ol、ul、li)の3つ

の要素について理解しておく必要がある。

WordPressを使ったブログなどにも応用できる基本的な考え方のため、

ウェブデザイン技能検定を受験しない方にとっても役立つ知識となるはずだ。

また、構造化して読みやすくまとめられた文章はSEO対策にもなるため、

HP作成やブログ運営の際には活用すべき要素であるといえる。


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

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

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

コメントを残す

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