マークアップの大まかな仕組み #CSS

HTML

Hyper Text Markup Langurageの略称。
ハイパーテキストとは、文章の中に他の文章へのリンクを埋め込み、複数の文章を相互に関連づける仕組みのこと。HTMLはこのハイパーテキストを実装するための言語である。
HTMLは文書の構造と見た目を表現するタグによって構成される。

html

<!-- 1番の見出しを表現するタグ。色を赤に変更 -->
<h1 style="color: red">hello world</h1>
<div class="box">
  <p>I'm Mike!</p>
</div>

HTMLがで始めた初期の問題

HTMLを解析するwebブラウザのベンダーによるシェア争奪戦により独自の機能拡張を行なっていた。その結果、以下のような問題が発生した。

本来のHTMLの仕様や、tableレイアウトなど目的通りに使用されないといった問題。
webブラウザごとの実装の違いによる開発者への負担の増加。
視覚ブラウザの表示のみを目的とした限定的なwebサイトが多く、音声ブラウザなどへの配慮がない。

上記の問題を解決するために、ウェブスタンダードプロジェクトを始めとする組織がwebブラウザベンダーにweb標準のサポートを呼びかけていく。

web標準

web標準とは、W3Cを始めとする標準化団体が策定、規格化したWebの標準規格の総称のこと。
web標準に準拠したwebサイトとは、HTMLとCSSによって実装され、文章構造と視覚表現が完全に分離されたwebサイトのこと。
web標準には以下のようなメリットがある。

webアクセシビリティの確保

テーブルレイアウトがなくなり、音声ブラウザに対応したブラウザ環境の構築が可能になった。

SEO効果の向上

適切に構造化されたHTMLは検索エンジンのクローラにも理解しやすい。

閲覧環境の多様化への対応

文章構造と視覚表現が分離されたため、携帯、テレビなど各ブラウザごとに違うスタイルを用意することが可能になった。

ファイルサイズの低減

HTMLソースが簡素化されファイルサイズの肥大を防ぐ。さらに簡素化されたHTMLソースはメンテナンス性の向上にも繋がる。

標準化団体

標準化団体	概要
W3C(World Wide Web Consortium)	web標準を取りまとめる代表的な団体。HTML,CSSを策定している。MITにて設立。現在はERCIMと慶応大学SFCの3組がホストとなって運営。
ISO(International Organization for Standardization)	工業規格の国際標準化団体。文字コードのISO639やUnicodeを策定。
IETF(Internet Engineering Task Force)	インターネット技術の標準化団体。IETF策定の技術仕様はRFCと呼ばれ、TCP/IP、FTP、HTTPなどがある。
ICANN(Internet Corporation for Assigned Names and Numbers)	IPアドレスやアドレス資源の標準化や割り当てを行う組織。
Ecmaインターナショナル	Javascriptの標準規格の策定を行う。
JIS(Japan Industrial Standards)	全身は日本標準規格。

HTMLの仕組み

HTMLが行うのは文章の構造化である。構造化とはそれぞれの文章の関係性を明確にすることである。例えば、見出しとそれにひもづく段落。

HTMLは全てが要素という単位で構成される。html要素が文章全体を囲み、その下にhead要素、body要素がある。headには、文章の基本情報のキーワードや説明を記述するmetaタグ、tileなどが入る。実際にブラウザに表示される部分はbody要素内に記述される。

html

<!doctype html>
<html lang="en"> <!-- 全体を囲むhtml要素 -->
<head><!-- 基本情報を記述するhead -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body><!-- 描画部分を記述するbody -->

</body>
</html>

要素はタグと呼ばれる目印によって記す。開始タグと終了タグで構成される。要素はブロックレベル要素とインラインレベル要素に別れる。
- ブロックレベル要素・・・見出しや段落など、それ自体が独立した塊で、文章構造を構成する要素のもの。
- インライン要素・・・行内要素という意味で、ブロックレベル要素内の特定の部分に意味合いや役割を持たせるもの。画像や強調要素など。

* HTMLやXHTMLには様々なバージョンがあり、HTML上で明示する必要がある。これを文章型定義(Document Type Definiation)という。XHTMLはXMLアプリケーションであるため、文頭にXML宣言が必要になる。

html

<?xml version="1.0" encoding="utf-8"?> <!-- XML宣言をここでしている -->
<!DOCTYPE html> <!-- 文章型を定義 -->
<html xml:lang="ja" lang="ja">
<head>
<title>XHTML5</title>
</head>
<body>
<p>XHTML5</p>
</body>
</html>

CSSの仕組み

CSSはHTMLの文章構造と視覚表現を分離する目的で策定されたもの。
CSSは視覚表現に関する仕様が盛り込まれている。

文章構造と視覚表現を分離するメリット

スタイル一括管理によるメンテナンス性の効率向上
出力メディアごとに違ったスタイルを指定可能
精密なスタイル実装
HTMLファイルサイズの低減
環境に依存しないwebページの実現（音声ブラウザ等でも理解しやすいページの実現）

CSSの書き方

css

h1 {
 color:red; /*色を赤に指定*/
}

#foo {
  font-size:30px;  /*文字サイズ30px*/
  text-align: center; / /*文字を中央寄せ*/
}

CSSの指定方法は以下のような種類がある。

外部ファイル読み込み
インラインに指定
head要素に直接指定

html

<!DOCTYPE html> <!-- 文章型を定義 -->
<html lang="ja">
<head>
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="style.css">
<title>XHTML5</title>
<!-- head要素に直接指定 -->
<style type="text/css">
    #foo {
      font-size: 30px;
    }
  </style>
</head>
<body>
<!-- インラインに指定 -->
<h1 style="color: red">hello world</h1>　
</body>
</html>