Webクリエイター能力認定試験HTML5対応スタンダード公式テキスト―サーティファイWeb利用・技術認定委員会公認
【【最新!】 独学HTMLとCSSの勉強できる書籍 -入門•基礎から- 】をTech Here!で確認する
本書の解説環境(試験の対応環境)
●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月
狩野祐東
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キー+クリックして、コンテクストメニューの[リンク先のファイルをダウンロード]を選択します。「ダウンロード」フォルダーに保存されたファイルをダブルクリックして展開します。
■練習用データ利用時の注意事項
練習用データを開くと、ダウンロードしたファイルが安全かどうかを確認するメッセージが表示される場合があります。練習用データは安全なので、「編集を有効にする」をクリックして、ファイルを編集可能な状態にしてください。
