Webクリエイター能力認定試験HTML5対応エキスパート公式テキスト―サーティファイWeb利用・技術認定委員会公認
【【最新!】 独学HTMLとCSSの勉強できる書籍 -入門•基礎から- 】をTech Here!で確認する
はじめに
本書はサーティファイ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月
狩野祐東
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%以上。
■試験時間
| エキスパート | 知識問題 | 20分 |
| 実技問題 | テキストエディター使用/ 110分 Webページ作成ソフト使用/90分 |
|
| スタンダード | 実技問題 | テキストエディター使用/ 70分 Web ページ作成ソフト使用/60分 |
※サーティファイWeb利用・技術認定委員会では、メモ帳(Windows)とテキストエディット(Mac OS)のみを「テキストエディター」として認めています。その他のソフトウェアを使用する場合は、「Webページ作成ソフト」による受験となります。
■出題形式
※受験時に参考資料として利用できる簡易リファレンス「受験者用リファレンス」が提供されます。
■対応ブラウザー
| OS | ブラウザー |
| Windows7、8、8.1 | Internet Explorer 10、Internet Explorer11、Chrome(最新)、Firefox(最新) |
| Mac OS X | Safari6、Safari7、Chrome(最新)、Firefox(最新) |
※OSのバージョン対応は各ブラウザーの動作環境に準ずる。
Webクリエイター能力認定試験 HTML5対応 出題範囲
最新の出題範囲はサーティファイホームページをご覧ください。
