HTML5プロフェッショナル認定試験レベル1 例題解説
例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。
※修正等により、例題番号が連番ではない場合がございます。あらかじめご了承ください。
1.1 Webの基礎知識
- 例題1.36「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
文法的に正しいDOCTYPEをすべて選びなさい。- <!doctype html>
- <!DOCTYPE HTML>
- < !DOCTYPE html >
- < ! DOCTYPE html >
- <!DOCTYPE html >
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年11月6日
答えはこちら
- 答えは A、B、E です。
-
一般的にDOCTYPEは次のように書かれます。
<!DOCTYPE html>
選択肢Aはそれをすべて小文字にしたもので、逆にBはすべて大文字にしています。DOCTYPEの書式においては、大文字と小文字は区別されませんので、A と B は正しいDOCTYPEです。
DOCTYPEの書式の最後にある「html」と「>」の間には、半角スペース・タブ・改行を入れることができます。しかし、先頭の「<!DOCTYPE」の部分に関しては、大文字と小文字は別にして、そのままの状態で続けて記入しなければ文法エラーとなります。C と D は「<」と「!」の間に半角スペースが入っているため、文法的に間違っていることになります。
文法的には「html」の前には1つ以上の半角スペース・タブ・改行を、「html」の後には0個上の半角スペース・タブ・改行を入れられます。よって選択肢 E は文法的に正しいことになります。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.35「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
30ビットカラー(RGBが各10bitで約10億色)に対応し、半透明も指定可能な画像フォーマットをすべて選びなさい。 -
- GIF
- JPEG
- PNG
- WebP
- HEIC
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年10月2日
答えはこちら
- 答えは E です。
-
AのGIFは、256色までしか再現できない画像フォーマットです。また、特定の色を完全な透明にすることはできるものの、半透明にすることはできません。
BのJPEGは、24ビットカラー(RGBが各8bit)で1670万まで再現可能な画像フォーマットです。透明や半透明はサポートしていません。
CのPNGは、24ビットだけでなく48ビットカラー(RGBが各16bit)にも対応しており、フォーマットとしては約281兆色まで表現可能です。ただし、48ビットの画像データは容量が大きくなるためウェブ用には向いていないだけでなく、実際に281兆色を再現するにはそれに対応したディスプレイも必要となるため現時点ではあまり使用されていません。透明や半透明もサポートはしていますが、30ビットカラーには未対応です。
DのWebPは、半透明はサポートしているものの、再現可能な色は24ビットカラー(1670万色)までとなっています。
EのHEICは、30ビットカラーで約10億色まで再現可能な画像フォーマットです。そして比較的新しいMacやiPhoneのディスプレイは、その色を再現可能です。透明や半透明もサポートしていますので、これが唯一の正解となります。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.34「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
文字エンコーディング宣言の記述方法のうち、文法的に正しいものをすべて選びなさい。 -
- <meta charset="utf-8">
- <meta charset="UTF-8">
- <meta charset="utf-16">
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <meta http-equiv="content-type" content="text/html; charset=utf-8"><meta charset="utf-8">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年4月3日
答えはこちら
- 答えは A、B、D です。
-
charset属性に指定する値は大文字でも小文字でもかまいませんが、「utf-8」以外は指定できないことになっています。したがって、AとBは正しく、Cは文法エラーとなります。
Dの文字エンコーディング宣言は旧式ではあるものの、現在でも文法的に問題のない指定方法です。しかし、Eのように旧式の指定方法とcharset属性を使った新しい指定方法の両方を1つの文書内に含めると文法エラーになります。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.33「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
マイクロデータに関する説明のうち、正しいものをすべて選びなさい。 -
- マイクロデータ関連の属性は全部で4種類ある
- マイクロデータ関連の属性名はすべて「md」で開始される
- マイクロデータ関連の属性はすべてグローバル属性である
- マイクロデータの名前と値のペアのグループは「アイテム」と呼ばれる
- マイクロデータの仕様は HTML Living standard 内では定義されていない
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2024年1月10日
答えはこちら
- 答えは C、D です。
-
マイクロデータ関連の属性はすべて、HTML Living standard でグローバル属性として定義されています。その仕様は HTML Living standard 内の「第5章 マイクロデータ」にあります。よって C は正しい説明、E は間違った説明ということになります。
マイクロデータ関連の属性として定義されているのは、次の5種類です。- itemscope
- itemtype
- itemprop
- itemid
- itemref
よって A と B は間違いとなります。
マイクロデータの名前と値のペアのグループは「アイテム(item)」と呼ばれています。マイクロデータ関連の属性名がすべて「item」で開始されているのはそのためです。よって D は正しい説明となります。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.32「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTMLのlink要素に関する記述のうち正しいものをすべて選びなさい。 -
- link要素はbody要素内には配置できない
- link要素はrel属性の値によってはbody要素内に配置できる
- rel属性の値が「preload」の場合はbody要素内に配置できる
- rel属性の値が「prefetch」の場合はbody要素内に配置できる
- rel属性の値が「stylesheet」の場合はbody要素内に配置できる
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年9月20日
答えはこちら
- 答えは B、C、D、E です。
-
link要素は、rel属性に指定するキーワードによっては、フレージングコンテンツとしてbody要素内に配置できます。よって A は間違いです。
body要素内に配置可能となるキーワードは次の7種類です。- dns-prefetch
- modulepreload
- pingback
- preconnect
- prefetch
- preload
- stylesheet
> したがって B、C、D、E が正解となります。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.31「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTML Living Standard に準拠したHTML文書の先頭に配置可能なDOCTYPEをすべて選びなさい。 -
- <!DOCTYPE>
- <!DOCTYPE html>
- <!DOCTYPE html SYSTEM "about:legacy-compat">
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年7月5日
答えはこちら
- 答えは B、C です。
-
HTML Living Standard のDOCTYPEには、「DOCTYPE」と「html」は必ず含める必要があります。したがって、A. は文法的に間違いとなります。なお、「DOCTYPE」と「html」は大文字で書いても小文字で書いてもかまいません。
B. はHTML5以降広く使用されている一般的なDOCTYPEの書式です。これが1つ目の正解となります。
HTML5より前のDOCTYPE宣言は、現在のものよりも長い書式が採用されていました。そのため、古いシステムやツールの中には のような短い書式を出力できないものがあります。そのような環境において利用可能な書式として用意されているのが C. です。よって、これが2つ目の正解となります。
HTML 5.1 までは、HTML5への移行を促進する目的で HTML 4.01 や XHTML 1.0 のDOCTYPEも配置可能となっていました。しかし、HTML 5.2 以降ではそれらは配置できない仕様となっています。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.30「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
カスタムデータ属性の名前をつけるときの制限に関する説明のうち、正しいものをすべて選びなさい。 -
- custom- で始めなければならない
- data- で始めなければならない
- - のあとに1文字以上の文字が必要
- ASCIIのアルファベットの大文字は使用できない
- ASCIIのアルファベットの大文字も小文字も使用できる
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2023年5月10日
答えはこちら
- 正解 B、C、D です。
-
カスタムデータ属性の属性名は、必ず「data-」で始める必要があります。よって B が正しく、A は間違いとなります。
「data-」の後には、少なくとも1文字以上が必要となります。したがって C の説明は正しいことになります。
カスタムデータ属性の属性名にはASCIIの大文字アルファベットを含めることはできません。よって D は正しく、E は間違いとなります。ただし、カスタムデータ属性の文法上はそうなっていますが、HTML文書においてはすべての属性名は自動的に小文字に変換した上で処理されるため、大文字が含まれていても処理上の影響はありません。
例題解説の提供:大藤 幹 氏(HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 著者)
- 例題1.29「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTML文書の内容が日本語で書かれている場合に、[ ] に入れるhtml要素のlang属性に指定すべき値を記述しなさい。
<!DOCTYPE html>
<html lang="[ ]">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年5月20日
答えはこちら
- 正解 ja です。
-
lang属性に指定できるのは、IETF(The Internet Engineering Task Force)の「BCP 47」によって定義されている言語タグで、日本語なら「ja」、アメリカ英語なら「en-US」などと決められています。lang属性の値は空にしておくこともできますが、その場合は言語が不明であることを示していることになります。
言語タグは大文字で書いても小文字で書いてもかまわないものとして定義されています。したがって、「ja」はもちろん「JA」や「Ja」「jA」でも正解となります。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏
- 例題1.28「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
meta要素に指定できない属性を1つ選びなさい。 -
- http-equiv
- name
- content
- scheme
- charset
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年8月8日
答えはこちら
- 正解 D
-
グローバル属性を除けば、meta要素に指定可能な属性は次の4つのみです。
・http-equiv
・name
・content
・charset
scheme属性は、HTML 4.01 や XHTML 1.0 では指定可能でしたが、HTML5以降では指定できなくなっています。
charset属性はHTML5で新しく追加された属性で、meta要素で文字コードを指定する際に使用します。とはいえ、HTML5においても HTML 4.01 や XHTML 1.0 と同様にhttp-equiv属性を使って次のように文字コードを示すことも可能です。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ただし、1つのHTML文書内にcharset属性とhttp-equiv属性の両方で文字コードを指定しておくことはできません。指定する場合は、どちらか一方でしか指定できない仕様となっています。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏
- 例題1.27「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
html要素のタグの省略に関する説明のうち、正しいものを1つ選びなさい。 -
- 開始タグのみ省略できる
- 終了タグのみ省略できる
- 開始タグ・終了タグとも省略できる
- 開始タグ・終了タグとも省略できない
- 動的に生成されるページの場合のみ、開始タグ・終了タグともに省略できる
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2019年1月8日
答えはこちら
- 正解 C
-
HTMLの要素の中には、「開始タグ・終了タグとも省略できないもの」「開始タグ・終了タグとも省略できるもの」「終了タグのみ省略できるもの」の3種類があります。HTMLの全要素のうち8割以上は「開始タグ・終了タグとも省略できないもの」に該当しますが、html要素・head要素・body要素・colgroup要素・tbody要素は、開始タグ・終了タグともに省略できます。この5種類の要素については、しっかり暗記しておきましょう。
なお、タグの省略は無条件にできるものではなく、どういう場合に省略可能なのかが要素ごとに決められています。たとえばhtml要素であれば、開始タグが省略できるのは「要素内の先頭にあるものがコメントではない場合」、終了タグが省略できるのは「終了タグの直後にコメントがない場合」にのみ限定されています。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏
- 例題1.26「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTP cookie の説明として間違っているのは次のうちどれか。 -
- HTTP cookieによりステートフルなサービスを可能にする。
- HTTP cookieは通信時はHTTPヘッダに含まれる。
- HTTP cookieはクライアントに保存される。
- HTTP cookieに有効期限がないと削除しない限り残り続ける。
- HTTP cookieのサイズは4KBである。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年11月6日
答えはこちら
- 正解 D
-
HTTP cookie(クッキー)は Ajaxと同様 Webページがアプリケーションとして成長できた基本技術の一つです。
元来HTTPはステートレスなプロトコルですが、クッキーを利用することでショッピングサイトなどのようにステートフルなサービスを可能にします。(Aは正しい)
クッキーの情報はHTTPヘッダに含んで通信を行うので基本的にJavaScriptでアクセスできますが、設定によりアクセス出来ない場合があります。(Bは正しい)
クッキーはクライアント(ブラウザ)に保存され、ユーザはブラウザの機能を利用することで履歴の削除などと同時に削除することができます。(Cは正しい)
クッキーは1つ4KB、1サーバーに20個、トータル300個まで保存できますが、制限があるためHTML5では、Web Storageなど大容量を扱えるAPIも用意されています。(Eは正しい)
クッキーには有効期限を設定することができ、有効期限を超えると保存されていたクッキーは無効になります。有効期限が指定されていると、有効期限内はブラウザを終了しても保存されていますが、指定されていない場合ブラウザの終了とともに削除されます。(Dは間違っている)
したがって、HTTP cookie の説明として間違っているのはDです。
LPI-Japan
中谷 徹
- 例題1.25「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
Webサーバーへの脆弱性攻撃の一つで、ブラウザから本来アクセスできないはずのサーバーのファイルにアクセスする攻撃で、別名「../ 攻撃」とも呼ばれるのは次のうちどれか。 -
- OSコマンドインジェクション
- SQLインジェクション
- ディレクトリトラバーサル
- クロスサイトスクリプティング(XSS)
- HTTPヘッダインジェクション
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年10月2日
答えはこちら
- 正解 C
-
ソフトウェアの脆弱性タイプの一覧は、CWE(Common Weakness Enumeration) として公開されています。
Webサーバーを開発したら、注意すべき脆弱性攻撃とその対策について調べられるようにしておくことが重要です。WebサーバーのFORM入力画面を入り口として入力した文字列の検証が不十分なことにより、本来アクセスできないデータにアクセスしたり、データを削除・変更したりする脆弱性攻撃は、CWE-20 Improper Input Validation(不適切な入力確認)として分類されています。
例題にある ../ は一つ上のディレクトリを示す文字列です。../../のように../を繰り返すことで上に上がり、そこから下に目的のディレクトリ名とファイル名を注入して、本来ならアクセスできないファイルに攻撃するので、../攻撃とも呼ばれています。CWE-20の分類の1つCWE-22パストラバーサルとして割り当てられており、ディレクトリトラバーサルとも呼ばれているCが正解です。
AのOSコマンドインジェクションCWE-78もCWE-20の一つで、悪意のあるコマンドを注入してOSのコマンドを実行する攻撃で、不正解です。
BのSQLインジェクションCWE-89もCWE-20の一つで、データベースをアクセスする標準言語SQLに悪意のある文字列を注入してデータアクセスを実行する攻撃で、不正解です。
DのクロスサイトスクリプティングCWE-79もCWE-20の一つで、JavaScriptに悪意のある処理を注入してJavaScriptを実行する攻撃で、不正解です。
EのHTTPヘッダインジェクションは、CWE-113のImproper Neutralization of CRLF Sequences in HTTP Headers ('HTTP Response Splitting')に分類され、HTTPヘッダに悪意のある文字列を注入して罠サイトに誘導したりする攻撃で、不正解です。
../攻撃は、褒められた行為ではありませんが、HTML5 Level 1 に合格したら、つぎは一つ上のLevel 2 を目指すことは良い目標になると思います。
LPI-Japan
中谷 徹
- 例題1.24「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTPヘッダフィールドの内、Webアクセスの高速化を目的に設定できるのは次のうちどれか。3つ選びなさい。 -
- Cache-Control
- Expires
- Last-Modified
- Set-Cookie
- User-Agent
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年7月31日
答えはこちら
- 正解 A、B、C
-
Aの Cache-Control は General header の1つで、Cache を制御します。更新されていない情報についてキャッシュを利用させることでサーバーの負荷軽減とWebページの表示高速化を期待できます。よって、正解です。
Bの Expires は Entity header の1つで、ページの有効期限以前であれば、キャッシュを利用させるので、サーバーの負荷軽減とWebページの表示高速化を期待できます。よって、正解です。
Cの Last-Modified は Entity header の1つで、コンテンツが前回アクセス時から更新されていない場合、キャッシュを利用するので、サーバーの負荷軽減とWebページの表示高速化を期待できます。よって、正解です。
Dの Set-Cookie は Response header の1つで、設定するとクッキーによりステートレスな HTTP プロトコルのためにステートフルな情報を記憶します。ログイン状態の保持やショッピングカート状態の保持に利用されますが、高速化には寄与しないので不正解です。
Eの User-Agent は Request header の1つで、ブラウザの種類やOSの情報が含まれ、さまざまな目的に利用できるが、Webアクセスの高速化切り替えの基準に出来るかもしれませんが、直接高速化に影響しないので、不正解です。
Cache-Control などの設定は、apache などWebサーバーで行うのが一般的です。Webサーバーにより設定方法が異なりなりますので利用される環境で効果を測定してみてはいかがでしょうか。
LPI-Japan
中谷 徹
- 例題1.23「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTP/1.1プロトコルのリクエストメソッドの説明として正しくないのは次のうちどれか。 -
- HTMLのフォームで指定できるのはGETとPOSTのみである。
- GETでは、リクエストパラメータはURLに含まれるが、POSTではボディに含まれる。
- GETではデータサイズの制限があるが、POSTにはない。
- GETリクエストに対しては、PUTリクエスト付きのレスポンスメッセージが戻る。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年7月3日
答えはこちら
- 正解 D
-
HTTPのメソッドはいくつもありますが、HTMLのform要素で指定できるmethod属性値はGETとPOSTのみです。
では、それ以外のPUTやDELETEなどはどのように使用されるのでしょうか。Webサービスは一般的には、人がブラウザを使用して情報を取得したり、情報の登録・更新を行うインターフェイスを提供しますが、システム同士で通信するインターフェイスも提供できます。PUTやDELETEはシステム同士で通信する場合などの、RESTやSOAPといった技術で使用されます。
REST APIやSOAP APIを提供しているWebサービスには、例えば、クラウド環境提供のサイトがあり、REST APIを利用して、クラウドのサーバーの起動停止やサーバーの複製が可能になります。
人がページを参照する場合、指定したURLのページが見つからなければ、URL中にtypoがないか確認したり、グーグル先生に正しいURLを問い合わせしたりしますが、システム同士の通信ではそうも行かないのでアプリケーションは、適切なメソッドを使用してリクエストを行い、ステータスコードにより正しい処理に分岐する必要があります。
さて、選択肢ですが、それぞれ下記のとおりです。
Aは、その通りなので、不正解です。
Bも、その通りなので、不正解です。ブラウザのURL欄に?kkk=vvv&KKK=VVV のようにKey=Valueが&で区切られてリクエストパラメータが付いているのはGETリクエストのURLです。
Cも、その通りで、GETは255文字の制限がありますが、POSTは制限がないので、不正解です。
Dは、レスポンスメッセージにリクエストメソッドが含まれるとしていますが、リクエストメソッドは含まれずステータスコードが含まれるので、間違いであり、正解となります。
LPI-Japan
中谷 徹
- 例題1.22「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
Ajax と最も関連のない技術は次のうちどれか。 -
- JavaScript
- JavaServerPages
- jQuery
- JSON
- XMLHttpRequest
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2018年5月22日
答えはこちら
- 正解 B
-
Ajax は従来のHTMLからの大幅な発展に貢献した技術の一つです。従来はクライアントからハイパーリンクをクリックするなどの対話型のリクエストに応答する形でサーバーがコンテンツを送信していました。そのためその都度ページが遷移していました。
Ajaxの登場で非同期にデータを送受信することが可能になり、よりリッチなアプリケーションへと発展しました。Ajax は XMLHttpRequest を JavaScript を介して利用することで実装します。実際にはより実装しやすくした jQuery を利用するのが一般的です。XMLHttpRequest は非同期通信の根幹となるAPIで、requestに対する response はXMLだけでなくJSONも利用できます。したがって、A,C,D,EはAjax と関連が深い技術となります。
Bの JavaServerPages(JSP) はMVCアーキテクチャで使用される技術です。Model、View、Controller に分けて設計され、ModelはEJB(Enterprise JavaBeans)が担当し、ViewはJSPが担当します。Controller は Servlet とも呼ばれ、 Model と View を制御するJavaプログラムです。
Ajax とは直接関連のない技術なので、これが正解となります。
LPI-Japan
中谷 徹
- 例題1.21「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
カスタムデータ属性 (data-*) 名の * 部分の使用制限として正しいのは次のうちどれか。3つ選びなさい。 -
- ハイフン(-)を使ってはならない。
- xml で始めてはならない。
- コロン (:) を使ってはならない。
- 大文字の A から Z を使ってはならない。
- アンダースコア(_)を使ってはならない。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B、C、D
-
HTML5で導入された data- で始まるカスタムデータ属性(data-*)を使用することで、id, class に加えてCSS の装飾区分を増やすことができます。CSSでの指定方法は id, class と少し異なりますので、ぜひ試してみましょう。
data-* は、CSS 以外にも JavaScript でも利用できるので、さらに多彩な制御が可能になります。
さて、例題ですが、MDN Web Docs - moz://a によれば、
data- の後の文字列の制限は、XML の命名規則に加え、下記の3つの制限が記載されています。
- XML として使用する場合であっても、名前を xml で始めてはならない。
- 名前にコロン (U+003A) を含めてはならない。
- 名前に大文字の A から Z を含めてはならない。
この3つは、選択肢のB、C、Dになり、正解です。
AのハイフンもDのアンダースコアも使用できるので、不正解です。
参考文献:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*
https://www.w3.org/TR/REC-xml/#NT-Name
LPI-Japan
中谷 徹
- 例題1.20「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
価格を表示する箇所で円マーク(¥)を正しく表示できないのは次のうちどれか。 なお、文字セットは UTF8、フォントは arial、円マークの unicode 文字番号は10進表記で165とする。 -
- ¥
- ¥
- o245;
- ¥
- ¥
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 C
-
今でも時々円マークがバックスラッシュ(\)で表示されるサイトをみかけます。
JIS配列キーボードのキートップや、MS Windows のディレクトリ区切り文字の ¥ に慣れていると、¥ は、どこでも ¥ として表示されるものと思っても仕方ないですが、HTML5 の技術者がそうでは困ります。
日本語の文字がコンピュータに実装されてから、これまでにさまざまな苦労があったようです。
そのため、ASCIIコードのバックスラッシュである16進表記の 0x5C の文字が、JISコード(ISO-2022-JP)では、円マーク(¥)に割り当てられており、同じ文字コードが環境によって異なった表示になることが多々あります。
さて、例題ですが、選択肢A、B、Dは確実に円マークを表示する表記です。選択肢Aは、文字実体参照と呼ばれる方法で、人が理解・識別しやすいのでお勧めです。
選択肢B、Dは数値文字参照と呼ばれる方法で、Bは10進表記、Dは16進表記となります。
選択肢Eは、UTF8の環境で円マークであれば正しく表示されます。
選択肢Cは、数値文字参照形式ですが8進表記では正しく表示できません。
従って、正解は C となります。
円マークは上記のとおりですが、バックスラッシュ(\)はもっと気を使います。
文字セットが Shift JIS の場合、フォントに MS ゴシックが指定された場合、ブラウザが Microsoft Internet Explorerの場合、円マークで表示される可能性が高く、下記のように指定せざるを得ないようです。
<span style="font-family:arial">\</span>
LPI-Japan
中谷 徹
- 例題1.19「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
link 要素の rel 属性の使用方法として正しいものを2つ答えよ。 -
- <link rel="stylesheet" href="/default.css" type="text/css">
- <link rel="alternate" href="/en/index.html" hreflang="English">
- <link rel="alternate" media="smartphone" href="/m/index.html">
- <link rel="canonical" href="https://example.com/">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 A、D
-
link要素は、外部リソースを参照する際に使用する要素です。
Bの他言語対応のページで指定できるhreflangは、ISO 639の言語コードと国コードの組み合わせで指定する必要があり、"en", "en-us", "fr-ca" などの形式になります。
Cのmediaに指定できる値に、smartphoneはありません。携帯デバイスの場合、”handheld”を使用します。
DのcanonicalはSEOへの重複ページの影響を回避できます。
LPI-Japan
中谷 徹
- 例題1.18「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
下記のように分類される画像をWebで使用する際にそれぞれフォーマットとして最も適した組み合わせは次のうちどれか。 -
- BMP と PNG
- PNG と GIF
- JPEG と GIF
- JPEG と PNG
グループ①
・写真が多く、フルカラー(1670万色)で表示したい
・グラデーションのデザイン画がある
・背景を透過したい
グループ②
・企業ロゴなどのイラスト、アイコンが多い
・アイコンにアニメーションを入れたい
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B
-
選択肢の中でアニメーションが可能な画像はGIFのみなので、AとDは不正解です。
BとCのPNGとJPEGでは、ともにフルカラーで表示できますが、背景を透過できるのはPNGのみなので、正解はBになります。
・BMP(Bitmap Image)は、Windowsに作られた画像フォーマットで、Webでは使用できません。
・JPEG(Joint Photographic Experts Group) の特徴は、フルカラーの表現ができ、グラデーションも綺麗に表現します。
・PNG(Portable NetworkGraphics)は、JPEGと同様、フルカラーの表現ができますが、ファイルサイズがJPEGより大きくなる場合があります。JPEGと異なり、背景の透過が可能です。
・GIF(Graphics Interchange Format)は、背景の透過が可能で、アニメーションも可能ですが、256色までしか表現できません。過去に透過GIFでライセンスの問題が発生しPNGが開発された経緯があります。
上記以外にTIFF(Tagged Image File Format)と言うフォーマットもあります。高解像度の画像に向いていますが、サイズが大きくなります。
LPI-Japan
中谷 徹
- 例題1.17「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
ウェブサイトのコンテンツを、一元的に管理する仕組みの名称として最もふさわしいものを選択してください。 -
- Blog
- CMS
- リポジトリ
- データウェアハウス
- フレームワーク
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B
-
コンテンツを一元的に管理する仕組みのことを、CMS(Contents Management System)と呼びます。
一般には、ウェブサイトのコンテンツをウェブブラウザからHTMLの知識を必要とせず編集できるものをCMSと呼ぶことが多いです。
A. BlogもCMSの一形態と言えますが、時系列のある記事を管理することに特化しているため、最もふさわしいとは言えない選択肢です。
その他の選択肢については、C.リポジトリはバージョン管理システム、D.データウェアハウスはデータベース、E.フレームワークはアプリケーション開発と、異なる領域の用語ですので間違いです。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.15「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTPに規定されている認証方式に関する説明として、正しいものを2つ選択してください。 -
- BASIC認証では、ID,パスワードをウェブブラウザ標準の暗号化方式で送信する
- Digest認証では、ユーザ名とパスワードを、MD5でダイジェスト化して送信する
- Digest認証では、ユーザ名とパスワードを、暗号化せずに一部のみ送信する
- BASIC認証では、ID,パスワードを暗号化せずに送信する
- Captcha認証では、機械には判別しにくい画像を使用して認証を行なう
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B,D
-
HTTPを使用してウェブページなどを表示する際に、ユーザ名とパスワードが一致しないとエラーにする手段を認証と言います。
HTTPでは、BASIC認証とDigest認証という二種類の認証方法が規定されています。 認証が必要とされるウェブページ(などのリソース)にアクセスすると、ユーザ名とパスワードの入力が求められます。 。
BASIC認証では、ユーザが入力したユーザ名とパスワードは一切暗号化されることなく送信されます。
Digest認証では、ユーザ名とパスワードは、MD5というハッシュ関数(簡単に言うと逆算して元の文字列を推測しにくい文字列に変換)を使用して、ユーザ名とパスワードをダイジェスト(ハッシュ)化して送信します。
ウェブサーバは、毎回異なるランダムな文字列をブラウザに送信してハッシュ関数に使用するため、ネットワークを盗聴しても、ユーザ名とパスワードを盗まれにくい仕組みになっています。
ウェブ制作の現場では、作成中のウェブページを非公開にして制作とクライアントの間でのみ閲覧可能にする場合などに認証はよく使われています。
認証を行なうためにはウェブサーバ側に設定が必要ですので、利用する場合にはウェブサーバの仕様を確認してください。
Captcha認証の説明は、説明としては正しいですが、HTTPに規定されている認証方式ではありませんので、間違いとなります。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.13「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTMLのtitle要素に関する記述のうち、間違っているものをすべて選びなさい。 -
- 1つのHTML文書に必ず1つ必要。
- head要素内に配置する。
- 複数は配置できない。
- 要素内容にはテキストしか入れられない。
- 条件によっては終了タグを省略できる。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 A、E
- HTML5より前のHTML/XHTMLでは、title要素は1つの文書に必ず1つ必要でした。しかし、HTML5では「iframe要素のsrcdoc属性で指定する文書」および「上位レベルのプロトコルがタイトル情報を提供する場合(たとえば電子メールとしての件名が付けられているHTMLメールなど)」においては、title要素を省略することが可能です。したがって、選択肢のAは間違いです。 また、title要素自体は条件によっては省略可能ですが、開始タグ・終了タグともにタグの省略は一切できません。そのため、選択肢のEも間違いです。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏
- 例題1.12「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
文字(実体)参照として無効な記述を選択してください。 -
- &
- '
- ♪
- &0x1A;
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 D
-
HTMLなどで意味のある記号として扱われる、"<"、">"や、直接入力できない文字を表示するための仕組みが、文字(実体)参照です。
たとえば、文章内に"<p>"と書かれていれば、Webブラウザはタグとして処理しようとします。しかし、製作者の意図としては、文章の一部として表示してほしいとします。
このようなときに、"<"を"<"、">"を">"と記述することで、Webブラウザはタグとして処理せず、表示上だけ、それぞれ"<",">"とすることができます。
よくつかわれる文字参照としては、
< <
> >
& &
© ©
空白文字
などが挙げられます。これらは、記号の名称(略称)を&の後に記述し、最後に";"を付けます。
名称を指定する以外にも、文字コード(番号)を指定する方法もあります。
文字コードを指定する場合には2種類の書き方があり、
進数; と、 進数; です。
したがって、D.の書式は無効です。
例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.11「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTML5のコンテンツ・モデル(Content models)において、セクショニング・コンテンツ(Sectioning content)である要素の組み合わせで適切なものはどれか。正しいものを1つ選びなさい。 -
- h1 h2 h3 h4 h5 h6
- footer header main section
- blockquote body fieldset figure td
- article aside nav section
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 D
-
HTML5ではコンテンツ・モデルに基いて要素を配置します。コンテンツ・モデルのコンテンツのカテゴリーは次の7つです。
- メタデータ・コンテンツ
- フロー・コンテンツ
- セクショニング・コンテンツ
- ヘッディング・コンテンツ
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
- インタラクティブ・コンテンツ
選択肢Aはヘッディング・コンテンツの要素です。選択肢Cはセクショニング・コンテンツには含まれませんが、セクショニング・ルートと呼ばれる要素で、独自のアウトラインを持つことができます。
例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林拓也 氏
- 例題1.10「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
Data URIについての解説で誤っているのを選択してください。 -
- 主にWebサイト表示の高速化のための技術である
- 画像ファイルなど、HTMLファイルの外にあるファイルの場所を指すURIである
- 画像データのエンコードはBase64形式で行なわれる
- ブラウザによって対応状況に差がある
- HTML、CSSで使用できる
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え B
- Data URIは、通常外部ファイルへのURIを記述する、imgタグのsrc属性やCSSのurl()に直接画像データなどを埋め込むための技術です。
Data URIはデータの場所を指すものではありませんので、B.の説明は間違っています。
その他の説明は正しいです。
A. 1度のリクエストでData URIで埋め込まれた画像も取得できるため、通信回数を削減できます。
C. 画像データにはテキストとして見ると表示可能文字以外も含まれていますが、Base64エンコードをすることで文字として表わすことが出来るようになります。
D. 一部ブラウザ(IE8未満など)では対応していなかったり、扱えるデータ形式に制限があります。
E. HTMLではsrc属性など、CSSではbackground-imageのurl指定で使用することができます。
例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.9「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTML5で、文字エンコーディングを設定するために有効な書式を2つ選びなさい。 -
- <html lang="ja">
- <html charset="UTF-8">
- <meta charset="UTF-8">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta encoding="UTF-8">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え C,D
- HTML5では、文書のエンコーディングをC.のように短縮して記述することができるようになりました。
また、D.のようなHTML4までの表記も継続して使用できます。
A.は使用言語の指定ですので、文字エンコーディングの指定ではありません。
B.はhtmlタグにはcharset属性はありません。
E.はmetaタグにはencoding属性はありません。
Webページの文字化けを防ぐためにも、文字エンコーディングは指定すべきですし、当然HTMLファイルの文字エンコーディングと一致させる必要があります。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.7「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTPSを使用して、Webサーバの正当性を確認するために必要なものを2つ選びなさい。 -
- 認証局
- クライアント証明書
- 承認局
- サーバ証明書
- 署名局
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 A,D
-
HTTPSはWebクライアントとWebサーバの間の通信を暗号化する他に、Webサーバの正当性を保証する仕組みを持っています。
正当性を保証するために、Webサーバにはサーバ証明書(D)と呼ばれるファイルを設置します。
サーバ証明書には、Webサーバのホスト名などの情報の他、正当性を保証するための第三者機関による認証局(A)による電子署名が付与されています。
Webクライアントでは、アクセスするWebサーバからサーバ証明書を受けとると、認証局へ問い合わせを行ない、証明書の正当性を確認します。
最近のWebブラウザでは、正当性が確認されたWebページにはアドレスバーに南京錠のアイコンなどが表示されるようになっています。
なお、クライアント証明書(B)はクライアントの正当性を確認する必要がある場合にのみ使用されます。
また、承認局(C)、署名局(E)という用語はありません。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 例題1.6「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
Base64についての説明で誤っているものを一つ選択しなさい。 -
- バイナリデータを印字可能文字に置き換える仕組みである
- データ量は変換前と変換後で変わらない
- 英数字と記号を使用する
- 端数に当たる部分には'='を使用する
- 変換後は1行64文字で改行される
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 正解 B
- Base64は、バイナリデータやマルチバイト文字列(日本語など)をルールに従ってASCII文字のうち、英数字と記号の印字可能文字だけで記述されたテキストデータに変換します。
ASCII文字とは英数字と記号など俗に半角文字(ASCII文字)と呼ばれる文字のことです。
ASCIIテキストデータに変換することで、ASCIIテキストしか扱えない通信方式やテキストエディタでデータを扱えるようになります。
変換の手順は以下のようになります。
まずもとになるデータを24ビット取りだし、6ビットずつ4つに切り分けます。次に、6ビットで表せる数、0から63までを対応表を使って0→A,1→Bのように4文字の印字可能文字に変換します。
最後に印字可能文字をそれぞれASCIIコード8bitで表現します。そのため、変換前のデータ24ビットにつき、変換後のデータ量は32ビットになります。
これをデータが終わるまで繰り返します。 - その他の選択肢については以下の通りです。
A.バイナリデータ(不可視文字を含む)を印字可能文字を使って表現する仕組みです。
C.Base64ではA-Z,a-z,0-9,+,/の64文字を使用します。
D.元のデータが24ビットで割り切れない場合は、足りない分を'='で埋めます。
E.変換後の文字列が64文字以上になった場合は、64文字ごとに改行文字を挿入します。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏
- 問題1.4 「1.1.2 HTMLの書式」
- レベル1の出題範囲「1.1.2 HTMLの書式」からの出題です。
HTML文書において、外部スタイルシート「style.css」を読み込ませるための記述として正しいものを1つ選びなさい。 -
- <link href="style.css">
- <link href="style.css" type="text/css">
- <link rel="text/css" href="style.css">
- <link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="style.css" type="text/plain">
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え D
- HTML標準では、link要素には必ずrel属性を指定する必要があります。Cはrel属性の値として、キーワードではなくMIMEタイプを指定していますので間違いです。Eのtype属性に指定されているMIMEタイプ「text/plain」はCSS向けのものではありませんので、「style.css」は読み込まれません。Dのようにtype属性が省略されると、rel属性の値が「stylesheet」の場合のデフォルト値「text/css」が適用されます。
よって正解はDとなります。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏
- 例題1.3「1.1.3 Web関連技術の概要」
- レベル1の出題範囲「1.1.3 Web関連技術の概要」からの出題です。
XHTML書式の特徴についての説明で、正しいものを2つ選びなさい。 -
- html要素の開始タグにXHTML用の名前空間を指定する。
- html要素の代わりにxhtml要素を使ってもよい。
- 属性の値は「"」や「'」で囲む必要はない。
- 要素名や属性名は全て大文字で記述しなければならない。
- 空要素には終了タグを付加するか、開始タグの閉じかっこを「/>」としなければならない。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え A、E
- HTML5はXHTML書式を利用できます。
その際、html要素にはデフォルト名前空間としてxmlns属性で「http://www.w3.org/1999/xhtml」を指定する必要があります。
要素名や属性名は全て小文字で記述する必要があります。
属性の値は「"」や「'」で囲む必要があります。
xhtml要素という要素はいずれのXHTML仕様にも存在しません(2014年5月現在)。
例題解説の提供:株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏
- 例題1.2「1.1.1 HTTP, HTTPSプロトコル」
- レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの出題です。
HTTPプロトコルにおけるExpiresヘッダフィールドに関する記述として間違っているものを1つ選びなさい。 -
- キャッシュを利用する事でウェブページに関するロードの高速化が期待できる。
- HTTPリクエストに付加され送信される。
- キャッシュの有効期間期限を指定できる。
- スクリプトやスタイルシートにも利用できる。
- HTTP/1.1において、Cache-Controlフィールドのmax-age指示子がある場合は、Expiresフィールドは上書きされる。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え B
- Expiresヘッダフィールドは、Webコンテンツ提供者がそのコンテンツが最新である期間を示すために指定するものです。
よって、レスポンスに記述されるものであり、リクエストに付加されるというBの記述は間違いです。 - A,C,D,EはExpiresヘッダフィールドの説明として適切です。
例題解説の提供:メディアスケッチ株式会社(ビジネスパートナー)
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。
- 例題1.1「1.1.1 HTTP, HTTPSプロトコル」
-
レベル1の出題範囲「1.1.1 HTTP, HTTPSプロトコル」からの例題を解説します。
HTTP/1.1に関する記述のうち、間違っているものを選びなさい。 -
- トランスポート・プロトコルとして、通常はTCPを使用する。
- デフォルトのポート番号は80番である。
- 定義されているメソッドは、GETとPOSTの2種類である。
- リクエストには、リクエストライン・リクエストヘッダフィールド・ボディメッセージなどが含まれる。
- レスポンスにおけるステータスコードの番号が5から始まる場合は、サーバ側でなにか問題が発生している可能性が高い。
※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
答えはこちら
- 答え C
- Aは正しい記述です。 HTTPプロトコルは、アプリケーション層のプロトコルとして定義されており、OSI参照モデルにおける第7層に位置するプロトコルです。HTTPは第4層のトランスポート・プロトコルに、通常TCPを利用します。よって、ファイアウォールにおいてTCPに関する設定をしている場合は、HTTPのプロトコルにも影響する場合があります。 Bは正しい記述です。デフォルトポートは80番で、ブラウザで特にアクセスするポート番号を指定しない場合は、自動的に80番ポートに接続する事になります。 Cは、間違いです。HTTP/1.1では、GET、POST以外にも、PUT、DELETE、HEADなど合計8個のメソッドが定義されています。ほとんどの場合、GETかPOSTを使いますが、最近ではRESTアーキテクチャのような、相互データ交換の目的でPUTやDELETEを使うこともあります。Dは正しい記述です。リクエストには様々なヘッダを記述することができ、それによってクライアントに関する情報(利用しているブラウザの種類など)をサーバに送信することができます。Eは正しい記述です。RFC2616(Hypertext Transfer Protocol -- HTTP/1.1)の定義では、ステータスコードが5xxの場合、つまり5で始まる3桁の数字であればサーバがエラー状態にあるか、処理する能力がない場合に返すと定義されています。
例題解説の提供:メディアスケッチ株式会社(ビジネスパートナー)
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。