1 / 278
Web クリエイター能力認定試験
初級テキスト
2 / 278
第 1 章 インターネットとホームページの基礎知識
この章では日常的に使っている用語の意味や使い方の確認をします。 よくわからずに使っていたり、間違って覚えていたりすることは珍しくありません。 最初に、正しい知識と用語の使い方を身に付けましょう。 出てくる用語は英単語が元になっているものがほとんどです。 そのまま覚えるのではなく、単語の本来の意味もいっしょに覚えましょう。 初めて聞く用語や略語でも、一部の意味がわかればある程度推測できるようになります。 わからない用語が出てきたら、インターネットで検索をしてすぐに意味を調べましょう。 単語の末尾に「とは」や「意味」をつなげて検索すると、解説が見つかりやすくなります。 HTML について調べたい時は、 「HTML とは」 「HTML 意味」＇間にスペースを挟む（ のように、検索キーワードを入力してみてください。3 / 278
第１節 インターネット
全世界のネットワークを網の目のように接続した、地球規模の巨大なコンピュータネットワークです。 インターネットにかかわる用語の多くにも「ウェブ＇Web（」という言葉が混じっています。 ＇ウェブブラウザ、ウェブメールなど（ 私たちはこのネットワークを介して、電子メール やホームページなどの情報をやりとりしています。 スマートフォンでメールや検索ができるのも、この ネットワークにつながっているからです。 最近はパソコンだけではなく、携帯電話やスマ ートフォン、ゲーム機から家電製品に至るまで、さ まざまな機器がインターネットにつながるようになり ました。 みなさんの家にある大画面液晶テレビでもYouTube などの動画サイトを見ることができると思います。 画面の大きさや解像度＇画面のきめ細かさ（が多様になりましたので、近年ホームページを作る時には それぞれの機器で思い通りに表示されているのか十分に検証する必要があります。4 / 278 ウェブサイト（web site） インターネット上にあるホームページのことです。 一画面に表示されるウェブページが何枚か 集まって、ウェブサイトを構成します。 そのウェブページのうち、最初に表示される ページを決めることができるのですが、そのペ ージは特別にホームページと呼びます。 本来の意味では正しくないのですが、いつから かウェブサイト全体を、ホームページと呼ぶよう になりました。 サイトには、用地や場所という意味があります。 ウェブサーバー（web server） ウェブサイトを構成するファイルをまとめて保存し、外部か らの要求に応じて提供するコンピュータです。 止まるとウェブサイトが見られなくなってしまうので、２４時 間稼働が求められます。通常のパソコンよりも信頼性の高い ハードウェアやソフトウェアが用いられます。 もし一部の部品が壊れても、予備の部品で停止すること なく動き続けるなど、特殊な機能を持たせています。そのぶ んとても高価なシステムになりがちです。 個人でウェブサイトを公開する場合は、専門業者が格安 提供しているレンタルサーバーなどを利用するのがお薦め です。 サーバー【server】には、仕える人、給仕する人という意 味があります。
5 / 278 ウェブブラウザ ウェブサイトを閲覧するためのソフトウェアです。 URL＇アドレス（を入力してウェブサーバーに接 続し、必要なファイルの提供を受け、ブラウザの画 面に表示する機能を持っています。 OS に標準で入っているブラウザもあれば、別途 インストールして使うブラウザもあります。 代表的なものは Internet Explorer＇Windows 標準（ Safari＇OSX、iPhone 標準（ Firefox Google Chrome などがあります。 年々進歩しているので、古いブラウザのままだとうまく見られないウェブサイトがあったりします。 古いままだと安全面でも問題が出てくるので、できるだけ新しいブラウザを使うようにしましょう。 ブラウズ【browse】には、拾い読みや本棚などを漁るという意味があります。
6 / 278
第２節 ウェブサイトを作成する
ウェブサイトを構成する最小単位がウェブページ。 最初に表示される、表紙に当たるウェブページをホームページ＇トップページ（。 これらのウェブページがまとまって、ひとつのウェブサイトになります。 次に、ウェブサイトを理解する上で必要な用語や技術を確認してみましょう。7 / 278 HTML
Hypertext Markup Language エイチ ティー エム エル は、ウェブページを作成するために開発された言語です。 ハイパーテキストとは従来の文章を超える文章、 という意味が含まれています。 それまでは表示された順番に読むことしかできな かった文章に、リンクという機能を付け加えることで 複数の文章を相互に連結できるようになりました。 マークアップは目印をつける、という意味がありま す。文章を複数の項目＇要素（に分解して、それぞ れにどのような意味や機能があるのかを明確にしま す。 みなさんが読んでいる紙に印刷された本も、複数の構造に分かれています。 ・表紙 ・目次 ・本文 ・章、節、項 ・注釈、補足 ・奥付 HTML は情報の構造をわかりやすく定義するための言語と考えてください。 初期のHTML では論理構造に加えて、文字の大きさなどの見た目を表現することができたので、 好きなレイアウトや色遣いなどを表現することができました。 現在では後述するCSS ファイルが見た目や装飾を受け持つようになったため、HTML は構造を 表すことのみに用いるべきとされています。
8 / 278 CSS
Cascading Style Sheets
カスケーディング スタイル シート ウェブページのスタイル＇見た目（を決めるために、 さまざまな指示をすることができる言語です。 HTML で構造化した文章に、CSS で見た目を 良くしてさらに読みやすくしたりできます。 HTML でも見た目を指示することはできますが、 あちこちで同じような見た目を使う場合には、指示 を書くのに手間がかかります。 CSS は見た目の指示を別の場所にまとめて書い ておける技術です。必要な時にその指示を見に行 くことで、適切に見た目を変えることができるように なりました。 指示をまとめて管理できるので、編集や更新が 楽になります。ウェブサイト全体の見た目を揃えて、統一感を出すという効果もあります。 カスケード【cascade】には、階段のように連続する滝という意味があります。
9 / 278 ハイパーリンク Hyperlink 単にリンク＇link（と呼ぶ場合もあります。 ウェブページ内の文字列や画像などに、他のウ ェブページを紐付けして、マウスのクリックなどで ページ間の移動ができる技術です。 同じウェブサイト内のページ移動だけではなく、 インターネット上で公開されている他のウェブサイ トにも同様に移動できます。 他のページの位置情報を埋め込んで、連結する ことができる、それがハイパーリンクだと覚えてくだ さい。 このハイパーリンクを利用して、世界中にある多くのウェブページが結び付けられているので、 インターネットはWWW＇ワールドワイドウェブ（とも呼ばれています。
10 / 278 画像ファイル（イメージファイル） イラストや写真、アニメーションなど、多彩な表現ができるデータです。 主に下記の３種類が用いられていて、それぞれに得意、不得意な画像があります。 その特徴を活かして、うまく使い分けてください。 GIF＇ジフ（ ２５６色まで使える方式 容量が小さいのが特徴 ベタ塗りのイラストに最適 背景が透けて見える透過色の指定や アニメーションが可能 JPEG＇ジェイペグ（ 約１６７０万色まで使える方式 写真などの細かい階調表現が可能 容量がそこそこ小さいのが特徴 ベタ塗りや極端な色の変化に弱い＇劣化（ 透過色は扱えない PNG＇ピング、ピーエヌジー（ 上記ふたつの長所を取り入れた方式 ベタ塗りも細かい階調も適切に扱える 容量がそこそこ小さいのが特徴 透過色の指定やアニメーションが可能
11 / 278
第３節 ウェブサイトの公開
ウェブサイトはいろんなファイルを集めて作成します。 インターネット上の他の機器から見られるようにするには、ウェブサーバーにファイルを転送する必要 があります。 ファイルの転送にはFTP クライアントと呼ばれるソフトを利用します。 １、手元のパソコンでウェブサイトの作成 ２、FTP クライアントソフトで、FTP サーバーに データを送る という手順で転送することができます。 FTP サーバーの中にあるファイルをウェブサーバーが外部に公開することで、わたしたちの手元に ある端末にファイルが届くようになります。 手元のパソコンでウェブサイトを更新した場合は、必ずこの手順を繰り返してサーバー内のファイル を最新のものに置き換える必要があります。12 / 278 ・補足キーワード 「HTML5」 HTML4.01 からさらに発展した最新の HTML。 これまで実現が難しかったブラウザ単体での動画、音声、グラフィック描画ができる ようになり、ウェブアプリケーションと呼ばれるブラウザ上で動く高機能なソフトウェア の作成が可能になった。 構造的にも整理が進み、より書きやすくわかりやすくなった。 「シネマグラフ」 GIF アニメーションの一形態。 単なる静止画のように見えるけれども、ごく一部だけ動いている。 静止画よりも印象に残りやすいので、目立たせたい部分に使うと効果的。 ファイル容量が大きくなりがちで、再生する側にも負荷がかかるのが難点。 「シングルページ」 1 ページで完結しているウェブサイト。 縦に長いページで大きな画像やテキストを使い、シンプルに表現する。 スクロールに合わせてアニメーションによる視覚効果を加えることも多い。 スマートフォンなどのモバイル端末でも見やすいのが特徴。
13 / 278
第２章 HTML の記述
この章では実際にテキストエディタ＇Windows 標準のメモ帳（を使って、HTML を記述していきます。 初めて見ると呪文のように感じられるかもしれません。
14 / 278
第１節 基本ルール
要素（エレメント） ウェブページを構成する文字列や画像など、配置されている部品のことです。 開始タグと終了タグ、その間に挟まれている内容すべてを要素と呼びます。 下記の例は「Web クリエイター」という文字列を、段落として表示する＇上下に改行を入れる（ という意味です。 要素<p>Web クリエイター</p>
開始タグ 終了タグ タグ 要素に意味や機能を持たせるための記号です。 通常は開始タグと終了タグで文字列などを囲ん で利用します。サンドイッチのように挟んで使うと覚 えてください。 一部のタグ＇img タグなど（は開始タグだけで使え るものもあります。このように終了タグが要らないもの は、特別に「空＇から（要素」と呼びます。 かならず半角英数字で記入する必要があります。 日本語などの全角文字をタグで囲む時に、間違え て全角文字でタグまで書いてしまうので注意してく ださい。 半角なら大文字、小文字どちらでも使えますが、ここでは小文字に統一して話を進めます。15 / 278 属性（アトリビュート） 要素に追加する情報で、開始タグの中に追加します。 この属性を用いて、さらに機能を追加することができます。 ひとつの開始タグに複数の属性を追加することも可能です。 タグ自体や他の属性と区別するために、半角スペースを入れる必要があります。 適切に半角スペースが入っていないと、どこで属性や値を切り分けていいのかわからないので、 ブラウザで正しく表示されないことがあります。 属性 属性
<img src="test.gif" alt="テスト">
値＇あたい（ 値＇あたい（ 値 属性に入力して、さまざまな機能を付け加えます。 画像を表示したい場合にはimg タグの src 属性に「どこにどんなファイル名の画像があるのか」と いう情報を値＇ファイルパス（として入力します。＇src は「source＇源泉、情報源（」の略語（ 値は通常ダブルクォーテーション記号＇”（で囲んで、イコール記号＇＝（を使って属性に入力します。
16 / 278 要素はその役割に応じて２種類に分けられます。 ブロックレベル要素 見出し・段落・表など、ひとつの部品＇ブロック、かたまり（として扱われる要素です。 ブラウザ上ではブロックレベル要素の前後に、自動的に改行が挿入されます。 今回の試験に出てくるブロックレベル要素には、以下のものがあります。
<div>
ブロックレベルグループ
<h1>～<h6>
見出し
<hr>
水平線
<ol>
順序ありリスト
<p>
段落
<table>
表
<ul>
順序なしリスト
17 / 278 インライン要素 ブロックレベル要素の中で使われる要素です。 段落にある一部の文字列を選んで強調したりすることができます。 ブロックレベル要素のように前後に改行が挿入されず、そのまま表示されます。 インライン＇in-line（は言葉の通り「行の中」と考えれば、わかりやすいでしょう。 インライン要素は単独で使用することができません。 かならずブロックレベル要素でインライン要素を囲む必要があります。 <body>
<p><img src="test.gif" alt="テスト"></p> </body> 今回の試験に出てくるインライン要素には、以下のものがあります。
<a>
ハイパーリンク
<b>
太字
<br>
改行
<em>
強調
<i>
イタリック体
<img>
イメージ画像
<span>
インライングループ
<strong>
より強調
18 / 278 親子関係 要素はまるで親子のように、ある要素が他の要素を包み込むように含むことができます。 階層的な構造を作るのでそれぞれの関係を示すために、 親要素 → 子要素 → 孫要素 のように表現します。 このような構造を入れ子構造と呼びます。 利用するときには構造をしっかり把握して、親子関係を崩さないようにする必要があります。
<p>Web<em>クリエイター<strong>初級</strong></em></p>
親要素開始タグ 子要素開始タグ 孫要素開始タグ 孫要素終了タグ 子要素終了タグ 親要素終了タグ19 / 278 文字参照 HTML では複数の文字、たとえばタグで使われている半角の「＜」や「＞」などに、特別な意味を もたせています。 半角の「＜」や「＞」などをそのまま本文に使おうとしても、その記号をタグと間違えてしまって正しく 表示できません。 そのためそれらの文字を扱うには、文字参照 という別の方法を用いる必要があります。 例えば半角の「＜」は「<」と記入します。 ＇lt は「less than＇～未満（」の略語です（ 半角スペース 小なり記号「<」 < 大なり記号「>」 > アンド記号「&」 & ダブルクォーテーション記号「"」 " 「Web クリエイター能力認定試験<初級>」と表示するには
<p>Web クリエイター能力認定試験<初級></p>
と記入します。 試しにメモ帳を使って入力してみましょう。 index.html というファイル名で保存してから、ブラウザで開いてみると確認できます。 文字参照をやめて <p>Web クリエイター能力認定試験<初級></p> と書いても、ちゃんと表示できてしまいます。 これは＜＞の中が日本語＇全角文字（なので、ブラウザがタグではないと解釈したからです。 ＜＞の中身を半角のsyokyu などにすると、何らかのタグと判断して表示されなくなってしまいます。20 / 278 ファイル名の注意 ・半角英数字の小文字を用いる ひらがな、カタカナ、漢字はファイル名に使用しないようにしましょう。 ウェブサーバーが正しく認識できなくて、正常に表示できない場合があります。 サーバーによっては大文字小文字を区別する場合もあるので、ここでは小文字に 統一します。 ・記号はアンダーバー「＿」だけ 半角スペースなどにも、特別な意味が割り当てられている場合があります。 使用できるのはアンダーバー「＿」だけだと覚えておいてください。 入力するにはシフトキーを押しながら、「ろ」キーを押します。 ＇キーボードの右シフトキーあたり（ ・拡張子はhtml ファイル名の末尾につける拡張子には、 html＇4 文字（ htm＇3 文字（ の2 種類があります。 ここではｈｔｍｌに統一します。 ・トップページはindex.html 「index.html」と名付けられたファイルがあると、ウェブサーバーはこのファイルを トップページとして扱います。最初に表示したいウェブページのファイル名には、 「index.html」と付けておきましょう。
21 / 278
第２節 一般定義
文書型宣言
そのHTML ファイルがどのようなルールにしたがって書かれているのかを宣言します。 HTML の一番初めの行に記入して 「このウェブページは、このルールにしたがって書いています」 と、ブラウザに知らせるためのものです。 ブラウザは宣言されたルールに合わせて、HTML を解釈して表示します。 途中で改行せずにすべてを1 行で記入します。 文字が多くなるとウィンドウのサイズによっては、端で表示が折り返される場合もあります。 実際の試験ではあらかじめ記入されているので、丸覚えする必要はありません。 問題01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
このファイルをブラウザで開いてみても、何も表示されません。 タイトルにはファイル名が表示されています。
22 / 278
<html>
HTML 文書の宣言 HTML 文書では <html> <head> <body> の3 種類のタグで大枠の文書構造を定義します。 <html>はその文書が HTML 文書であることを宣言します。 文書型宣言の以降の内容はすべて、<html>～</html>の中に配置します。 問題01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
</html>
23 / 278 ｌａｎｇ＝“ｊａ” html タグに入力する情報で、言語コードを指定します。 言語コードを指定することで、ドキュメントで使用している言語を明らかにし、ブラウザの表示に 利用します。 Google などの検索サービスは言語を指定して検索結果を絞り込むことができますが、その際にも この設定が利用されているので、適切な言語を指定しておきましょう。 問題01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> </html> 言語コードの代表例 ja 日本語 en 英語 es スペイン語 ru ロシア語 zh 中国語
24 / 278
<head>
ヘッダ情報 ヘッダには、その文書のさまざまな情報を記載します。 主に文書のタイトル、スタイルシートの指定などが該当します。 次に説明する<title>タグで指定するタイトル以外は、ほとんどブラウザ上に表示されません。 問題01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">
<head> </head> </html>
25 / 278 文字コード宣言 文字コード＇キャラクタコード（とは、コンピュータで扱う文字や記号ひとつひとつに割り当てられた 固有の数字のことです。 複数の文字コード体系があり、適切なコードを指定しないとブラウザは文字化けしてしまいます。 今回の試験ではシフトJIS コードが指定されているので、HTML にもそのように記載します。 実際の試験ではあらかじめ記入されているので、丸覚えする必要はありません。 問題01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= Shift_JIS"> </head>
</html>
代表的な日本語の文字コードには シフトJIS＇しふとじす（
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> EUC＇いーゆーしー（
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> Unicode＇ゆにこーど（
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> の3 種類があります。
26 / 278 ブラウザの「表示メニュー」→「エンコード」を開いて、現在の文字コードを確認したり、他の文字 コードを指定することもできます。 html ファイルを保存する時に指定した文字コードと合っていない場合は、ブラウザで文字化けが 発生します。ウェブページを閲覧していて文字化けが発生した時は、このメニューで他の文字コード を選んでみると正しく表示されることがあります。 文字コードがわかっている場合、コードから文字に直接変換することもできます。 メモ帳で日本語入力に切り替えてから、半角で2603 と入力して F5 キーを押してみましょう。 雪だるまのような絵文字が表示されます。
27 / 278
<title>
文書のタイトル 文書にタイトルをつけるタグで省略できない要素です。 かならずひとつは<head>タグ内に記載する必要があります。 ここで指定されたタイトルはブラウザのウィンドウタイトルに表示されます。 お気に入り＇ブックマーク（や検索エンジンの検索結果などにも用いられるため、ウェブページの タイトルはとても重要な要素です。 問題01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= Shift_jis"> <title>坊っちゃん</title>
</head> </html>
ここでようやくブラウザ画面に変化が表れます。 タブに指定したタイトルが表示されました。
28 / 278
<body>
本文 <body>タグには、ブラウザに表示される文書の本体を記述します。 この中に書かれている内容が、ブラウザのウィンドウに表示されます。 問題01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= Shift_jis"> <title>坊っちゃん</title> </head> <body> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </body> </html> ブラウザのウィンドウに入力したテキストが表示されました。
29 / 278
文字化けの確認
今開いているindex.html ファイルはシフト JIS で作成・保存されています。 ブラウザの「表示メニュー」→「エンコード」を開いて、「その他」から違う文字コードを選んでみましょう。 シフトJIS の文字コードを指定した言語の文字コード表で無理やり変換するので、文字化けが 起きてしまいます。 再読み込みすれば文字コード宣言も再度認識するので、文字化けは解消します。 html ファイルや css ファイルなどを保存するときに指定した文字コードと、ファイル内で指定した 文字コードはかならず一致させるようにしてください。Windows のメモ帳で作成した場合は、特に 指定しない限りシフトJIS で保存されます。30 / 278
第３節 本文の仕切り
<p>
段落 指定した範囲を段落としてまとめて扱います。 前後に改行が自動的に挿入されます。 段落という意味のParagraph の略、「p」が用いられているので ピー パラグラフ と読みます。 問題02-p の index.html をメモ帳で開いて、適切に編集してみましょう。 問題02-p<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>こころ</title> </head> <body> <p>先生と私</p> <p>私はその人を常に先生と呼んでいた。</p> <p>だからここでもただ先生と書くだけで本名は打ち明けない。</p> <p>これは世間を憚る遠慮というよりも、その方が私にとって自然だからである。</p> </body> </html>
