Webクリエイター能力認定試験は、CSSによるレイアウト指定を重視し、使いやすさに配慮した質の高いWebページ作成を目指した認定試験です。
今回は、Webクリエイター能力認定を取得するメリット、デメリットについて紹介していきます。

【Webクリエイター能力認定試験のおすすめ参考書・テキスト（独学勉強法/対策）】も確認する

メリット

誰でも受験できる

受験するために特別な条件はありません。そのため、意思があれば誰でも受験することが可能です。

レベル分けされている

スタンダードとエキスパートにレベル分けされているため、自分の知識レベルに合わせて受験することができます。特にスタンダードは、基礎的な内容であるため、初学者でも受験することができます。

ハードルが低い

Webデザイナーに関わる資格の中で、この資格はハードルの低いものの一つに数えられます。そのため、これから勉強を始める人にとってはちょうど良いレベルです。

デメリット

独学する際はソフトが必要

有料無料様々ありますが、学習を進めるには専用のソフトが必要になります。事前にパソコンに環境を構築する必要があります。

公式の参考書が必須

独学で勉強をする際に重要になるのが、公式のガイドブックです。勉強の基本的なことから学ぶことができます。

【Webクリエイター能力認定試験のおすすめ参考書・テキスト（独学勉強法/対策）】も確認する

Webクリエイター能力認定試験とは、Webクリエイターに必要とされる、Webサイト制作のデザイン能力、Webページのコーディング能力を認定する試験です。
受験資格に制限はありません。スタンダードとエキスパートの２級があり、いずれも実技試験があるのに加え、エキスパートでは知識問題も出題されます。

最新のWebクリエイター能力認定試験テキストを確認する
Amazon　 Rakuten

Webクリエイター能力認定試験の公式テキスト

公式ホームページから購入が可能です。
Webクリエイター能力認定試験公式HP

Webクリエイター能力認定試験のおすすめテキスト

１．「Webクリエイター能力認定試験（HTML5対応版）スタンダード 問題集」（サーティファイ）

Webクリエイター能力認定試験スタンダード問題集（HTML5対応）

筆者

出版社、出典:出版社HP

Amazon

Rakuten

サーティファイが主催するWebクリエイターに必要とされる、Webサイト制作のデザイン能力およびWebページのコーディング能力を認定する試験の対策問題集です。
スタンダード試験に対応した模擬試験問題(3回)とサンプル問題(1回)で構成されています。

２．「Webクリエイター能力認定試験（HTML5対応版）エキスパート 問題集」（サーティファイ）

webクリエイター能力認定試験 エキスパート問題集 HTML5対応 サーティファイ

株式会社サーティファイ (著)

出版社: 株式会社サーティファイ (2015)、出典:出版社HP

Amazon

Rakuten

サーティファイが主催するWebクリエイターに必要とされる、Webサイト制作のデザイン能力およびWebページのコーディング能力を認定する試験の対策問題集です。
エキスパート試験に対応した模擬試験問題(3回)とサンプル問題(1回)で構成されています。

３．「Webクリエイター能力認定試験　HTML5対応　スタンダード　公式テキスト」（富士通エフ・オー・エム株式会社）

Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/1/29)、出典:出版社HP

Amazon

Rakuten

本書は、「Webクリエイター能力認定試験 HTML5対応」の＜スタンダード＞に合格することを目的にした試験対策教材です。出題範囲をすべて網羅し、試験主催元のサーティファイの公式テキストとして認定されています。

４．「Webクリエイター能力認定試験　HTML5対応　エキスパート　公式テキスト」（富士通エフ・オー・エム株式会社）

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/3/18)、出典:出版社HP

Amazon

Rakuten

本書は、「Webクリエイター能力認定試験 HTML5対応」の＜エキスパート＞に合格することを目的にした試験対策教材です。出題範囲をすべて網羅し、試験主催元のサーティファイの公式テキストとして認定されています。

最新のWebクリエイター能力認定試験テキストを確認する
Amazon　 Rakuten

目次 – Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

はじめに

本書はサーティファイWeb利用・技術認定委員会主催『Webクリエイター能力認定試験HTML5対応エキスパート』の公式テキストです。もちろん、認定試験対策テキストではありますが、それ以上に、「なぜこういう書き方をするの?」「どうしてこれがうまくいくの?」と、みなさんが疑問を持ち、その答えを見つけていくプロセスを通じて、HTML、CSS、デザイン理論について、基本的な考え方がしっかり身に付くことに重点を置いて書きました。本書は全10章で構成されています。

–

第1章では、Webサイト制作に取り組むための基礎的な知識を紹介しています。
続く第2章から第8章まで、実際にWebサイトを制作しながら、HTMLやCSSをコーディングする技術を学びます。
第9章では、デザインの基礎知識を紹介します。レイアウトや色彩理論の基礎、使いやすさに焦点を当てた画面デザインの手法などを学びます。第10章には能力認定試験のサンプル問題とその解説を収録しています。
Webサイトはコーディングができれば完成するものではありません。サイトの価値を高めるには、全体の構成を練り、画面デザインを起こし、より多くの人に、的確に情報を伝えるための配慮が必要です。Webサイトを作り上げるための総合的な技術と知識を養いましょう。2014年10月28日、国際的なWeb技術標準化団体W3CがHTML5規格を勧告し、これからの標準技術として正式に公開しました。実は、HTMLの規格としては実に12年ぶりのバージョンアップです。

なんともゆっくりした動きのように感じますが、その一方でここ数年Web技術を取り巻く環境は大きく変わっています。スマートフォンやタブレットが普及するにつれ、Webサイトもこれらの端末に最適化することがなかば当たり前になりました。それと同時に、ブラウザーの進化に伴って、今まで使われてきた技術と、新しい技術の入れ替えが急速に進んでいます。新しい手法がどんどん取り入れられているだけでなく、ほんの数年前まで“常識”とされていたテクニックが、今ではすっかり使われなくなっている、などということもあります。しかし、変化の速いWeb業界で、はやりのテクニックばかり追いかけるのはあまり意味のないことだ、とわたしは考えています。新規格の策定に12年かかったことからも想像が付くかもしれませんが、土台となる基礎的な技術は、よく設計され、がっしりしていて、そうそう変わりません。
実践で重要になるのは、どんな場面にも対応できる応用力と、ジャンプして乗り越える創造力です。その力を支える、変わらない基礎知識や考え方を磨いてください。本書でそのお手伝いができることを願っています。

2015年3月
狩野祐東

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/3/18)、出典:出版社HP

Amazon

Rakuten

Contents

本書をご利用いただく前に
Webクリエイター能力認定試験とは?
Webクリエイター能力認定試験 HTML5対応　出題範囲

第1章 Webサイト・制作の基礎知識
1-1 Webサイトの基礎知識
Webページ、Webサイトとは
Webページが表示される仕組み
URLとドメイン
ブラウザーの種類
1-2 ページを構成するファイル
拡張子は必ず表示させておこう
Webページで使用するファイルの種類
1-3 Webページを作る手順
作成するサンプルサイトの構成と学習内容
ページレイアウトと各部の名称
サイトの作成手順
1-4 HTMLファイル、CSSファイル編集の基本操作
Windows 7/8/8.1の場合
Mac OS Xの場合

第2章 HTMLの基礎と応用
2-1 HTMLの基礎知識
HTMLはコンテンツを構造化するための言語
基本的なHTMLタグの書式と名称
空要素
コメント文
タグの親子関係
2-2 HTML5の特徴
セマンテック要素の追加
意味が変更されたタグ
廃止されたタグ・属性
書式が簡素化されたタグ
2-3 HTMLの記述法
HTML5で記述するときの注意
2-4 基本ページのHTMLを記述する
すべてのHTMLドキュメントに必要なタグを記述する
タイトルとCSSへのリンクを記述する
2-5内に各ページ共通のHTMLを記述する
ヘッダー領域のHTMLを記述する
2-6 ナビゲーション領域を作成する
ナビゲーション領域を作成する
2-7 パンくずリストを作成する
パンくずリストのHTMLを記述する
2-8 コンテンツ領域・メイン領域・サブ領域を作成する
コンテンツ領域を作成する
メイン領域を作成する
サブ領域を作成する
サブ領域にバナーを2つ追加する
バナーにリンクを張る
2-9 フッター領域を作成する
フッターのHTMLを記述する
コピーライトを追加する

第3章 CSSの基礎と応用
3-1 CSSの基礎知識
CSSはHTMLの表示を制御するための言語
CSSの基本的な仕組み
CSSの基本的な書式と各部の名称
コメント文
@ルール
読みやすいCSSの記述
3-2 セレクター
セレクターのパターン
3-3 CSSの使用・外部CSSファイルの読み込み
CSSを適用する3つの方法
HTMLタグにstyle属性を追加する
<style>タグを使用する
外部CSSファイルを読み込む①~@importルールを使用する~
外部CSSファイルを読み込む②~<link>タグを使用する~
3-4 各ページ共通のCSSを記述する
CSSファイルから別のCSSファイルを読み込む
3-5 背景色、テキスト色を指定する
ページ全体の背景色、テキスト色を指定する
ページ全体のフォントサイズと、行の高さを指定する
3-6 ボックスモデルを理解する
ウィンドウの中央に配置する
ロゴを中央に配置する
3-7 ナビゲーション領域のレイアウトを作成する
先頭の「・」を消す
ナビゲーションのリスト項目を一列に並べる
ナビゲーションの各リンクにCSSを適用する
ナビゲーションに背景画像を指定する
3- 8 2コラムレイアウトにする
メイン領域・サブ領域にCSSを適用する
フッター領域とコンテンツ領域の間に隙間を空ける
3.9 メイン領域にある見出しのCSSを調整する
マージン、パディング、フォントサイズを調整する
複数の背景画像を指定する
3-10 擬似クラスを使用する
バナーにロールオーバーのスタイルを設定する
3-11ページを複製する
各ページのHTMLファイルを作成する
3-12ページごとに少しだけ異なるCSSを適用する
各ページに固有のid属性を付ける
CSSシグネチャ
3-13 ナビゲーションのハイライトを作成する
擬似クラスとCSSシグネチャを利用したCSSを記述する

第4章 高度なリストのデザイン
4-1 トップページのタイトルを書き替える
タイトルを書き替える
4-2 スライドショーを組み込む
パンくずリストのタグを書き替える
4-3 メイン領域のHTMLを作成する
一部のタグを書き替える
お知らせの内容を追加する
日付の部分をタグで囲む
4-4 トップページのCSSを編集する
お知らせの箇条書きにCSSを適用する
日付を太字にする
4-5 スマートフォン向けのCSSを読み込む
画面サイズが小さいときはレイアウトを変更する
メディアクエリーを使って別のCSSファイルを読み込む

第5章 テキスト主体のページを作成
5-1 concept.htmlを作成する
<section>を2つ追加する
各セクションに画像を挿入する
5- 2画像にテキストを回り込ませる
画像にフロートを適用する
フロートを解除する
5-3不要なマージンをなくす
不要なマージンを0にする

第6章 テーブルとそのスタイル
6-1 タイトル、見出しを変更する
ページに合わせてタイトルと見出しを変更する
6-2 テーブルの基本的なHTMLを作成する
はじめに5行2列のテーブルを作成する
テーブルに2行追加して、一部の行を結合する
見出しに関連するセルの方向を指定する
scope属性
6-3 キャプションを追加する
テーブルにキャプションを追加する
6-4 テーブル行をグループ化する
ヘッダー行、ボディ行をグループ化する
6-5 テーブルのレイアウトを調整する
セルに罫線を引く
二重になっている罫線を1本にする
1行目のセルの幅を指定する
2行目以降のテキストを上端揃えにする
奇数行と偶数行で背景色を変える
キャプションのCSSを調整する

第7章 ギャラリーレイアウト
7- 1タイトルなどを書き替えて、段落を1つ追加する
タイトル、パンくずリスト、見出しを書き替える
7-2 画像とキャプションのセットを追加する
画像をキャプションのセットを追加する
<figure>をコピーして画像とキャプションのセットを2点追加する
あと3点の画像とキャプションを追加する
7-3 ギャラリーレイアウトを完成させる
すべての<figure>にフロートを適用して横に並べる
レイアウトの崩れを解消する
テキストと画像の間に余白を設ける

第8章 フォーム
8-1 「お問い合わせ」ページを作成する
フォームの基本
タイトル、パンくずリスト、見出しを書き替える
8-2 フォーム領域を作成する
フォーム領域を作成する
領域の内容を作成する
8-3 コントロールを追加する
名前が入力できるテキストフィールドを作成する
メールアドレスが入力できるテキストフィールドを作成する
ラジオボタンを作成する
テキストエリアを作成する
ラベルテキストとコントロールを関連付ける
送信ボタンを作成する
入力必須の項目に必須属性を追加する
8-4 設問ごとのマージンを調整する
段落のマージンを調整する
内容欄および送信ボタンの下マージンを調整する
8-5 コントロールのスタイルを調整する
テキストフィールドの幅を指定する
テキストエリアの幅と高さを大きくする

第9章 Webデザインの基礎知識
9-1 ビジュアルデザインの基礎
レイアウトの原則
グリッドシステム(グリッドデザイン)
9-2 シェイプとプロポーション
黄金比・白銀比
Webデザインへの応用
9-3タイポグラフィ
画像テキスト
カーニング・字送り・文字詰め
ジャンプ率
9-4 色彩の基礎知識
無彩色と有彩色
色の三属性
色相環
トーン
暖色と寒色
色の軽重
進出色と後退色
9-5 配色の基礎知識
色の組み合わせ
Webページの配色
9-6 画像加工の操作
トリミング
リサイズ
カラー補正
各種エフェクト
9-7 ユーザビリティ・アクセシビリティに配慮したWebデザイン
メタファーとアフォーダンス
文字色と背景色のコントラスト
リンクと通常のテキスト
色に左右されないデザイン

第10章 サンプル問題
10-1 知識問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
10-2 知識問題
デザインカンプ
問題1
問題2
10-3 知識問題 正答
10-4 実技問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
10-5実技問題
Webサイトの概要・仕様
作成するページの仕上り見本
問題1 基本ページの作成
問題2 トップページの作成
問題3 「結婚式場のコンセプト」ページの作成
問題4 「プランのご案内」ページの作成
問題5 「ブライダルフェア」ページの作成
問題6 「お問い合わせ」ページの作成
10-6 実技問題 採点基準
10-7 実技問題 正答例と解説

索引

本書をご利用いただく前に

○実習用データの使い方
本書で使用する実習用データは、FOM出版のホームページからダウンロードしたファイルを展開してご利用ください。
http://www.fom.fujitsu.com/goods/downloads/

■練習用データのダウンロードと展開
①ブラウザーを起動し、アドレスを入力してEnterキーを押します。
②「データダウンロード」のホームページが表示されます。
③「資格」の「Webクリエイター」をクリックします。
④「エキスパート」にある「Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト」の「ファイル名」の「fpt1418.zip」を右クリックします。
⑤ポップアップメニューから[対象をファイルに保存]を選択します。
⑥「名前を付けて保存」ダイアログボックスが表示されます。
⑦保存する場所を選択し、[保存]をクリックします。
⑧ファイルを保存した場所を開きます。
⑨ファイル「fpt1418.zip」を右クリックします。
⑩[すべて展開]を選択します。
⑪展開する場所を確認し、[展開]をクリックします。
⑫ファイルが解凍され、「webcre-expert」フォルダーが作成されます。
※Mac OS Xを使用している場合は、④の「fpt1418.zip」をcontrolキー+クリックして、コンテクストメニューの[リンク先のファイルをダウンロード]を選択します。「ダウンロード」フォルダーに保存されたファイルをダブルクリックして展開します。

■練習用データ利用時の注意事項
練習用データを開くと、ダウンロードしたファイルが安全かどうかを確認するメッセージが表示される場合があります。練習用データは安全なので、「編集を有効にする」をクリックして、ファイルを編集可能な状態にしてください。

■実習用データの使い方
「webcre-expert」フォルダーの中には、さらに次のフォルダーが含まれています。

・「start」フォルダー
実習をはじめから通して行うときは、このフォルダーに含まれるindex.html、style.CSSなどのファイルをテキストエディター、またはwebページ作成ソフトで開き、各節で紹介している手順でHTMLタグやCSSを入力しましょう。
・「complete」フォルダー
実習が終了したときの完成例を確認したいときは、このフォルダーを開きましょう。
・「section」フォルダー
途中の前から始められるように、節ごとの実習用データが収められています「section」フォルダー内の各節番号のフォルダーを探して、その中のファイルを使って作業しましょう。
・「sample」フォルダー
本書の中で、実習には含まれない、応用的な内容を取り上げたサンプルファイルを紹介しているところがあります。サンプルファイルは「sample」フォルダーに含まれているので、その中から該当するファイルを探して確認しましょう。

○凡例
解説: 用字用語や基本的な操作などを解説しています。
One Point: HTMLタグやCSSを記述する際の応用テクニックを紹介しています。
Accessibility Note: Webサイト制作にかかせないアクセシビリティについての知識をまとめています。
Design Note: Webサイト制作に必要なデザインの知識をまとめています。

Webクリエイター能力認定試験とは?

○Webクリエイター能力認定試験の概要
Webクリエイター能力認定試験は、Webクリエイターに必要とされる、Webサイト制作のデザイン知識およびWebページのコーディング能力を測定・評価する認定試験です。
エキスパートとスタンダードといった難易度に応じた級種を選択することで、現役のWebクリーはもちろんのこと、Webデザイナー、Webディレクター、Webプログラマー、それらを目指す学校・教育機関で学習されている方など、Webに関わる全ての方々を対象としています。
最新の試験の詳細や受験方法、受験料などの情報は、Webクリエイター能力認定試験オフィシャイトにてご確認ください。
http://www.sikaku.gr.jp/web/wc/

■主催・認定
サーティファイWeb利用・技術認定委員会

■認定基準
・エキスパート…レイアウト手法や色彩設計等、ユーザビリティやアクセシビリティを考慮したWebデザインを表現することができる。
また、スクリプトを用いた動きのあるWebページの表示、マルチデバイス対応、新規Webサイトを構築することができる。
・スタンダード…セマンテックWebを理解し、HTML5をマークアップすることができる。
また、CSSを用いてHTMLの構造を維持しつつ、Webページのデザインやレイアウトを表現することができる。

■受験資格
学歴、年齢等に制限はありません。

■合格基準
エキスパート…知識問題と実技問題の合計得点において得点率65%以上。
スタンダード…実技問題の得点において得点率65%以上。

■試験時間

※サーティファイWeb利用・技術認定委員会では、メモ帳(Windows)とテキストエディット(Mac OS)のみを「テキストエディター」として認めています。その他のソフトウェアを使用する場合は、「Webページ作成ソフト」による受験となります。

■出題形式

※受験時に参考資料として利用できる簡易リファレンス「受験者用リファレンス」が提供されます。

■対応ブラウザー

※OSのバージョン対応は各ブラウザーの動作環境に準ずる。

Webクリエイター能力認定試験 HTML5対応 出題範囲

最新の出題範囲はサーティファイホームページをご覧ください。

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/3/18)、出典:出版社HP

Amazon

Rakuten

目次 – Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

本書の解説環境(試験の対応環境)

●Windows
・Windows 7、8、8.1
・Internet Explorer 10、Internet Explorer 11、Chrome(最新版)、Firefox(最新版)

●Mac OS
・Mac OS X
・Safari6、Safari7、Chrome(最新版)、Firefox(最新版)

・本書に記載された内容は、情報の提供のみを目的としております。したがって、本書を用いての運用はすべてお客様自身の責任と判断において行ってください。

・本書の制作にあたっては正確な記述につとめましたが、著者や出版社のいずれも、本書の内容に関してなんらかの保証をするものではなく、内容に関するいかなる運用結果についてもいっさいの責任を負いません。あらかじめご了承ください。

・本書に掲載している画面イメージなどは、特定の設定に基づいた環境にて再現される一例です。ハードウェアやソフトウェアの環境によっては、必ずしも本書通りの画面にならないことがあります。あらかじめご了承ください。

・本書は2014年12月段階での情報に基づいて執筆されています。本書に登場するソフトウェアのバージョン、URL、製品のスペックなどの情報は、すべてその原執筆時点でのものです。執筆以降に変更されている可能性がありますので、ご了承ください。

・本書中に登場する会社名および製品名は、該当する各社の商標または登録商標です。本書では©️およびTMマークは省略させていただいております。

はじめに

2014年10月28日、国際的なWeb技術標準化団体W3Cが、HTML5の規格を勧告しました。勧告とは、W3Cの「正式決定」という意味です。前バージョンであるXHTML1.0(第2版)が勧告されたのが2002年なので、HTMLの規格としては実に12年ぶりのバージョンアップです。

HTML5になって、以前のHTML4.01やXHTML1.0に比べて大幅に機能が強化されています。HTMLタグの数が増えて、ページの内容をより的確に意味付けできるようになったり、フォーム機能が拡充されたりしています。これからのWebサイト制作には、HTML5が当たり前に使われるようになりますし、もうすでにそうなってきています。

HTMLの新規格が登場するのと歩調を合わせるかのように、Webサイトの閲覧環境もPCからスマートフォンへと急速に移りつつあります。Webデザイン、Webサイト制作も日々変化している最中で、これまでの常識を見直さなければならない、過渡期的な状況にあると言えます。

……というふうに書いてしまうと、HTML5が何やら難しそうで、今が大変な時代で、やらなければいけないことが山のように待っていると感じるかもしれません。「ぜんぜんそんなことない」とは言いませんが、Webサイトを作るために必要なHTMLとCSSの基礎知識をしっかり身に付けておけば、HTML5の新機能はすんなり頭に入ってくるはずです。

本書「Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト」は、実際に作業をして試しながら、Webサイト制作に欠かせないHTMLおよびCSSの基本を習得できるように作られています。基礎的なWebサイトの制作技法をしっかりマスターして、その先の応用につなげましょう。

これからWebサイト制作のプロを目指す方、企業のWeb担当者の方、知識をアップデートしたい方など、HTML5の基礎知識を必要としている方々におすすめします。本書で学んだ内容を土台にして、新しい技術を吸収し、新しいアイディアを生み出していく、皆さんのお役に立てることを願っています。

2015年2月
狩野祐東

Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

富士通エフ・オー・エム(FOM出版)、出典:出版社HP

Amazon

Rakuten

Contents

本書をご利用いただく前に
Webクリエイター能力認定試験とは?
Webクリエイター能力認定試験 HTML5対応 出題範囲

第1章 Webサイト・制作の基礎知識
1-1 Webサイトの基礎知識
Webページ、Webサイトとは
Webページが表示される仕組み
URLとドメイン
ブラウザーの種類
1-2 ページを構成するファイル
拡張子は必ず表示させておこう
Webページで使用するファイルの種類
1-3 Webページを作る手順
作成するサンプルサイトの構成と学習内容
ページレイアウトと各部の名称
サイトの作成手順
1-4 HTMLファイル、CSSファイル編集の基本操作
Windows 8/8.1の場合
Mac OS Xの場合

第2章 HTMLの基礎
2-1 HTMLの基礎知識
HTMLはコンテンツを構造化するための言語
基本的なHTMLタグの書式と名称
空要素
コメント文
タグの親子関係
2-2 HTML5の特徴
セマンティクス要素の追加
意味が変更されたタグ
廃止されたタグ・属性
書式が簡素化されたタグ
2-3 HTMLの記述法
HTML5で記述するときの注意
2-4トップページのHTMLを作成する。
文書型宣言
文字エンコード方式
外部CSSファイルの読み込み
<div>よりも具体的な意味を持つタグ
意味が変更されたタグ

第3章 CSSの基礎
3-1 CSSの基礎知識
CSSはHTMLの表示を制御するための言語
CSSの基本的な仕組み
CSSの基本的な書式と各部の名称
コメント文
＠ルール
読みやすいCSSの記法
3-2 セレクター
セレクターのパターン
3-3 CSSの使用・外部CSSファイルの読み込み
CSSを適用する3つの方法
HTMLタグにstyle属性を追加する
<style>タグを使用する
外部CSSファイルを読み込む①~<link>タグを使用する
外部CSSファイルを読み込む②~@importルールを使用する~
3-4トップページのCSSを作成する
セレクターを変更する
ナビゲーション領域にロールオーバーのスタイルを設定する
フォントサイズを変更する

第4章 各ページの作成
4-1 「施設のご案内」ページ作成の準備をする
トップページを複製する
4-2各ページに共通する部分のHTMLを作成する
タイトルを編集する
ロゴにリンクを設定する
メインに基本のHTMLを記述する
ファイルを複製してほかのページを用意する
4-3 各ページに共通する部分のCSSを作成する
メインの見出しに背景画像を表示させる
背景画像の繰り返しを制御する
パディングを調整する
マージンを調整する
マージン、パディングのショートハンドを使って書き直す
フォントサイズを調整する
4-4 テキストと画像が含まれたメイン領域を作成する
テキストを挿入する
4-5箇条書きを追加する
箇条書きを3項目追加する
4-6画像を挿入する
最初の段落に<img>タグを挿入する
class属性を追加する
4-7 CSSを編集して画像にテキストを回り込ませる
floatプロパティを使用する
4-8箇条書きの前で回り込みを解除する
floatを解除する
4-9箇条書きのスタイルを変更する
箇条書きのマークを変更する

第5章 テーブルとそのスタイル
5-1「料金プラン」ページを作成する
ページのタイトルと見出しを書き替える
5-2 テーブルを作成する
基本的なテーブルを作成する
確認のためborder属性を追加する
見出しに関するセルを指定する
セルを結合する
テーブルに1行追加する
一部のセルに属性を追加する
5-3 テーブルのCSSを編集する
テーブル全体のCSSを記述する
キャプションを揃えにする
セルに事線を引く」
見出しセルに背景色を付ける
「全額」列のセルだけ幅を小さくする
「全額」列のデータセルだけテキストを右揃えにする

第6章 フォーム
6-1「ご意見・ご要望」ページを作成する
ページのタイトルと見出しを書き替える
6-2 フォーム領域を作成する
フォームの基本
フォーム領域を作成する
6-3 コントロールを作成する
テキストフィールドを作成する
ラベルテキストとコントロールを関連づける
テキストエリアを作成する
送信ボタンを作成する
6-4 フォーム領域のCSSを編集する
<form>のスタイルを編集してページのレイアウトを整える
6-5 各種コントロールのスタイルを調整する
テキストフィールド、テキストエリアのボーダーラインを変更する
テキストフィールドのサイズを調整する
テキストエリアのサイズを調整する

第7章 サンプル問題
7-1 実技問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
7-2実技問題
Webサイトの概要・仕様
作成するページの仕上がり見本
問題1 トップページと基本レイアウトの作成
問題2各ページのフォーマットの複製
問題3「施設のご案内」ページの作成
問題4「料金プラン」ページの作成
問題5「ご意見・ご要望」ページの作成
7-3 実技問題 採点基準.
7-4 実技問題 正答例と解説

索引

本書をご利用いただく前に

実習用データの使い方
本書で使用する実習用データは、FOM出版のホームページからダウンロードしたファイルを展開してご利用ください。
http://www.fom.fujitsu.com/goods/downloads/

■練習用データのダウンロードと展開
①ブラウザーを起動し、アドレスを入力してEnterキーを押します。
②「データダウンロード」のホームページが表示されます。
③「資格」の「Webクリエイター」をクリックします。
④「スタンダード」にある「Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト」の「ファイル名」の「fpt1417.zip」を右クリックします。
⑤ポップアップメニューから[対象をファイルに保存]を選択します。
⑥「名前を付けて保存」ダイアログボックスが表示されます。
⑦保存する場所を選択し、[保存]をクリックします。
⑧ファイルを保存した場所を開きます。
⑨ファイル「tpt1417.zip」を右クリックします。
⑩[すべて展開]を選択します。
⑪展開する場所を確認し、[展開]をクリックします。
⑫ファイルが解凍され、「webcre-standard」フォルダーが作成されます。
※MacOSXを使用している場合は、④の「fpt1417.zip」を「controlキー+クリックして、コンテクストメニューの[リンク先のファイルをダウンロード]を選択します。「ダウンロード」フォルダーに保存されたファイルをダブルクリックして展開します。

■練習用データ利用時の注意事項
練習用データを開くと、ダウンロードしたファイルが安全かどうかを確認するメッセージが表示される場合があります。練習用データは安全なので、「編集を有効にする」をクリックして、ファイルを編集可能な状態にしてください。

Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

富士通エフ・オー・エム(FOM出版)、出典:出版社HP

Amazon

Rakuten

本書の解説環境(試験の対応環境)

●Windows
・Windows 7、8、8.1
・Internet Explorer 10、Internet Explorer 11、Chrome(最新版)、Firefox(最新版)

●Mac OS
・Mac OS X
・Safari6、Safari7、Chrome(最新版)、Firefox(最新版)

・本書に記載された内容は、情報の提供のみを目的としております。したがって、本書を用いての運用はすべてお客様自身の責任と判断において行ってください。

・本書の制作にあたっては正確な記述につとめましたが、著者や出版社のいずれも、本書の内容に関してなんらかの保証をするものではなく、内容に関するいかなる運用結果についてもいっさいの責任を負いません。あらかじめご了承ください。

・本書に掲載している画面イメージなどは、特定の設定に基づいた環境にて再現される一例です。ハードウェアやソフトウェアの環境によっては、必ずしも本書通りの画面にならないことがあります。あらかじめご了承ください。

・本書は2014年12月段階での情報に基づいて執筆されています。本書に登場するソフトウェアのバージョン、URL、製品のスペックなどの情報は、すべてその原執筆時点でのものです。執筆以降に変更されている可能性がありますので、ご了承ください。

・本書中に登場する会社名および製品名は、該当する各社の商標または登録商標です。本書では©️およびTMマークは省略させていただいております。

はじめに

2014年10月28日、国際的なWeb技術標準化団体W3Cが、HTML5の規格を勧告しました。勧告とは、W3Cの「正式決定」という意味です。前バージョンであるXHTML1.0(第2版)が勧告されたのが2002年なので、HTMLの規格としては実に12年ぶりのバージョンアップです。

HTML5になって、以前のHTML4.01やXHTML1.0に比べて大幅に機能が強化されています。HTMLタグの数が増えて、ページの内容をより的確に意味付けできるようになったり、フォーム機能が拡充されたりしています。これからのWebサイト制作には、HTML5が当たり前に使われるようになりますし、もうすでにそうなってきています。

HTMLの新規格が登場するのと歩調を合わせるかのように、Webサイトの閲覧環境もPCからスマートフォンへと急速に移りつつあります。Webデザイン、Webサイト制作も日々変化している最中で、これまでの常識を見直さなければならない、過渡期的な状況にあると言えます。

……というふうに書いてしまうと、HTML5が何やら難しそうで、今が大変な時代で、やらなければいけないことが山のように待っていると感じるかもしれません。「ぜんぜんそんなことない」とは言いませんが、Webサイトを作るために必要なHTMLとCSSの基礎知識をしっかり身に付けておけば、HTML5の新機能はすんなり頭に入ってくるはずです。

本書「Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト」は、実際に作業をして試しながら、Webサイト制作に欠かせないHTMLおよびCSSの基本を習得できるように作られています。基礎的なWebサイトの制作技法をしっかりマスターして、その先の応用につなげましょう。

これからWebサイト制作のプロを目指す方、企業のWeb担当者の方、知識をアップデートしたい方など、HTML5の基礎知識を必要としている方々におすすめします。本書で学んだ内容を土台にして、新しい技術を吸収し、新しいアイディアを生み出していく、皆さんのお役に立てることを願っています。

2015年2月
狩野祐東

Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

富士通エフ・オー・エム(FOM出版)、出典:出版社HP

Amazon

Rakuten

Contents

本書をご利用いただく前に
Webクリエイター能力認定試験とは?
Webクリエイター能力認定試験 HTML5対応 出題範囲

第1章 Webサイト・制作の基礎知識
1-1 Webサイトの基礎知識
Webページ、Webサイトとは
Webページが表示される仕組み
URLとドメイン
ブラウザーの種類
1-2 ページを構成するファイル
拡張子は必ず表示させておこう
Webページで使用するファイルの種類
1-3 Webページを作る手順
作成するサンプルサイトの構成と学習内容
ページレイアウトと各部の名称
サイトの作成手順
1-4 HTMLファイル、CSSファイル編集の基本操作
Windows 8/8.1の場合
Mac OS Xの場合

第2章 HTMLの基礎
2-1 HTMLの基礎知識
HTMLはコンテンツを構造化するための言語
基本的なHTMLタグの書式と名称
空要素
コメント文
タグの親子関係
2-2 HTML5の特徴
セマンティクス要素の追加
意味が変更されたタグ
廃止されたタグ・属性
書式が簡素化されたタグ
2-3 HTMLの記述法
HTML5で記述するときの注意
2-4トップページのHTMLを作成する。
文書型宣言
文字エンコード方式
外部CSSファイルの読み込み
<div>よりも具体的な意味を持つタグ
意味が変更されたタグ

第3章 CSSの基礎
3-1 CSSの基礎知識
CSSはHTMLの表示を制御するための言語
CSSの基本的な仕組み
CSSの基本的な書式と各部の名称
コメント文
＠ルール
読みやすいCSSの記法
3-2 セレクター
セレクターのパターン
3-3 CSSの使用・外部CSSファイルの読み込み
CSSを適用する3つの方法
HTMLタグにstyle属性を追加する
<style>タグを使用する
外部CSSファイルを読み込む①~<link>タグを使用する
外部CSSファイルを読み込む②~@importルールを使用する~
3-4トップページのCSSを作成する
セレクターを変更する
ナビゲーション領域にロールオーバーのスタイルを設定する
フォントサイズを変更する

第4章 各ページの作成
4-1 「施設のご案内」ページ作成の準備をする
トップページを複製する
4-2各ページに共通する部分のHTMLを作成する
タイトルを編集する
ロゴにリンクを設定する
メインに基本のHTMLを記述する
ファイルを複製してほかのページを用意する
4-3 各ページに共通する部分のCSSを作成する
メインの見出しに背景画像を表示させる
背景画像の繰り返しを制御する
パディングを調整する
マージンを調整する
マージン、パディングのショートハンドを使って書き直す
フォントサイズを調整する
4-4 テキストと画像が含まれたメイン領域を作成する
テキストを挿入する
4-5箇条書きを追加する
箇条書きを3項目追加する
4-6画像を挿入する
最初の段落に<img>タグを挿入する
class属性を追加する
4-7 CSSを編集して画像にテキストを回り込ませる
floatプロパティを使用する
4-8箇条書きの前で回り込みを解除する
floatを解除する
4-9箇条書きのスタイルを変更する
箇条書きのマークを変更する

第5章 テーブルとそのスタイル
5-1「料金プラン」ページを作成する
ページのタイトルと見出しを書き替える
5-2 テーブルを作成する
基本的なテーブルを作成する
確認のためborder属性を追加する
見出しに関するセルを指定する
セルを結合する
テーブルに1行追加する
一部のセルに属性を追加する
5-3 テーブルのCSSを編集する
テーブル全体のCSSを記述する
キャプションを揃えにする
セルに事線を引く」
見出しセルに背景色を付ける
「全額」列のセルだけ幅を小さくする
「全額」列のデータセルだけテキストを右揃えにする

第6章 フォーム
6-1「ご意見・ご要望」ページを作成する
ページのタイトルと見出しを書き替える
6-2 フォーム領域を作成する
フォームの基本
フォーム領域を作成する
6-3 コントロールを作成する
テキストフィールドを作成する
ラベルテキストとコントロールを関連づける
テキストエリアを作成する
送信ボタンを作成する
6-4 フォーム領域のCSSを編集する
<form>のスタイルを編集してページのレイアウトを整える
6-5 各種コントロールのスタイルを調整する
テキストフィールド、テキストエリアのボーダーラインを変更する
テキストフィールドのサイズを調整する
テキストエリアのサイズを調整する

第7章 サンプル問題
7-1 実技問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
7-2実技問題
Webサイトの概要・仕様
作成するページの仕上がり見本
問題1 トップページと基本レイアウトの作成
問題2各ページのフォーマットの複製
問題3「施設のご案内」ページの作成
問題4「料金プラン」ページの作成
問題5「ご意見・ご要望」ページの作成
7-3 実技問題 採点基準.
7-4 実技問題 正答例と解説

索引

本書をご利用いただく前に

実習用データの使い方
本書で使用する実習用データは、FOM出版のホームページからダウンロードしたファイルを展開してご利用ください。
http://www.fom.fujitsu.com/goods/downloads/

■練習用データのダウンロードと展開
①ブラウザーを起動し、アドレスを入力してEnterキーを押します。
②「データダウンロード」のホームページが表示されます。
③「資格」の「Webクリエイター」をクリックします。
④「スタンダード」にある「Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト」の「ファイル名」の「fpt1417.zip」を右クリックします。
⑤ポップアップメニューから[対象をファイルに保存]を選択します。
⑥「名前を付けて保存」ダイアログボックスが表示されます。
⑦保存する場所を選択し、[保存]をクリックします。
⑧ファイルを保存した場所を開きます。
⑨ファイル「tpt1417.zip」を右クリックします。
⑩[すべて展開]を選択します。
⑪展開する場所を確認し、[展開]をクリックします。
⑫ファイルが解凍され、「webcre-standard」フォルダーが作成されます。
※MacOSXを使用している場合は、④の「fpt1417.zip」を「controlキー+クリックして、コンテクストメニューの[リンク先のファイルをダウンロード]を選択します。「ダウンロード」フォルダーに保存されたファイルをダブルクリックして展開します。

■練習用データ利用時の注意事項
練習用データを開くと、ダウンロードしたファイルが安全かどうかを確認するメッセージが表示される場合があります。練習用データは安全なので、「編集を有効にする」をクリックして、ファイルを編集可能な状態にしてください。

Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

富士通エフ・オー・エム(FOM出版)、出典:出版社HP

Amazon

Rakuten

はじめに

本書はサーティファイWeb利用・技術認定委員会主催『Webクリエイター能力認定試験HTML5対応エキスパート』の公式テキストです。もちろん、認定試験対策テキストではありますが、それ以上に、「なぜこういう書き方をするの?」「どうしてこれがうまくいくの?」と、みなさんが疑問を持ち、その答えを見つけていくプロセスを通じて、HTML、CSS、デザイン理論について、基本的な考え方がしっかり身に付くことに重点を置いて書きました。本書は全10章で構成されています。

–

第1章では、Webサイト制作に取り組むための基礎的な知識を紹介しています。
続く第2章から第8章まで、実際にWebサイトを制作しながら、HTMLやCSSをコーディングする技術を学びます。
第9章では、デザインの基礎知識を紹介します。レイアウトや色彩理論の基礎、使いやすさに焦点を当てた画面デザインの手法などを学びます。第10章には能力認定試験のサンプル問題とその解説を収録しています。
Webサイトはコーディングができれば完成するものではありません。サイトの価値を高めるには、全体の構成を練り、画面デザインを起こし、より多くの人に、的確に情報を伝えるための配慮が必要です。Webサイトを作り上げるための総合的な技術と知識を養いましょう。2014年10月28日、国際的なWeb技術標準化団体W3CがHTML5規格を勧告し、これからの標準技術として正式に公開しました。実は、HTMLの規格としては実に12年ぶりのバージョンアップです。

なんともゆっくりした動きのように感じますが、その一方でここ数年Web技術を取り巻く環境は大きく変わっています。スマートフォンやタブレットが普及するにつれ、Webサイトもこれらの端末に最適化することがなかば当たり前になりました。それと同時に、ブラウザーの進化に伴って、今まで使われてきた技術と、新しい技術の入れ替えが急速に進んでいます。新しい手法がどんどん取り入れられているだけでなく、ほんの数年前まで“常識”とされていたテクニックが、今ではすっかり使われなくなっている、などということもあります。しかし、変化の速いWeb業界で、はやりのテクニックばかり追いかけるのはあまり意味のないことだ、とわたしは考えています。新規格の策定に12年かかったことからも想像が付くかもしれませんが、土台となる基礎的な技術は、よく設計され、がっしりしていて、そうそう変わりません。
実践で重要になるのは、どんな場面にも対応できる応用力と、ジャンプして乗り越える創造力です。その力を支える、変わらない基礎知識や考え方を磨いてください。本書でそのお手伝いができることを願っています。

2015年3月
狩野祐東

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/3/18)、出典:出版社HP

Amazon

Rakuten

Contents

本書をご利用いただく前に
Webクリエイター能力認定試験とは?
Webクリエイター能力認定試験 HTML5対応　出題範囲

第1章 Webサイト・制作の基礎知識
1-1 Webサイトの基礎知識
Webページ、Webサイトとは
Webページが表示される仕組み
URLとドメイン
ブラウザーの種類
1-2 ページを構成するファイル
拡張子は必ず表示させておこう
Webページで使用するファイルの種類
1-3 Webページを作る手順
作成するサンプルサイトの構成と学習内容
ページレイアウトと各部の名称
サイトの作成手順
1-4 HTMLファイル、CSSファイル編集の基本操作
Windows 7/8/8.1の場合
Mac OS Xの場合

第2章 HTMLの基礎と応用
2-1 HTMLの基礎知識
HTMLはコンテンツを構造化するための言語
基本的なHTMLタグの書式と名称
空要素
コメント文
タグの親子関係
2-2 HTML5の特徴
セマンテック要素の追加
意味が変更されたタグ
廃止されたタグ・属性
書式が簡素化されたタグ
2-3 HTMLの記述法
HTML5で記述するときの注意
2-4 基本ページのHTMLを記述する
すべてのHTMLドキュメントに必要なタグを記述する
タイトルとCSSへのリンクを記述する
2-5内に各ページ共通のHTMLを記述する
ヘッダー領域のHTMLを記述する
2-6 ナビゲーション領域を作成する
ナビゲーション領域を作成する
2-7 パンくずリストを作成する
パンくずリストのHTMLを記述する
2-8 コンテンツ領域・メイン領域・サブ領域を作成する
コンテンツ領域を作成する
メイン領域を作成する
サブ領域を作成する
サブ領域にバナーを2つ追加する
バナーにリンクを張る
2-9 フッター領域を作成する
フッターのHTMLを記述する
コピーライトを追加する

第3章 CSSの基礎と応用
3-1 CSSの基礎知識
CSSはHTMLの表示を制御するための言語
CSSの基本的な仕組み
CSSの基本的な書式と各部の名称
コメント文
@ルール
読みやすいCSSの記述
3-2 セレクター
セレクターのパターン
3-3 CSSの使用・外部CSSファイルの読み込み
CSSを適用する3つの方法
HTMLタグにstyle属性を追加する
<style>タグを使用する
外部CSSファイルを読み込む①~@importルールを使用する~
外部CSSファイルを読み込む②~<link>タグを使用する~
3-4 各ページ共通のCSSを記述する
CSSファイルから別のCSSファイルを読み込む
3-5 背景色、テキスト色を指定する
ページ全体の背景色、テキスト色を指定する
ページ全体のフォントサイズと、行の高さを指定する
3-6 ボックスモデルを理解する
ウィンドウの中央に配置する
ロゴを中央に配置する
3-7 ナビゲーション領域のレイアウトを作成する
先頭の「・」を消す
ナビゲーションのリスト項目を一列に並べる
ナビゲーションの各リンクにCSSを適用する
ナビゲーションに背景画像を指定する
3- 8 2コラムレイアウトにする
メイン領域・サブ領域にCSSを適用する
フッター領域とコンテンツ領域の間に隙間を空ける
3.9 メイン領域にある見出しのCSSを調整する
マージン、パディング、フォントサイズを調整する
複数の背景画像を指定する
3-10 擬似クラスを使用する
バナーにロールオーバーのスタイルを設定する
3-11ページを複製する
各ページのHTMLファイルを作成する
3-12ページごとに少しだけ異なるCSSを適用する
各ページに固有のid属性を付ける
CSSシグネチャ
3-13 ナビゲーションのハイライトを作成する
擬似クラスとCSSシグネチャを利用したCSSを記述する

第4章 高度なリストのデザイン
4-1 トップページのタイトルを書き替える
タイトルを書き替える
4-2 スライドショーを組み込む
パンくずリストのタグを書き替える
4-3 メイン領域のHTMLを作成する
一部のタグを書き替える
お知らせの内容を追加する
日付の部分をタグで囲む
4-4 トップページのCSSを編集する
お知らせの箇条書きにCSSを適用する
日付を太字にする
4-5 スマートフォン向けのCSSを読み込む
画面サイズが小さいときはレイアウトを変更する
メディアクエリーを使って別のCSSファイルを読み込む

第5章 テキスト主体のページを作成
5-1 concept.htmlを作成する
<section>を2つ追加する
各セクションに画像を挿入する
5- 2画像にテキストを回り込ませる
画像にフロートを適用する
フロートを解除する
5-3不要なマージンをなくす
不要なマージンを0にする

第6章 テーブルとそのスタイル
6-1 タイトル、見出しを変更する
ページに合わせてタイトルと見出しを変更する
6-2 テーブルの基本的なHTMLを作成する
はじめに5行2列のテーブルを作成する
テーブルに2行追加して、一部の行を結合する
見出しに関連するセルの方向を指定する
scope属性
6-3 キャプションを追加する
テーブルにキャプションを追加する
6-4 テーブル行をグループ化する
ヘッダー行、ボディ行をグループ化する
6-5 テーブルのレイアウトを調整する
セルに罫線を引く
二重になっている罫線を1本にする
1行目のセルの幅を指定する
2行目以降のテキストを上端揃えにする
奇数行と偶数行で背景色を変える
キャプションのCSSを調整する

第7章 ギャラリーレイアウト
7- 1タイトルなどを書き替えて、段落を1つ追加する
タイトル、パンくずリスト、見出しを書き替える
7-2 画像とキャプションのセットを追加する
画像をキャプションのセットを追加する
<figure>をコピーして画像とキャプションのセットを2点追加する
あと3点の画像とキャプションを追加する
7-3 ギャラリーレイアウトを完成させる
すべての<figure>にフロートを適用して横に並べる
レイアウトの崩れを解消する
テキストと画像の間に余白を設ける

第8章 フォーム
8-1 「お問い合わせ」ページを作成する
フォームの基本
タイトル、パンくずリスト、見出しを書き替える
8-2 フォーム領域を作成する
フォーム領域を作成する
領域の内容を作成する
8-3 コントロールを追加する
名前が入力できるテキストフィールドを作成する
メールアドレスが入力できるテキストフィールドを作成する
ラジオボタンを作成する
テキストエリアを作成する
ラベルテキストとコントロールを関連付ける
送信ボタンを作成する
入力必須の項目に必須属性を追加する
8-4 設問ごとのマージンを調整する
段落のマージンを調整する
内容欄および送信ボタンの下マージンを調整する
8-5 コントロールのスタイルを調整する
テキストフィールドの幅を指定する
テキストエリアの幅と高さを大きくする

第9章 Webデザインの基礎知識
9-1 ビジュアルデザインの基礎
レイアウトの原則
グリッドシステム(グリッドデザイン)
9-2 シェイプとプロポーション
黄金比・白銀比
Webデザインへの応用
9-3タイポグラフィ
画像テキスト
カーニング・字送り・文字詰め
ジャンプ率
9-4 色彩の基礎知識
無彩色と有彩色
色の三属性
色相環
トーン
暖色と寒色
色の軽重
進出色と後退色
9-5 配色の基礎知識
色の組み合わせ
Webページの配色
9-6 画像加工の操作
トリミング
リサイズ
カラー補正
各種エフェクト
9-7 ユーザビリティ・アクセシビリティに配慮したWebデザイン
メタファーとアフォーダンス
文字色と背景色のコントラスト
リンクと通常のテキスト
色に左右されないデザイン

第10章 サンプル問題
10-1 知識問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
10-2 知識問題
デザインカンプ
問題1
問題2
10-3 知識問題 正答
10-4 実技問題 確認事項
注意事項
推奨画面レイアウト
画面操作説明
10-5実技問題
Webサイトの概要・仕様
作成するページの仕上り見本
問題1 基本ページの作成
問題2 トップページの作成
問題3 「結婚式場のコンセプト」ページの作成
問題4 「プランのご案内」ページの作成
問題5 「ブライダルフェア」ページの作成
問題6 「お問い合わせ」ページの作成
10-6 実技問題 採点基準
10-7 実技問題 正答例と解説

索引

本書をご利用いただく前に

○実習用データの使い方
本書で使用する実習用データは、FOM出版のホームページからダウンロードしたファイルを展開してご利用ください。
http://www.fom.fujitsu.com/goods/downloads/

■練習用データのダウンロードと展開
①ブラウザーを起動し、アドレスを入力してEnterキーを押します。
②「データダウンロード」のホームページが表示されます。
③「資格」の「Webクリエイター」をクリックします。
④「エキスパート」にある「Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト」の「ファイル名」の「fpt1418.zip」を右クリックします。
⑤ポップアップメニューから[対象をファイルに保存]を選択します。
⑥「名前を付けて保存」ダイアログボックスが表示されます。
⑦保存する場所を選択し、[保存]をクリックします。
⑧ファイルを保存した場所を開きます。
⑨ファイル「fpt1418.zip」を右クリックします。
⑩[すべて展開]を選択します。
⑪展開する場所を確認し、[展開]をクリックします。
⑫ファイルが解凍され、「webcre-expert」フォルダーが作成されます。
※Mac OS Xを使用している場合は、④の「fpt1418.zip」をcontrolキー+クリックして、コンテクストメニューの[リンク先のファイルをダウンロード]を選択します。「ダウンロード」フォルダーに保存されたファイルをダブルクリックして展開します。

■練習用データ利用時の注意事項
練習用データを開くと、ダウンロードしたファイルが安全かどうかを確認するメッセージが表示される場合があります。練習用データは安全なので、「編集を有効にする」をクリックして、ファイルを編集可能な状態にしてください。

■実習用データの使い方
「webcre-expert」フォルダーの中には、さらに次のフォルダーが含まれています。

・「start」フォルダー
実習をはじめから通して行うときは、このフォルダーに含まれるindex.html、style.CSSなどのファイルをテキストエディター、またはwebページ作成ソフトで開き、各節で紹介している手順でHTMLタグやCSSを入力しましょう。
・「complete」フォルダー
実習が終了したときの完成例を確認したいときは、このフォルダーを開きましょう。
・「section」フォルダー
途中の前から始められるように、節ごとの実習用データが収められています「section」フォルダー内の各節番号のフォルダーを探して、その中のファイルを使って作業しましょう。
・「sample」フォルダー
本書の中で、実習には含まれない、応用的な内容を取り上げたサンプルファイルを紹介しているところがあります。サンプルファイルは「sample」フォルダーに含まれているので、その中から該当するファイルを探して確認しましょう。

○凡例
解説: 用字用語や基本的な操作などを解説しています。
One Point: HTMLタグやCSSを記述する際の応用テクニックを紹介しています。
Accessibility Note: Webサイト制作にかかせないアクセシビリティについての知識をまとめています。
Design Note: Webサイト制作に必要なデザインの知識をまとめています。

Webクリエイター能力認定試験とは?

○Webクリエイター能力認定試験の概要
Webクリエイター能力認定試験は、Webクリエイターに必要とされる、Webサイト制作のデザイン知識およびWebページのコーディング能力を測定・評価する認定試験です。
エキスパートとスタンダードといった難易度に応じた級種を選択することで、現役のWebクリーはもちろんのこと、Webデザイナー、Webディレクター、Webプログラマー、それらを目指す学校・教育機関で学習されている方など、Webに関わる全ての方々を対象としています。
最新の試験の詳細や受験方法、受験料などの情報は、Webクリエイター能力認定試験オフィシャイトにてご確認ください。
http://www.sikaku.gr.jp/web/wc/

■主催・認定
サーティファイWeb利用・技術認定委員会

■認定基準
・エキスパート…レイアウト手法や色彩設計等、ユーザビリティやアクセシビリティを考慮したWebデザインを表現することができる。
また、スクリプトを用いた動きのあるWebページの表示、マルチデバイス対応、新規Webサイトを構築することができる。
・スタンダード…セマンテックWebを理解し、HTML5をマークアップすることができる。
また、CSSを用いてHTMLの構造を維持しつつ、Webページのデザインやレイアウトを表現することができる。

■受験資格
学歴、年齢等に制限はありません。

■合格基準
エキスパート…知識問題と実技問題の合計得点において得点率65%以上。
スタンダード…実技問題の得点において得点率65%以上。

■試験時間

※サーティファイWeb利用・技術認定委員会では、メモ帳(Windows)とテキストエディット(Mac OS)のみを「テキストエディター」として認めています。その他のソフトウェアを使用する場合は、「Webページ作成ソフト」による受験となります。

■出題形式

※受験時に参考資料として利用できる簡易リファレンス「受験者用リファレンス」が提供されます。

■対応ブラウザー

※OSのバージョン対応は各ブラウザーの動作環境に準ずる。

Webクリエイター能力認定試験 HTML5対応 出題範囲

最新の出題範囲はサーティファイホームページをご覧ください。

Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認

狩野 祐東 (著)

出版社: 富士通エフ・オー・エム(FOM出版) (2015/3/18)、出典:出版社HP

Amazon

Rakuten