ウェブデザイン技能検定試験3級

【実技試験科目及びその範囲】

ウェブサイト構築

 ウェブサイトデザイン

ウェブサイト構築に関するデザイン作業が出来ること
  • ウェブサイトデザイン
    • ハイパテキストマーク付け言語(HTML)、拡張可能なハイパテキストマーク付け言語(XHTML)、スタイルシート(CSS)によるコーディング
      <h1></h1>,<h2></h2>,<p></p>,<ul><li></li></ul>,<ol><li></li></ol>
      <link rel="stylesheet" href="style.css">
    • 画像の利用
      <img src="../img/magnifying_glass.png" alt="検索">
      虫眼鏡のアイコン画像でも、検索のテキスト入力欄に使用するために説明文は、「検索」にする。

      (*)

      画像には、代替テキストを入れましょう

      芝生を駆け回る柴犬の写真
      <img src="../img/dog.png" alt="芝生を駆け回る柴犬の写真">
      <!-- 画像が表示されない場合、非常に有用ですから、より具体的な説明文。 -->
      
    • マルチメディアデータの利用
      <audio src="../mp3/audio.mp3" controls loop><p>HTML5 Audioに対応したブラウザをご利用ください</p></audio>

      <video poster="../img/video.jpg" controls autoplay muted controls width="99.9999%"><source src="../mp4/video.mp4" type="video/mp4"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p></video>
    • ページデザイン・レイアウト
      margin: 20px auto 50px;
      color: #000000 /* blak */ ;
      color: #ffffff /* white */ ;
      color: #ff0000 /* red */ ;
      color: #00ff00 /* lime */ ;
      color: #0000ff /* blue */ ;
    • アクセシビリティ
      パンくずリストで、サイト内での現在位置を確かめ、どのように今のページに到着したのかを知ることができます。
      <ul class="list-inline">
      <li class="list-inline-item"><a href="#">HOME</a></li>
      <li class="list-inline-item"><a href="#">リンク</a></li>
      <li class="list-inline-item"><a href="#">サイトマップ</a></li></ul>

 ウェブサイト運用管理

ウェブサイト運用・管理に関する作業が出来ること
  • ウェブサイト運用管理
    • 更新、管理
      <試験用 PC>

      試験では以下のPC環境

      • 文字コードはUTF-8
      • Windows 8.1 以降のOS
      • キーボードおよびマウスの操作
      <アプリケーション>

      試験では以下のテキストエディタがインストールされている

      <ブラウザ>

      試験では以下を指定ブラウザとする

      • Microsoft社 Microsoft Edge 最新安定版
      • Mozilla Foundation Mozilla Firefox 最新安定版
      • Google Google Chrome 最新安定版
      • ※Internet Explorerは使用可能だが非推奨とする。

試験要項(R02_2)

実技実技試験概要(PDF)

更新日:

令和2年度第2回は、
2020-08-30(日)試験でした。

3級ウェブデザイン技能検定実技試験は次のとおり実施します。

【出題形式】:課題選択方式

【合格基準】:70点以上(100点満点)

  1. 作業A

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    指示されるディレクトリ構造を示す図に従い、HTML ファイル、CSS ファイル、および画像などのソースファイルを適切に配置すること。またその構造に適応するよう、各ファイルの記述内容を修正し、更新すること。
    作業のポイント
    <!-- コメント:修正コード記載 -->
    <link rel="stylesheet" href="css/style.css">
    <img src="img/logo.png" alt="ウェブデザイン技能競技大会">
    
    /* コメント:修正コード記載 */
    background-image: url(../img/bg.png);
    background-image: url(../img/bd.png);
    background: url(../img/main_image.jpg) no-repeat center center;
    background: url(../img/ar.png) no-repeat left center;
    
  2. 作業B

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    指定されるエリアにあるグローバルナビゲーションに対して、対応した各ページへのリンクを設定すること。併せて HTML ファイルの内容を指示のとおりに修正し、更新すること。
    作業のポイント
    <!-- コメント:修正コード記載 -->
    <li><a href="index.html">HOME</a></li>
    <li><a href="info.html">競技概要</a></li>
    <li><a href="app.html">参加申込</a></li>
    <li><a href="faq.html">FAQ</a></li>
    
    <h1>競技概要</h1>
    <h1>参加申込</h1>
    <h1>FAQ</h1>
    
  3. 作業C

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    指定されたコンテンツのブロックレベル要素を指示されたレイアウトになるよう、CSS ファイルを修正し、更新すること。
    作業のポイント
    /* コメント:修正コード記載 */
    #wrap {
    margin: 20px auto 50px;
    
  4. 作業D

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    指示される要素に関連する背景色と文字色について、CSS ファイルを修正し、更新すること。
    作業のポイント
    /* コメント:修正コード記載 */
    h1 {
      border: double 3px #333333;
      font-size: 1.2em;
      margin-top: 0;
      padding: 10px 15px;
      background-color: #331100;
      color: #ffffff;
    }
    
  5. 作業E

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    与えられる画像と同じブラウジング結果となるよう、HTML ファイルの body 要素、div 要素に対応する CSS ファイルの記述を修正し、更新すること。
    作業のポイント
    /* コメント:修正コード記載 */
    body {
      color: #333333;
      font-family: "メイリオ", 'MS PGothic', Osaka, sans-serif;
      font-size: 16px;
      margin: 0 0 150px 0;
      min-height: 100%;
      padding: 0;
      background-image: url(img/b3.png);
    }
    
    #wrap {
      background-color: #ffffff;
      border: solid 1px #000;
      line-height: 200%;
      margin: 20px auto 50px;
      min-height: 100%;
      padding-bottom: 40px;
      width: 918px;
      background-image: url(img/c3.gif);
    }
    
  6. 作業F

    ウェブサイトデザイン
    HTML・XHTML・CSSによるコーディング、画像の利用
    ウェブサイト運用管理
    更新・管理
    作業の概要
    HTML ファイルのコンテンツエリア内の記述を削除し、与えられる文章に対し h1 要素、h2 要素、p 要素、ol要素、ul 要素のすべてをもれなく使用し構造化を行い、更新すること。
    作業のポイント
    <!-- コメント:修正コード記載 -->
    <h1>ウェブデザイン技能競技大会2020</h1>
    <h2>競技内容について</h2>
    <p>事前公表課題を公開しました。詳しくは下記よりご参照ください。</p>
    <ul>
    <li>一般部門概要</li>
    <li>U20部門概要</li>
    </ul>
    <h2>競技実施日程について</h2>
    <p>競技実施日程を公開しました。詳しくは下記よりご参照ください。</p>
    <ol>
    <li>U20部門  5月20日</li>
    <li>一般部門 6月 1日</li>
    <li>本選大会 8月24日</li>
    <li>国際大会 11月20日</li>
    </ol>
    
    

学科試験要項(学科・実技共通)(PDF)

更新日:

令和2年度第2回は、
2020-08-30(日)試験でした。

3級ウェブデザイン技能検定学科試験は次のとおり実施します。

【出題形式】:筆記試験(マーク方式)・「多肢選択法」「真偽法」形式

【合格基準】:70点以上(100点満点)

  1. Q&A答え:2

    HTML5 [ウィキペディア参照]

    Web Hypertext Application Technology Working Group(WHATWG)によって2004年に定められた{Web Applications 1.0にWeb Forms 2.0を取り入れたものをベースとしている。W3Cの専門委員会により2008年1月22日にドラフト(草案)が発表され、2014年10月28日に HTML5 が勧告され、2016年11月1日に HTML 5.1 が勧告され、2017年12月14日に HTML 5.2 が勧告され、2021年1月28日に廃止された。WHATWGによって策定されているHTML Living Standardが有効な後継規格として案内されている

  2. Q&A答え:2

    著作権 [ウィキペディア参照]

    著作権(ちょさくけん、英語: copyright、コピーライト)は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である[2]。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい[3]、創作した者を著作者という。知的財産権の一種

  3. Q&A答え:1

    「情報機器作業における労働衛生管理のためのガイドライン」を策定しました(PDF) [厚生労働省参照]

    このガイドラインは、パソコンなど、情報機器を使って作業を行う労働者の健康を守るためのガイドラインです。

    情報機器作業による労働者の心身の負担を軽くし、支障なく働けるようにするため、事業者が講ずべき措置をまとめています。

    「情報機器作業における労働衛生管理のためのガイドライン」を策定しました
  4. Q&A答え:2

    CSS の値と単位 [Mozilla参照]

    px
    Pixels ピクセル 1px = 1in の 1/96
  5. Q&A答え:2

    GIF [Mozilla参照]

    GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIFは1ピクセル毎8ビットまでと、24ビットの色領域から最大256色まで扱えます。

    GIF [ウィキペディア参照]

    Graphics Interchange Format(グラフィックス・インターチェンジ・フォーマット、略称GIF)とはCompuServeのPICSフォーラムで提唱された画像ファイルフォーマットの一つ。LZW特許を使用した画像圧縮が可能。

    特徴
    GIF規格には1987年6月15日に公開されたGIF87aと1990年7月30日に公開されたGIF89aの2種類があり、GIF89aでは、透過GIFGIFアニメーションがサポートされた。
    透過GIF - 特定色を透明化し、画像の背景を透過表示する。
  6. Q&A答え:1

    <header> 要素 [Mozilla参照]

    HTML の <header> 要素は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。

  7. Q&A答え:1

    レイアウトと包含ブロック [Mozilla参照]

    ユーザーエージェント (ブラウザーなど) が文書をレイアウトする時、それぞれの要素にボックスを生成します。それぞれのボックスは4つの領域に分かれます。

    1. コンテンツ領域
    2. パディング領域
    3. 境界領域
    4. マージン領域

    CSS 基本ボックスモデル入門 [Mozilla参照]

    それぞれのボックスは 4 つの部品 (または領域) から構成され、それぞれの縁についてコンテンツの縁 (content edge)、パディングの縁 (padding edge)、境界の縁 (border edge)、マージンの縁 (margin edge) が定義されています。

    CSS 基本ボックスモデル入門
  8. Q&A答え:2

    アクセシビリティとは* [ウェブアクセシビリティ基盤委員会参照]

    さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。

    WCAG 2.1 関連文書 更新のお知らせ (2022年7月5日)
    WCAG 2.0関連翻訳文書

    アクセシビリティ [ウィキペディア参照]

    障害者が他の人と同じように物理的環境、輸送機関、情報通信及びその他の施設・サービスを利用できることをいう。

    望まれる方法

    • 画像への代替テキスト。(<img alt="画像が見えない場合の説明" />)
    • 重複する表記の省略:重複する表記の記述を可能な限り減らすように配慮する。またタイトルやメニューの一覧などは、スクリーンリーダーや音声認識などを用いてジャンプする(<a href="#mainText">本文へジャンプ</a>・・タイトル・メニュー・・・<a id="mainText">本文</a>))。
    • リンクの範囲を大きく( tabindex や、アクセスキーの使用)
    • 文字サイズの可変性:文字の大きさを特殊なソフトを使用しなくても拡大できる。文字の大きさを絶対サイズではなく、相対サイズで定義すれば、汎用ブラウザで拡大ができる。
    • スタイルシートの解除や、ユーザスタイルシートに対応した属性の定義。
    • 色覚異常(第一、第二、第三、全色盲)への配慮を可能な限りする。赤・緑・黄・水色などにウェブデザイナーが注意する。
  9. Q&A答え:1

    ワーム [ウィキペディア参照]

    ワーム (worm) は、英語でミミズやサナダムシなど細長い虫の俗称。蠕虫(ぜんちゅう)。

    • ワーム (コンピュータ) - コンピュータ用語で、自身を複製し増殖するプログラム
    • ワーム (ゲーム) - キャラクター端末用に開発されたコンピュータゲーム
    • 一番目の細長い虫を模した釣り用のルアー(疑似餌)の一種。 ⇒ ルアーを参照
    • ワーム (伝説の生物)
    • Write Once Read Manyの略
    • 特撮テレビドラマ『仮面ライダーカブト』に登場する宇宙生命体の総称
    • テレビアニメ『スカイガールズ』に登場する金属生命体の総称
  10. Q&A答え:12

    アスペクト比 [ウィキペディア参照]

    アスペクト比(アスペクトひ、 英語: aspect ratio)は、矩形における長辺と短辺の比率

  11. Q&A答え:1

    段落要素 [Mozilla参照]

    HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

  12. Q&A答え:2

    色相 [ウィキペディア参照]

    色相(しきそう、英: hue)は、赤、オレンジ、黄、緑、青、紫といった色の様相の相違である。特定の波長が際立っていることによる変化であり、際立った波長の範囲によって、定性的に記述できる。ただし、常に同じ波長が同じ色に見える訳ではない。赤から、オレンジ、黄、緑、青を経て、菫(紫)までは、スペクトル上の色であると言える。

    彩度、明度と併せて、色の三属性と言う。色から彩度と明度または輝度の要素を取り除いた残りであるということもできる。

    色相環
    色相の総体を順序立てて円環にして並べたものを色相環(しきそうかん、英: color circle)と言う。色相環上では、補色を反対の位置に設ける。連続的な色相環中のある1色を指すために、色を円の角度として表現したり、有限個の色の集合を定義したうえでそれを選ぶことで表現したりされる。色相環を表現する表色系にはマンセル表色系、オストワルト表色系、PCCSなどがある。
  13. Q&A答え:4

    ブロック引用要素 [Mozilla参照]

    HTML の <blockquote> 要素 (HTML ブロック引用要素) は、内包する要素の文字列が引用文であることを示します。通常、字下げを伴ってレンダリングされます (整形方法については注意の項を参照してください)。 cite 属性により引用元の文書の URL を、 <cite> 要素により引用元の文書のタイトルなどを明示可能です。

    <q> (Quotation) 要素
    独立したブロックというより行内の短い引用を行うには、 <q> (Quotation) 要素を使用してください。
  14. Q&A答え:3

    表要素 [Mozilla参照]

    HTML の &<table> 要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

    border
    この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは frame 属性が void に設定されることを意味します。
    同様の効果を得るには、 border 一括指定プロパティを使用してください。
  15. Q&A答え:2

    margin [Mozilla参照]

    margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。

    margin プロパティ
    1 ~ 4 つの値を使って指定することができます。それぞれの値は <length>、<percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。
    • 値が 1 つ指定された場合、全四辺に同じマージンが適用される。
    • 値が 2 つ指定された場合、1 つ目のマージンは上下、2 つ目は左右の辺に適用される。
    • 値が 3 つ指定された場合、1 つ目のマージンは上、2 つ目は左右、3 つ目は下の辺に適用される。
    • 値が 4 つ指定された場合、マージンはそれぞれ上、、下、左の順 (時計回り) に適用される。
  16. Q&A答え:2

    不正アクセス行為の禁止等に関する法律 [ウィキペディア参照]

    不正アクセス行為の禁止等に関する法律(ふせいアクセスこういのきんしとうにかんするほうりつ、平成11年8月13日法律128号)は、インターネット等のコンピュータネットワーク等での通信において、不正アクセス行為とその助長行為を規制する日本の法律。略称は不正アクセス禁止法など。

    フィッシング (詐欺) [ウィキペディア参照]

    フィッシング(英: phishing)とは、インターネットのユーザから経済的価値がある情報(例: ユーザ名・パスワード・クレジットカード情報)を奪うために行われる詐欺行為である。典型的には、とにかく信頼されている主体になりすましたEメールによって偽のWebサーバに誘導することによって行われる。

  17. Q&A答え:3

    日本工業規格のウェブアクセシビリティ [ウィキペディア参照]

    これは一般的にWebコンテンツJISと呼ばれる。2010年8月20日にJIS X 8341-3:2010となり、国際基準のWCAG 2.0とも整合して改訂されている。

    WCAG 2.0 [ウィキペディア参照]

    知覚可能
    • イドライン 1.1: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
    • ガイドライン 1.2: 時間依存メディアには代替コンテンツを提供すること。
    • ガイドライン 1.3: 情報、および構造を損なうことなく、様々な方法(例えば、よりシンプルなレイアウト)で提供できるようにコンテンツを制作すること。
    • ガイドライン 1.4: コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む
    操作可能
    • ガイドライン 2.1: すべての機能をキーボードから利用できるようにすること。
    • ガイドライン 2.2: 利用者がコンテンツを読み、使用するために十分な時間を提供すること。
    • ガイドライン 2.3: 発作を引き起こすようなコンテンツを設計しないこと。
    • ガイドライン 2.4: 利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。
    理解可能
    • ガイドライン 3.1: テキストのコンテンツを読みやすく理解可能にすること。
    • ガイドライン 3.2: ウェブページの表示や挙動を予測可能にすること。
    • ガイドライン 3.3: 利用者の間違いを防ぎ、修正を支援すること。
  18. Q&A答え:1

    大きめの文字列要素 [Mozilla参照]

    <big> は HTML の非推奨の要素で、内包するテキストを周りの文字列よりも1段階大きいフォントの大きさで描画します(例えば medium が large になります)。大きさはブラウザーの最大フォントの大きさに制限されます。

    附随コメント要素 [Mozilla参照]

    HTML の <small> 要素は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 small から x-small のように、一段階小さいフォントでテキストが表示されます。

  19. Q&A答え:3

    スタイル情報要素 [Mozilla参照]

    HTML の <style> 要素は、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

  20. Q&A答え:2

    セキュリティホール [ウィキペディア参照]

    セキュリティホール(英: security hole)とは、情報セキュリティを脅かすような、コンピュータの欠陥をいう。脆弱性ともいう。

    セキュリティパッチ [Weblio辞書参照]

    セキュリティパッチとは、プログラムに脆弱性やセキュリティホールなどが発見された際に、それらの問題を修正するためのプログラムのことである。

  21. Q&A答え:2

    HTML文書 [ウィキペディア参照]

    HTMLで書かれた文書をHTML文書と言い、HTMLでは、まず文書型宣言を書く。文書型宣言が無いものは、HTMLの規格に従っているとはいえない。HTML5移行の規格における文書型宣言は以下のようなものである。

    <!DOCTYPE html>:文書型宣言
  22. Q&A答え:3

    画像埋め込み要素 [Mozilla参照]

    img 要素
    • src 属性は必須で、埋め込みたい画像へのパスを入れます。
    • alt 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。 — 画面リーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。
  23. Q&A答え:4

    GIF [Mozilla参照]

    GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIFは1ピクセル毎8ビットまでと、24ビットの色領域から最大256色まで扱えます。

    JPEG [Mozilla参照]

    JPEG (Joint Photographic Experts Group) とは、一般的に使われている、デジタル画像用の非可逆圧縮の方法です。

    PNG [Mozilla参照]

    PNG (Portable Network Graphics) は、可逆データ圧縮サポートする画像ファイル形式です。

  24. Q&A答え:4

    <input type="range"> [Mozilla参照]

    <input> 要素の range 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。

    range 入力欄がよく使用される場合の例をいくつか示します。
    ボリュームやバランス、フィルター制御のようなオーディオの制御。
    カラーチャネル、透過度、明るさなどの色の構成の制御。
    難易度、視点距離、ワールドサイズなどのゲームの構成の制御。
    パスワードマネージャーが生成するパスワードの長さ。
  25. Q&A答え:2

    ユーザーエクスペリエンス [ウィキペディア参照]

    人間は経験という概念を持っている。この経験のうち、製品・サービス・人工物などの独立したシステムを対象として、人間がユーザーとしてそれらに出会い利用した経験をユーザーエクスペリエンスという。例えばコンピュータゲームというシステムに対しAさんが「広告動画を見てワクワクし、友人の体験談で興奮し、ネットで購入し、夜通し遊んで熱中し、数年後にその思い出を振り返る」という体験はUXの1例である。

Δ

R02_3-3級_復習

Nu Html Checker