マークアップ言語とWebの技術

ねらい

Webページを作る技術を学びます。このレッスンを終えると、文章に意味の印を付けるという考え方を説明でき、構造・見た目・動きが分かれている理由が分かるようになります。

マークアップ — 文章に、意味の印を付ける

マークアップ言語は、文章の各部分が何であるかを、印（タグ）で示す言語です。「ここは見出し」「ここは段落」「ここは表」と印を付けます。

なぜ印を付けるのかというと、機械には見た目から意味が分からないからです。人は大きな太字を見て「見出しだな」と判断できますが、機械には「大きな文字」としか見えません。見出しだという印があれば、機械も見出しとして扱えます。

これによって、次のことが可能になります。

• 読み上げソフトが、見出しを飛ばして読める。
• 検索の機械が、どこが主題かを判断できる。
• 同じ内容を、画面の大きさに応じて違う見せ方にできる。

HTMLとXML

• HTML… Webページを記述するためのマークアップ言語です。見出し・段落・表・リンク・画像といったあらかじめ決められた印を使います。
• XML… 利用者が印を自分で決められるマークアップ言語です。<商品名> <単価> のように、扱う対象に合わせた印を作れます。主にデータの受け渡しに使われます。

HTMLは「Webページのため」に印が決まっており、XMLは「何にでも使えるように」印を自由に決められます。この違いが、用途の違いにつながります。

構造・見た目・動きを分ける

Webページは、3つの役割に分けて作られます。

分けておく利点は、片方だけを差し替えられることです。見た目を変えたいときにCSSだけを直せば、文章には手を触れずに済みます。スマートフォンと大きな画面で見せ方を変えるのも、同じCSSの働きです。

JavaScriptは、利用者の手元（ブラウザ）で動きます。サーバとやり取りせずに反応を返せるので、画面が速く感じられます。

データを受け渡す形式

システム間でデータをやり取りするとき、形式を合わせる必要があります。

• CSV… 値をカンマで区切った、単純な形式。表計算ソフトで扱いやすい形です。
• XML… 印で意味を付けられるため、構造のあるデータを表せます。
• JSON… 名前と値の組で表す形式。軽く、プログラムから扱いやすいため、Webのやり取りで広く使われます。

単純な表ならCSV、階層があるならXMLかJSONが目安です。

そのほかのWebの言葉

• URL… インターネット上の場所を示す文字列です。
• HTTP／HTTPS… Webページをやりとりするときの取り決めです。HTTPSは通信が暗号化されていることを表します。
• CMS… Webページの中身を、専門知識が無くても更新できるようにするしくみです。
• アクセシビリティ… 年齢や障害の有無にかかわらず使える状態にすることです。マークアップを正しく行うことが、その土台になります。

まとめ

マークアップ言語は、文章の各部分が何であるかを印で示す言語です。機械が意味を扱えるようになるので、読み上げや検索が成り立ちます。HTMLは構造と意味、CSSは見た目、JavaScriptは動きを受け持ち、分けておくことで片方だけを差し替えられます。データの受け渡しでは、単純な表ならCSV、構造があるならXMLかJSONを使います。

理解の確認

Webページの文字の大きさと配色だけを変更したいとき、HTMLとCSSのどちらを修正すべきでしょうか。またこのように役割を分けておく利点を述べてください。

答え: CSSを修正します。CSSが受け持つのは文字の大きさ・色・余白・配置といった見た目であり、HTMLが受け持つのは「ここは見出し」「ここは段落」といった構造と意味だからです。利点は、片方だけを差し替えられることにあります。見た目を変えるためにHTMLへ手を入れる必要がないので、文章の中身や構造を壊す心配がありません。逆に、同じHTMLに対して異なるCSSを当てることで、スマートフォン向けと大きな画面向けで見せ方を変えることもできます。もし見た目の指定が文章の中に混ざっていると、変更のたびに全ページを直すことになります。