Webクリエイター能力認定試験スタンダードテキストHTML  5.0対応注意事項インターネットから学習用データやサンプル問題をダウンロード＆展開すると、正しく動作しない場合があります。具体例としては、HTMLファイルをInternet Explorerで開いた時に、CSSが適用されずレイアウトが崩れたりします。このような時には「ブロックの解除」をすることで、問題を回避できます。 1 、ダウンロードしたファイルを右クリック→プロパティをクリック。 ２、表示されたプロパティウィンドウの下を確認。 ３、「ブロックの解除」ボタンが表示されていれば、そのボタンを押す。 4 、「OK」ボタンを押してプロパティウィンドウを閉じる。これで問題なく動作するようになるでしょう。
この章では日常的に使っている専門用語の意味や、正しい使い方を確認します。間違って覚えていたり、よくわからないままなんとなく使っていたりするものです。最初に正しい意味と使い方を身に付けましょう。出てくる専門用語は、英語がベースになっているものがほとんどです。そのまま覚えるだけではなく、英単語に含まれる本来の意味もいっしように覚えましょう。まだ知らない専門用語が出てきても、英単語から意味を推測できます。わからない専門用語が出てきたら、インターネットで検索をして意味を調べましょう。専門用語の末尾に「とは」や「意味」をつなげると、解説が見つかりやすくなります。 HTMLについて調べたい時は、 「HTMLとは」 「HTML　意味」（間にスペースを挟む）のように、検索キーワードを入力してみてください。検索エンジンによっては、調べたい単語を入力するだけで候補リストに出てくるでしょう。
インターネットとは全世界のコンピューターを網の目(ウェブ)のように接続した、巨大なコンピューターネットワークです。ウェブプラウザーやウェブメールなど、ウェブ(Web)という多くの用語に入っています。私たちはこのネットワークを介して、電子メールやホームページなど様々な情報をやりとりします。スマートフォンでメールやキーワード検索ができるのも、このネットワークにつながっているからです。最近はパソコンだけではなく、スマートフォンやゲーム機、家電製品などさまざまな機器がインターネットにつながるようになりました。みなさんの家にある大画面液晶テレビでも、YouTubeなどの動画サイトを見ることができると思います。これらの機器は画面の大きさや解像度(画面のきめ細かさ)が異なります。これからの時代ホームページを作るには、製作者が意図した通りに表示されているのか、いろんな機器で事前に検証する必要があります。
ウェブサイト(web site)
インターネット上にあるホームページ(ウェブサイト)のことです。一画面(一枚)で表示されるウェブページが何枚も集まって、ウェブサイトを構成します。それらのウェブページのうち、誰かがアクセスした時に最初に表示されるページを決めることができます。そのページを特別にホームページやトップページと呼びます。本来の意味では正しくないのですが、いつからかウェブサイト全体を、ホームページと呼ぶようになりました。サイトには、用地や場所という意味があります。
ウェブサーバー(web server)
ウェブサイトを構成するさまざまなファイルをまとめて保存し、外部からの要求に応じて提供するコンピユーターです。このコンピューターが止まると、ウェブサイトが見られなくなってしまいます。 24時間365日稼働できる、十分な信頼性が求められます。そのため通常のパソコンよりも、信頼性の高いハードウェアやソフトウェアが用いられます。もし一部の部品が壊れても、予備の部品に切り替えて停止することなく動き続けるなど、特殊な機能も利用されます。そのためにとても高価なシステムになりがちです。個人でウェブサイトを公開する場合は、専門業者が提供しているレンタルサーバーなどを利用するのがお薦めです。サーバー【server】には、仕える人、給仕する人という意味があります。
ウェブブラウザー
ウェブサイトを閲覧するためのソフトウェアです。まずURL(ユーアールエル、ウェブサイトのアドレス)を入力して、ウェブサーバーに接続してから、必要なファイルをダウンロードして、ウェブブラウザーの画面に表示する機能を持っています。 OSに標準で入っているウェププラウザーもあれば、別途インストールする必要があるウェププラウザ一もあります。代表的なものは、 •Microsoft Edge (Windows10以降)、Internet Explorer (Windows10以前) •Safari (macOS、iOS標準) •Mozilla Firefox •Google Chromeなどがあります。ウェブサイトを構成する技術は年々進歩しているので、最新のウェブサイトを古いウェブブラウザーで閲覧すると正しく表示できないことがあります。セキュリティ対策も更新されない場合があるので、可能な限り新しいウェブブラウザーを使うようにしましょう。ブラウズ【browse】には、拾い読みや本棚などを漁るという意味があります。
この章ではテキストエディタを使って、HTMLファイルを作成していきます。作成したHTMLファイルはウェブブラウザーで開いて、進み具合や入力ミスの確認をします。 Windowsに標準でインストールされている「メモ帳(テキストエディタ)」と、「Internet Explorer (ウェブブラウザー)」を利用します。初めて見るHTMLやCSSは、まるで読めない呪文のように思えるかもしれません。英語がベースの言語なので、なんとなく意味がわかるものもあるでしょう。この章を終える頃には、意味がわかるようになります。自分のペースで学んでいきましょう。

夏集(エレメント)
ウェブページを構成する文字列や画像など、配置されている部品のことです。開始タグと終了タグ、その間に挟まれている内容すべてを要素と呼びます。下記の例は「Webクリエイター」という文字列を、段落として表示する（上下に改行を入れる）という意味です。
タグ
要素に意味や機能を持たせるための記号です。通常は開始タグと終了タグで文字列などを囲んで利用します。サンドイッチのように挟んで使うと覚えてください。一部のタグ(imgタグなど)は開始タグだけで使えるものもあります。このように終了タグが要らないものは、特別に「空(から)要素」と呼びます。かならず半角英数字で記入する必要があります。日本語などの全角文字をタグで囲む時に、間違えて全角文字でタグまで書いてしまうので注意してください。半角なら大文字、小文字どちらでも使えますが、ここでは小文字に統一します。
鳳性(アトリビュート)
要素に追加する情報で、開始タグの中に追加します。この属性を用いて、さらに機能を追加することができます。ひとつの開始タグに複数の属性を追加することも可能です。タグ自体や他の属性と区別するために、半角スペースを入れる必要があります。適切に半角スペースが入っていないと、どこで属性や値を切り分けていいのかわかりません。正しくスペースを入れていないと、ウェプブラウザーでの表示がおかしくなるかもしれません。
鳳性値(アトリビュートバリュー)
属性に入力して、さまざまな機能を付け加えます。たとえばウェブページに画像を表示したい場合、imgタグのsrc属性に「どこにどんなファイル名の画像があるのか」を、属性値(ファイルパス)として入力します。(srcは「source (源泉、情報源)」の略語)属性値は一般的にダブルクォーテーション(")で囲んで、イコール記号(＝)で属性に代入します。
ブロックレベル要素
HTMLで使用する要素は、大きく2種類に分けられます。見出し・段落・表など、使用した順番どおりに統に積み上げられる要素は、プロックレベル要素と呼ばれます。開始タグと終了タグで囲ったものを、ひとつのブロックとして扱います。ウェブブラウザー上ではブロックレベル要素の前後(上下)に、自動的に改行が挿入されます。プロックレベル要素の中に他のプロックレベル要素を入れたり、後述するインラインレベル要素を入れることもできます。今回の試験に出てくる、主なブロックレベル要素の一部を紹介しましょう。

インラインレベル要素
リンク・改行・画像など、使用した順番どおりに横に並ぶ要素は、インラインレベル要素と呼ばれます。プロックレベル要素のように前後(上下)に改行は挿入されません。インライン(in -line)は言葉の通り、 「要素(行)の途中に挿入できる要素」と考えましよう。インラインレベル要素は、単独で使用することができません。プロックレベル要素でインラインレベル要素を囲む必要があります。また、インラインレベル要素の中にブロックレベル要素を入れることはできません
---今回の試験に出てくる、主なインラインレベル要素の一部を紹介しましょう。 HTML4.01から使われていた要素
ハイパーリンク改行イメージ画像インライングループ
ファイル名の注意
ウェブサイトを作成する上で、さまざまなファイルを用いる必要があります。それらのファイルにつける名前(ファイル名)にも、いくつかルールがありますので確認してみましょう。
半角英数字の小文字を用いる
ひらがな、カタカナ、漢字はファイル名に使用しないようにしましょう。ウェブサーバーが正しく認識できなくて、正常に表示できない場合があります。サーバーによっては大文字小文字を区別する場合もあるので、ここでは小文字に統一します。
記号はアンダーバー「__」だけ
半角スペースなどにも、特別な意味が割り当てられている場合があります。使用できるのはアンダーバー「__」だけだと覚えておいてください。 JISキーボードで入力するには、シフトキーを押しながら、「ろ」キーを押します。 (キーボードの右シフトキーあたり)
拡張子はhtml
ファイル名の末尾につける拡張子には、 html(4文字) htm(3文字)の2種類があります。ここではhtml(4文字)に統一します。
ホームページ(トップページ)はindex.html
[index.html]と名付けられたファイルがあると、ウェブサーバーはこのファイルをホームページ(トップページ)として扱います。最初に表示したいウェブページのファイル名には、「index.html」と付けておきましょう。
HTMLファイルの最初の行に記入して「このウェブページは、ここで宣言したルールにしたがって書いています」と、ウェププラウザーに知らせるためのものです。 DOCTYPEは「どっくたいぷ」や「どきゅめんとたいぷ」と読みます。ウェブプラウザーはここで宣言されたルールにしたがって、HTMLを解釈して表示します。 HTML4.01では覚えきれないくらい長い文字列でしたが、HTML5では簡略化されました。下記のファイルをメモ帳で開いて、適切に編集してみましょう。問題01のindex.html <!DOCTYPE html>このファイルをウェブブラウザーで開いてみても、何も表示されません。ウィンドウタイトル(タブ)には、開いているファイルの保存場所(ファイルパス)が表示されます。

HTML文書の宣言
HTML文書では<html>えいちていーえむえる<head>ヘっど<body>ぽでいの3種類のタグで、大まかな文書構造を定義します。 <html>はその文書がHTML文書であることを宣言します。文書型宣言の以降の内容は、すべて<html>～</html>の中に配置します。問題01つづきく!DOCTYPE html> <html> </html>このファイルをウェブブラウザーで開いてみても、さきほどと同じように何も表示されません。

ヘッダ情報
ヘッダには、その文書のさまざまな情報を記載します。文書のタイトルや外部 CSSファイルの指定などが該当します。このタグの中に書かれている情報のほとんどは、ウェププラウザー上に表示されません。後に紹介するtitleタグで指定された文字列が、ウィンドウタブに表示されるくらいです。問題01つづき<!DOCTYPE html> <html lang="ja"> <head> </head> </html>
文字コード宣言
文字コード(キャラクタコード)とは、コンピューターで扱う文字ひとつひとつに割り当てられた固有の値のことです。複数の文字コードがあり、適切に指定しないとウェププラウザーでは文字化けしてしまいます。metaは「めた」、charsetは「きやらせっと」や「ちゃーせっと」と読みます。この試験ではutf 8 (Unicode、ユニコード)が指定されているので、そのように記載します。 HTML4.01では覚えきれないくらい長い文字列でしたが、HTML5では簡略化されました。問題01つづき
HTML4.01の頃にはシフトJIS (ジス) <meta charset="Shift_JIS">なEUC(イーユーシー）    <meta charset="EUC-JP">という、他の文字コードも使われていました。近年ではUnicodeを指定するのが標準になっています。
本文bodyタグには、ウェブブラウザーのウィンドウ内部に表示される内容を記入します。ウェブブラウザーのウィンドウ内部に、入力したテキストが表示されました。 22

段落
指定した範囲をひとつの段落として扱います。段落の上下に改行が自動的に挿入され、他の段落と区別がつくようになります。段落という意味のParagraphの略、「p」が用いられているのでピー、パラグラフと読みます。下記のファイルをメモ帳で開いて、適切に編集してみましょう。問題02-pのindex.html省略<body> <p>先生と私</p> <p>私はその人を常に先生と呼んでいた。</p> 〈p〉だからここでもただ先生と書くだけで本名は打ち明けない。〈/p〉くp>これは世間を憚る遠慮というよりも、その方が私にとって自然だからである。 </p> </body> </html>下から3～4行目の</p>が改行されているように見えますが、横幅が足りなくてそう見えているだけです。下記のように一行で入力してください。くp〉これは世間を憚る遠慮というよりも、その方が私にとって自然だからである。〈/p〉 ---一行ごとに段落に分けたため、上下に改行が挿入されて行間が開いているのがわかります。
1911 291
では、<p></p>のようにタグをすぐ閉じてしまった、中身の無い要素ではどうでしょうか？ bodyタグの中の好きなところに「<p></p>」と追加して保存してから、ウェブプラウザーで再読み込みをしてください。どれほど「<p></p>」を追加しても、空白行にはなりません。タグの中に何らかの文字列が入って、はじめて段落として扱われるようになります。 (半角スペースや全角スペースではダメ、半角英数字や全角文字が必要)
段落を使わないで改行だけを入れることができます。単に改行するだけのタグなので、pタグのように段落に分かれたりしません。空(から)要素なので、 </br>のような終了タグは必要ありません。開始タグだけで機能します。改行という意味のbreakの略、「br」が用いられているのでビーアール、ブレークと読みます。下記のファイルをメモ帳で開いて、適切に編集してみましょう。問題03 brのindex.html省略<body> <p>先生と私<br>私はその人を常に先生と呼んでいた。<br>だからここでもただ先生と書くだけで本名は打ち明けない。<br>これは世間を憚る遠慮というよりも、その方が私にとって自然だからである。 </p> </body> </html>はその人を常に先生と呼んでいた。こでもただ先生と書くだけで本名は打ち明けない。れば世間を憚る遠慮というよりも、その方が私にとって自然だからである。 4行まとめてひとつの段落にしているので、1行目の上と４行目の下に改行が挿入されます。それ以外の行間は、隙間が無くなってぴったりくっついているのが確認できます。
線習
では、brタグを何度も繰り返し追加するとどうなるでしょうか？ bodyタグの中の好きな所に追加して保存してから、ウェブブラウザーで再読み込みをしてください。増やした分だけ改行が入っているのが確認できると思います。ただし、この方法で行間を大きく空けるのはお薦めできません。HTMLは文章の構造を書くためのものなので、見た目を調整するためには使わないというルールがあるからです。 「改行タグは連続して使わない」ということを覚えてください。