資格道場 › レッスン一覧 › 情報メディア

情報メディア・5/5・8分

Webの文書記述（XML・CSS）と動的な画面更新

ゴール

XML・DTD・SVG・CSS・Ajax の定義を、似た用語（HTML・CMS・RSS・DOM・PNG など）と取り違えずに選べるようになる。用語の説明文を読んで、どの技術のことかすぐ答えられる状態がゴール。

科目Aでは「この説明はどの技術？」という4択の用語問題がよく出ます。このレッスンの用語は Web 系の選択肢で何度も使い回されるので、一度区別できれば他の問題の消去法にも効きます。

このレッスンで稽古する（用語チェック・過去問）

結論：役割は5つに分かれる

このレッスンの5つは、何を担当するかで覚えると混ざりません。

技術	担当	ひとことで
XML	データの構造と意味	タグを自分で作れる記述言語
DTD	XMLのルール	どんなタグを・どの順で使ってよいかの定義
SVG	図形	XMLで書いたベクタ画像
CSS	見た目	文字の大きさ・色・行間などを指定
Ajax	動き	画面全体を読み直さずに一部だけ更新

Webページを家にたとえると、XML/HTML が間取り（構造）、CSS が内装（見た目）、Ajax が住んだまま部屋の家具だけ入れ替える工事です。

XML：タグを自分で決められる（最頻出）

XML（Extensible Markup Language）は、<商品名> や <価格> のように利用者が独自のタグを定義して、データの構造と意味を表す言語です。マークアップ言語とは、文章に「ここは見出し」「ここは価格」といった印（タグ）を付けて意味を持たせる言語のことです。

タグを自由に決められるので、システム間のデータ交換に向いています。API 設計でいえば、JSON と同じ「データの入れ物の書式」の仲間だと思ってください。

HTML・SGML との関係は試験でよく狙われます。

言語	タグ	主な目的	関係
SGML	定義できる	文書構造の記述（汎用・複雑）	元祖。HTMLもXMLもここから生まれた
HTML	決まったものだけ使う	Webページを表示する	SGMLを基にWeb用に作られた
XML	自由に定義できる	データの構造・意味の表現と交換	SGMLを基に簡素化。HTMLの拡張ではない

押さえる点は3つです。

XML はテキスト形式なので、普通のテキストエディタで書ける（専用エディタは不要）
XML は構造だけを表す。表示スタイルはCSS や XSL に分けて持たせる（構造と見た目は分離）
C++ 系の言語、CGI 用のスクリプト言語、DTP（印刷物の版下作り）のページ記述言語の説明が選択肢に来たら、それは XML ではない

XMLは自分で決めたタグでデータの構造と意味を書き、見た目はCSS・XSLに分けて持たせる

DTD：XML文書の「ルールブック」

DTD（Document Type Definition＝文書型定義）には、そのXML文書で使える要素（タグ）や属性、並び順などの文書型の定義を書きます。データベースでいえばテーブル定義（スキーマ）に近い役割です。

書く場所	書く内容
XML宣言（文書の先頭行）	バージョン情報・文字コード
DTD	文書型の定義（要素・属性のルール）
本文	データそのもの

「文字コード」や「バージョン情報」は XML宣言に書くものなので、DTD の選択肢に出たら外します。

SVG：XMLで書く図形（ベクタ画像）

SVG（Scalable Vector Graphics）は、W3C（Web技術の標準化団体）が定めた、矩形・円・直線・文字などの図形をXML形式で記述するベクタ画像フォーマットです。点の集まりではなく図形の式で持つので、拡大してもぼやけません。

名前	分類	見分け方
SVG	ベクタ画像（XML）	図形をXMLで記述する
PNG	ラスタ画像	点（画素）の集まり・可逆圧縮
TIFF	ラスタ画像	点の集まり・印刷やスキャンでよく使う
OpenGL	画像形式ではない	3Dグラフィックスを描くためのAPI

拡大するとラスタ画像（PNG・TIFF）は点の集まりなのでギザギザになり、SVGは図形の式なのでなめらかなまま

CSS：見た目担当・ブラウザ側で処理

CSS（Cascading Style Sheets）は、HTML や XML の要素をどう表示するか（文字の大きさ・色・行間・配置など）を指定する標準仕様です。ブラウザ（クライアント側）で処理されるのが大きな特徴です。

選択肢に並ぶ「Web っぽい用語」と区別します。

用語	何か	処理する場所
CSS	見た目（スタイル）の定義	クライアント（ブラウザ）
CMS	Webサイトのコンテンツを管理するシステム（WordPressなど）	サーバ
RSS	サイトの更新情報を配信する書式	―
Wiki	閲覧者が共同でページを編集できる仕組み	サーバ
CGI	Webサーバが外部プログラムを動かす仕組み	サーバ
PHP	サーバで動くスクリプト言語	サーバ
SSI	HTMLにサーバ側で部品を埋め込む仕組み	サーバ

「クライアント側で処理」と書かれていたら、選択肢の中で CSS だけが当てはまる、と覚えれば一発です。

Ajax：画面を丸ごと読み直さない

**Ajax（Asynchronous JavaScript + XML）**は、JavaScript の非同期通信を使って、ブラウザとWebサーバがデータ（XMLなど）をやり取りし、画面全体を遷移させずに一部だけを書き換える技術です。非同期とは、通信の返事を待つ間も画面操作を止めないことです。

身近な例は、地図をドラッグすると周りがすぐ表示される、検索窓に1文字打つごとに候補が出る、の2つ。試験の説明文にもこの2例がそのまま出ます。

用語	何か
Ajax	非同期通信で画面の一部を動的に更新する技術
DOM	HTML/XML文書を木構造として扱い、プログラムから操作するためのAPI
SAX	XMLを先頭から読み、タグごとにイベントを起こすパーサ（読み取り部品）
CSS	見た目の定義
SOAP	HTTPでXMLのメッセージをやり取りする通信方式
HTTP	ブラウザとWebサーバの基本の通信方式

キーワードは**「JavaScript」「非同期」「画面全体を遷移させない（再読込しない）」**の3つ。これが揃ったら Ajax です。

従来は画面全体を読み直すが、AjaxはJavaScriptの非同期通信で必要な部分だけを書き換え、画面は遷移しない

要点（試験直前に読む）

XML＝利用者が独自のタグを定義できる。データの構造・意味を表し、システム間のデータ交換に使う。HTMLの拡張ではない（どちらもSGMLが基）
XMLは構造だけ。見た目はCSSやXSLに分ける。テキスト形式なので専用エディタは不要
DTD＝文書型の定義（要素・属性のルール）。文字コード・バージョンはXML宣言に書く
SVG＝図形をXMLで書くベクタ画像（W3C）。PNG・TIFFはラスタ、OpenGLはAPI
CSS＝見た目の定義で、クライアント（ブラウザ）側で処理。CGI・PHP・SSIはサーバ側
Ajax＝JavaScript＋非同期通信＋画面全体を遷移させずに一部を更新（地図のスクロール、検索候補の逐次表示）

ひっかけ

「XMLはHTMLを拡張したもの」「HTMLの表示性能を上げたもの」は誤り。XMLは任意タグでデータを表す言語で、HTMLとはSGMLを親に持つ兄弟
「XMLは文書の論理構造と表示スタイルを統合したもの」は誤り。構造と見た目は分離する（見た目はCSS/XSL）
DTDの選択肢に「文字コード」「バージョン情報」「データ」が並んだら外す。DTDに書くのは文書型の定義だけ
「表示クライアント側で処理」とあればCSS。CGI・PHP・SSIはすべてサーバ側なので消去できる
Ajaxの選択肢にDOM・SAX・CSS・SOAPが並ぶ。「非同期」「画面全体を遷移させない」の2語を探せばAjaxに決まる

用語（18）

XML Extensible Markup Language
利用者が独自のタグを定義して、データの構造と意味を表すマークアップ言語。
⚠ HTMLはタグが決まっていて表示が目的。XMLはタグを自由に作れて、データ交換が目的。XMLはHTMLの拡張ではない。

HTML HyperText Markup Language
決められたタグを使ってWebページの構造を書くマークアップ言語。
⚠ XMLと違ってタグを独自に定義できない。

SGML Standard Generalized Markup Language
文書の構造を記述する汎用のマークアップ言語で、HTMLとXMLの元になったもの。
⚠ 「XMLはSGMLと無関係に独自に作られた」は誤り。XMLもSGMLが基になっている。

マークアップ言語 まーくあっぷげんご
文章にタグで印を付け、見出しや項目などの意味・構造を表す言語。
⚠ C++やPerlのようなプログラミング言語とは別物。

DTD Document Type Definition
XML文書で使える要素や属性、その並び方などの文書型を定義したもの。
⚠ 文字コードやバージョン情報はXML宣言に書く。DTDではない。

XML宣言 えっくすえむえるせんげん
XML文書の先頭に置き、XMLのバージョンや文字コードを示す記述。
⚠ DTD（文書型の定義）と取り違えやすい。

XSL Extensible Stylesheet Language
XML文書の表示方法や変換方法を指定するスタイル言語。
⚠ XMLのスタイルにはCSSもXSLも使える。「HTMLと同じスタイル言語しか使えない」は誤り。

SVG Scalable Vector Graphics
W3Cが定めた、図形をXML形式で記述するベクタ画像フォーマット。
⚠ PNG・TIFFは画素の集まり（ラスタ画像）。OpenGLは3D描画のAPIで、画像形式ではない。

ベクタ画像／ラスタ画像 べくたがぞう／らすたがぞう
ベクタ画像は図形を座標や式で持ち、拡大しても劣化しない。ラスタ画像は点（画素）の集まりで持つ。
⚠ SVGはベクタ、PNG・JPEG・TIFFはラスタ。

CSS Cascading Style Sheets
HTMLやXMLの要素の文字の大きさ・色・行間などの見た目を指定する仕様で、ブラウザ側で処理される。
⚠ CMS（コンテンツ管理）と字面が似ている。CGI・PHP・SSIはサーバ側で処理される。

CMS Content Management System
Webサイトの文章や画像を、専門知識がなくても管理・更新できるようにするシステム。
⚠ CSSは見た目の定義。CMSはコンテンツの管理。

RSS RDF Site Summary／Really Simple Syndication
Webサイトの更新情報（見出しや要約）を配信するためのXMLベースの書式。
⚠ 見た目のCSSや、画面更新のAjaxとは別物。

CGI Common Gateway Interface
Webサーバがブラウザの要求に応じて外部プログラムを動かし、結果を返す仕組み。
⚠ サーバ側で処理される。クライアント側で処理されるのはCSS。

SSI Server Side Include
HTMLの中に、サーバ側で別ファイルや実行結果を埋め込んで返す仕組み。
⚠ 名前のとおりサーバ側。CSSはクライアント側。

Ajax Asynchronous JavaScript + XML
JavaScriptの非同期通信でサーバとデータをやり取りし、画面全体を読み直さずに一部だけを更新する技術。
⚠ DOMは文書を操作するAPI、SAXはXMLのパーサ、CSSは見た目。「非同期」「画面遷移なし」が揃えばAjax。

非同期通信 ひどうきつうしん
サーバの返事を待つ間も処理や画面操作を止めずに進める通信のやり方。

DOM Document Object Model
HTMLやXMLの文書を木構造として扱い、プログラムから読み書きするためのAPI。
⚠ Ajaxが画面を書き換えるときにDOMを使うが、非同期通信の技術そのものはAjax。

SAX Simple API for XML
XMLを先頭から順に読み、タグを見つけるたびにイベントを起こして処理するパーサ。
⚠ DOMは文書全体を木構造で持つ。SAXは読みながら順に処理する。

このレッスンの過去問

このレッスンで稽古する

← 文字コード・コード化とデータの見せ方