このドキュメントは http://edu.net.c.dendai.ac.jp/ 上で公開されています。
マークアップとはもともとは文書の注釈で、組版などの仕上がり の指示を出すための記号のことでした。 そのような記号として「段落を分ける」「誤字を直す」など小学校でいくつか 習ったと思います。
マークアップ言語とはこれらの手法の集まりを言います。 XML 以前にも UNIX の roff システムや論文プロセッサの TeX など、テキス トファイルにマークアップを行い、さらに、組版(画面やプリンタでの仕上がりの指定) をコントロールしたものがいくつかありました。
1967 年にGCA（グラフィックコミュニケーション協会）の会長ウィリアム・タ ニクリフはカナダ政府印刷局の会合中に文書の構造情報と体裁情報の分離を提 唱しました。 これを受けて、1969 年に IBM の Ed Mosher, Ray Lorie, Charles F. Goldfarb が Generalized Markup Language というものを提案しました。 これがその後 SGML (Standard GML) に発展し、 1986 年に ISO8879 という国際規格になりました。
SGML はメタ言語です。つまり様々なマークアップ言語を定義するためのルー ルです。 特定の文書に対してそれをマークアップするための定義を記述し、実際にその 文書をマークアップします。 この、マークアップするための定義を文書型定義(Document Type Definition DTD)と言います。 つまり SGML 文書は、 DTD とそれに基づいてマークアップされた文書の組で 表現されます。 これは、「文脈自由文法」と「ルール」と「そのルールにしたがった文字列」 との間の関係と同じようなものです。
| 文書型定義(DTD) |
| マークアップされた文書 |
SGML 文書の構造
さて、WWW はもともと応用物理学者のティム・バーナーズ・リーが論文を 共有するためにCERN(欧州原子核研究機構)で作られました。 論文には特有の文書構造があるため、プレインテキストではなく、適当なマー クアップが望まれました。 そのため、 SGML を用いて WWW 用の DTD が作成されました。 この DTD で規定された WWW 用の文書のマークアップ法が最初 のHTML です。 ティム・バーナーズ・リーの考案したHTMLに対して、マーク・アンドリーセン はモザイクブラウザを作成し、画像の表示が可能になりました。 この頃のHTML は HTML2.0 と呼ばれ、IETF により RFC1866として規定されました。
そして、Netscape Communications 社と Microsoft によるブラウザ戦争が 勃発し、Netscape Navigator と Internet Explorer の機能の拡張に合わせ て、ドキュメントの記述機能もどんどん増えていきました。
WWWに関する標準化を行う団体として W3C(World Wide Web Consortium)が発 足し、混乱したドキュメントの記述を HTML 3.2 として標準化しました(1997/1)。 そして、概念的に整理したものを HTML 4.0 として標準化しました (1997/12)。 HTML 4.0 は3つの規格からなります。
HTML4.0 はその後、バグの修正などで HTML 4.01 となりました。
HTML の規格の騒動が一段落した後、W3Cは SGML がもともと持つ強力な自由度 がコンピュータ処理を複雑にしているという問題に手を付けました。 そして、 SGML とある程度の互換性を維持しつつ、拡張可能にし、さらにコンピュー タ処理を容易にしたものとして XML を定めました(1998) そして、さらに HTML4 を XML 化する作業が行われました。 まず、HTML4 とほぼ完全互換を目指した XHTML1.0 が登場しました。 これは、 XML の文法に合わせるために HTML4 にいくつか制約を与えたような ものです。 XHTML1.0 には Transitional, Strict, Frameset の3種類があります。 そして、さらに、 XML の特徴である拡張可能性を使えるようにしたのが XHTML1.1です。これは HTML4.01 Strict と機能的に互換性があり、さらに XMLの拡張機能が使えるものです。 HTML3.0 には数式が入るなどと言う話がありましたが、 XHTML1.1 でついに数式(MathML)が使えるようになりました。
W3CはXMLを中心技術として、様々な標準規格を制定していきました。 なお、W3CはXHTML1.1 とは互換性のない、1から設計し直したマークアップ言 語 XHTML2 の策定をはじめました。
Netscape Communicator 2.0 からはLiveScript(JavaScript)による画面表示 の変更が可能になりました。 これは JavaScript に対応したAPIとして、 DynamicHTMLと呼ばれる HTML ドキュメント への API が定められました。 一方、Internet Explorere 3.0 にも似たような DHTML が搭載されました。
このマークアップされたドキュメントのデータ構造と、プログラミング言語 への API は DOM(Document Object Model)として、W3C が標準 化するようになりました。 当初は XML に対して規格化されましたが、DOM2HTMLで HTML ドキュメント にも対応しました。
DOM の API はウェブブラウザだけでなく、 XML をデータ記述のために使うために、 多くのプログラミング言語で作られました。
当初、Webによるユーザとのやり取りは、Form と言うページ内に値を入力し、 Submitボタンを押して、次のページに値を引数として渡す仕組みで行っていました。 引数の処理はCGI(Common Gateway Interface)というもので、任意のプログラムを起 動して標準入力から引数をそのまま与え、プログラムからの標準出力をその ままブラウザに送るような仕組みでした。
しかし、その後のブラウザにより、Form の内容を JavaScript のプログラ ムに送ることができる様になりました。 そして、ブラウザに内蔵されている通信 API（XMLHttpRequest）を用いて、ページを切り替えること無く、サーバと データをやり取りして画面の任意の部分を更新できるようになりました。 このような技術を Ajax(Asynchronous Javascript+XML)と呼びます。
この技術を用いることで Webブラウザ上で入出力機能の豊富なアプリケーショ ンソフトを作ることができるようになりました。 HTML4, XHTML1, DOM2HTML を含み、Ajaxなどの改良を加えた HTML が Apple, Mozilla, Opera による WHATWG というグループにより提案され、W3Cにより HTML5 とし てまとめられました。 しかし、規格としてまとめようとした W3C と、常に改良を続けて発展させて いこうとする WHATWG で意見が合いませんでした。 そして、最終的に 2019 年に WHATWG が主導で HTML Standard として開発されることになりました。 2018年3月に古いHTML4.01や XHTML1.1 などが廃止され、 2021年1月にHTML5が廃止になるとともに、 W3Cとして HTML Standard が正 式な勧告とされました。
マークアップのメタ言語 XML(Extensible Markup Language) を紹介します。
XML の基本的な要素の記法は、次のような書式になります。
<要素名 属性1="値1" 属性2="値2"> 内容 </要素名>
この始めの要素名の部分を「開きタグ」と言い、/(スラッシュ)の部分を「閉 じタグ」と言います。
なお、内容がない要素の記述法は次のようにします。
<要素名 属性1="値1" 属性2="値2" />
さて、データに対して、そのデータを含む抽象的な概念に関するデータをここで はメタデータと呼ぶことにしましょう。 例えば、「坂本直志, データ構造とアルゴリズム II, 火曜日 2 限」というデー タに対して「担当, 科目名, 日時」というデータがメタデータとして対応しま す。 さらにこれらはさらなる「授業」というメタデータに対応します。 このような関係に対して、XML では次のような表し方をします。
<授業>
<担当>坂本直志</担当>
<科目名>データ構造とアルゴリズム II</科目名>
<日時>火曜日 2 限</日時>
</授業>
<授業>
<担当 name="坂本直志" />
<科目名 name="データ構造とアルゴリズム II" />
<日時 day="火曜日" period="2 限" />
</授業>
<授業 担当="坂本直志" 科目名="データ構造とアルゴリズム II"
日時="火曜日 2 限" />
このようにデータを表す際に、要素を用いる方法と、属性を用いる方法があり ます。 これらの違いについて考えてみましょう。
XML では要素は属性とデータを含むことができます。 しかし、含む際に制約条件があります。 まず、データとして含めるデータ型は #PCDATA と呼ばれています。 これは様々なデータを含め、マークアップが可能です。 一方、属性では ""(ダブルクォーテーションマーク) 中にデータを書きますが、 ここに書けるデータは CDATA と呼ばれる文字列データです。 これにはマークアップはできません。 そのため、 CDATA 中には構造のあるデータは書くことができません。
<要素名 属性1="CDATA" 属性2="CDATA"> (属性値には<などは入れられるがマークアップできない) #PCDATA(内容には< など直接書いてはいけない文字がある一方、 他の要素を含むことができる) </要素名>
また、属性に関しては同じ属性は二度現れてはいけないという制限があります。 例えば、授業担当者が複数存在したり、実施日が週に2回以上あるような場合 が想定される場合、それは属性としては表現できません。 また、一人の授業担当者の名前が一つしかないとか、授業科目の名前も一つし かないなど、必ず唯一性が成立していなければならないような状況の場合、属 性としてデータを持たせると、それを処理させるプログラム側で唯一性のチェッ クが不要になります。 このようなことを踏まえると、上記の例は次のように定義すると良いことがわ かります。
<授業 科目名="データ構造とアルゴリズム II" > <担当 name="坂本直志" /> <日時 day="火曜日" period="2 限" /> </授業>このようにすると次のような記述もできます。
<授業 科目名="情報通信基礎実験" > <担当 name="金田先生" /> <担当 name="坂本直志" /> <日時 day="月曜日" period="3 限" /> <日時 day="月曜日" period="4 限" /> </授業>
このようにすると複数の指定が可能な部分とそうでない部分で切り分け、XML のルールから制約を設定できます。
それでは、 XML に関して細かいルールを見ていきましょう。
XML は基本的には Unicode で記述します。 特に UTF-8 で記述すれば文字コードの宣言自体を省略できます。 しかし通常は XML 文書の冒頭の XML 宣言で文字コードの宣言をします。
<?xml version="1.0" encoding="utf-8"?>
utf-8 以外で記述しても構いませんが、 Shift_JIS など宣言を書く必要があ ります。
XML 1.0(1998) では要素名や属性名は英字などしか使用できませんでした。し かし、XML 1.1(2004) は要素名にも今まで示した例のように日本語が使えるよ うになりました。 しかし、いくら様々な国の言語の文字をユニコードで指定できるというのは長 所でもありますが、一方で欠点にもなり得ます。 つまり XML 文書を英語以外の言語だけで完結できる一方、現状のパソコンの ように「英語+一言語」という仕様では、指定された外国語が利用可能でない と、 XML 文書その物が他言語のフォントをインストールしなくては確認できないよ うな状況になりえます。 そのためか、 XML1.1 は現在普及していません。 本講義でもたとえ話のような説明以外は、 XML 1.0 を使用し、要素名に英数 字を使います。
さて、要素名ですが、 SGML では大文字小文字を区別しませんでしたが、 XML では区別することになりました。 これでパーサを書くのは楽になりました。 例えば、HTML では要素名を大文字でも小文字でも記述できました。 しかし、 XML に基づいて作られた XHTML では要素名は小文字のみになっています。 そのため、 HTML からXHTML への変換を考えると、少なくとも要素名が小文字 になっているかをチェックする必要があります。
また、文字列を表す時ですが、 CDATA ではタグなどを入れてもそのまま文字
列として解釈されますが、 #PCDATA ではタグはすべて意味があるものとして
解釈されてしまいます。
そのため、内容に < などのタグの一部になる文字が含まれるものを書
く場合は注意が必要です。
例えば、 script 要素の内容にはプログラムを書きます。
つまり、 script の内容に対してマークアップは不要ですが、大小比較のため
に、大量の< などの記号が含まれるような場合は、
<![CDATA[ と ]]>
の間にプログラムなどを入れるという表現があります。
一方、単純に一文字だけ < などを入れるには実体参照という
表現を使います。
実体参照にはこの他キーボードから直接入力しづらいような文字も指定します。
下記がよく使われる実体参照です。
| 実体参照 | 表示される文字 |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
| © | © |
| ™ | ™ |
| α | α |
| ♠ | ♠ |
| € | € |
また、
&#文字コード(10進数); や
&#x文字コード(16進数);
で指定した文字コードの指す文字を表示できます。
ここでは XML の定 義 Extensible Markup Language (XML) 1.0 (Fifth Edition) http://www.w3.org/TR/2008/REC-xml-20081126/ を参考に XML の文法を見ていきます。 これは文脈自由文法で XML の文法を厳密に与えています。 以下、文脈自由文法のルールには番号が表示されていますが、これは原文のそ のままの引用で、原文の式番号です。
XML 文書の構造の説明に入る前に、 XML 文書のどこにでも配置できる構文を 説明します。
まず、White Space ですが、通常の空白記号 ( ) の他に、TAB 記号 と、 CR と LF を含みます。 これらの 1 個以上連続を white space と呼びます。 XML のドキュメントでは次のように文脈自由文法で定義されています。
[3] S ::= (#x20 | #x9 | #xD | #xA)+
コメントは <!-- で始まって、
--> で終わり、中になにを書いても構わないの
が基本ですが、もともと SGML では定義文とコメントを --(ハイフン二つ) を --
区切りにして交互に使っていました。
<! 定義文 -- コメント -- 定義文 -- コメント -- 定義文 -- コメント -- >
それを廃止する際に、コメント中にこのハイフン二つを書かないように規定さ れました。 そのため、XML のコメントの定義も下記のように文脈自由文法で定義されてい ます。
[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->'
なお、Char は文書で使用する文字のことです。
PI とは Processing Instructions のことです。 これは、文書の文字データではなく、アプリケーションに直接渡される記述で す。 例えば、 XHTML 中に PHP のプログラムを書く場合、次のように記述します。
<p>
<?php echo 'Hello World'; ?>
</p>
これは XML の定義書では次のように定義されています。
[16] PI ::= '<?' PITarget (S (Char* - (Char* '?>' Char*)))? '?>'
[17] PITarget ::= Name - (('X' | 'x') ('M' | 'm') ('L' | 'l'))
なお、 Name は要素名などを定義するための「名前」を表すことのできる文字 列です(英文字+英数字の 0 文字以上の連続と思ってよい)。
XML 文書は次のように定義されています。
[1] document ::= prolog element Misc*
[22] prolog ::= XMLDecl? Misc* (doctypedecl Misc*)?
[27] Misc ::= Comment | PI | S
まず、 prolog ではすべての部分が省略可能であることに注意してください。 上の定義を解釈すると XML 文書とは次のような構造を持ちます。
この「一つだけの要素」とは root element とか呼ばれます。 XML 文書では基本的には一つの要素について記述します。 但し、その要素の内容には他の要素が含まれていても構いません。 例えば、 XHTML ドキュメントでは、一つだけの html 要素から構成されてい ますが、内容には head 要素と body 要素が含まれます。
XML 宣言は既に上の文字の定義の際に、文字コードの指定をするために紹介し ました。 XML 宣言では文字コードの指定の他に version と standalone というオプショ ンを指定します。 standalone オプションは外部参照をするか否かを指します。 この条件は複雑なので、ここでは詳しく説明しません。 standalone オプションは省略可能であり、省略しても問題ありません。 また、 XML のバージョンは "1.0" を常に指定することにします。
<?xml version="1.0" encoding="utf-8"?>
文書型宣言は、XML 文書にどのような要素が含まれるかを記述します。
[28] doctypedecl ::= '<!DOCTYPE' S Name (S ExternalID)? S?
(' [' intSubset ']' S?)? '>'
文書型宣言を行うには外部サブセット宣言と、内部サブセット宣言の二通りの 方法があります。 外部サブセット宣言は以下のように ExternalID を指定するもの、内部サブセット宣言は intSubset を指定するものです。 内部サブセット宣言は章を改めて説明します。
外部サブセット宣言は次の二つの宣言があります。
[75] ExternalID ::= 'SYSTEM' S SystemLiteral | 'PUBLIC' S PubidLiteral S SystemLiteral
PUBLIC は文書宣言が公式なものとして既に広まっていて、利用側で文書宣言 を改めて取得しなくてよいようなものを言います。 よく使う有名な例は XHTML の宣言などです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
PubidLiteral は DTD を表すような識別子になります。 ここで、 SystemLiteral は上のように実際に文書型定義が dtd ファイルとし て存在する URI を指定します。
一方、SYSTEM の宣言は、文書型定義を取得するための URI を指定します。 複数の XML 文書で DTD を共有する場合などは、この SYSTEM を使用して、ネッ トワークを利用して行います。
<!DOCTYPE class SYSTEM "class.dtd" >
XML ではパーサを作り易いように SGML のオプション機能(タグの一部を省略 する機能)が取り除かれました。 そして、構文解析をする際、誤っている構文を発見したら通知する義務があり ます。 従来の HTML 文書では多少の構文誤りに関しては、エラーとせず、なるべく文 書を表示するようになっていました。 しかし、XHTML のような XML 文書は構文誤りを発見した途端、表示を止め文 書のエラーを通知します。
HTML Standard は Living Standard ということで、バー ジョン番号は管理されず、常に更新されます。 日本語訳もありますが、 翻訳版に完璧は期待しないほうが良いと思います。
HTMLドキュメントの最小のテンプレートは以下のようになります。これを拡張 子が html のテキストファイルに入れます。ファイルをブラウザで開くとド キュメントがレンダリングされて表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習1</title>
</head>
<body>
ここにマークアップされたドキュメントを記述する
</body>
</html>
マークアップには、段落を意味する p、 見出しを意味する h1, ..., h6、 箇条書きを表す ol, ul, li, dl, dt, dd など、ドキュメントの意味の区分 にタグをつけて要素とします。
HTML の拡張性として、次の要素があります。
HTML4.01 や XHTML1.1 では、要素の分類は block と inline という2種類 しかありませんでした。 HTML Standard では以下のカテゴリがあり、各要素は0個以上のカテゴリに 属します(HTML Standard 3.2.5.2. Kinds of content)。 なおこれ以外の分類もあります。
これらの包含関係については、参照先を参考にしてください。
HTML4.01では、従来のブロックと呼ばれる、単独で body 内に置かれ、矩形に描 画されるものと、インラインというブロックの中に置かれるべきものが厳密 に区別されるだけでした。 HTML Standard ではこの厳密な分類を止め、ほとんどの要素は body 内に置け る Flow とし、さらに、 Flow の中に属せるものを Phrasing のカテゴリに入ることとしたということです。 さらに、ヘッダ、フッタの領域を定める Sectioning 、見出しを定める Headingが 用意され、 一方、メディアを埋め込むのが Embedded、 またユーザが操作可能なのが Interactive のカテゴリになります。
なお、本来は様々な要素には意味がありますが、無意味な要素として Flow, Palpable カテゴリの div 要素とFlow, Phrasing, Palpableカテゴリの span 要素があります (Palpable は明瞭な内容の意味)。 これらは、HTMLで定められている範囲の意味付をせずに class などの属性 を与えたい時や、要素のグルーピング などに使用します。
HTML 要素にはグローバル属性と呼ばれる、すべての要素に有効な属性が26個設 定されています。 そのうち、id と class はプログラムから要素を検索する際に用います。
キーボードに無い文字を表示する方法として、文字コードで参照する方法と、 定められた名前で指定することもできます。 これらを文字参照と言います。 構文は & と ; の間に、文字コードや名前を入れて表現します。 なお、このタグを表すために、 <, >, & の文字をそのまま表 示したい場合は名前文字参照を使って、 <, >, & と & 記号と; (セミコロン)の間に定められた語を書きます。名前文字参照 には、この他、トランプのハート &hearts;♥ やユーロ記号&euro; € や様々な数学記号やアクセント付きの文字などがあります。
HTML 文書の見栄えを良くする機能 CSS(Cascading Style Sheet) があります。 CSSによる見栄えの指定は、文書の作成者の他、利用者がブラウザに あらかじめ指定することもできます。 CSSはW3Cが監修していて、2011年に2.1が勧告されています。 その後は、モジュールとして更新を続けています。
以下が CSS の簡単な例です。
h1 {
color: blue;
}
h2 {
background: yellow;
}
このように CSS は「セレクタ { 宣言; 宣言; ...} 」の繰り返しという簡単な構文からなっています。 また、宣言は「プロパティ: 値」という形になっています。 この例では、これを指定した HTML 文書において、 h1 要素 の内容が青文字で表示され、 h2 要素の内容の背景が黄色に表示されるように なります。
スタイルシートを HTML 文書で指定するには、いくつか方法がありま すが、次のように link 要素をhead要素の中に記入して用いることができます。
<link rel="stylesheet" type="text/css" href="ファイル名">
HTML 文書でマークアップする際には、文書の部分を開きタグと閉じタグで 括って、その部分が特定の要素であることを示します。 この開きタグと閉じタグを他の要素がまたぐようにはできないので、マーク アップにおける各文書の要素の関係は、包含関係になります。 例えば、body 要素の内容に p 要素が入るなど。これを親子関係呼んだり、body 要素 が親で、 p 要素が子などと言うことがあります。
CSS では、セレクタで指定した要素に対して宣言を行いますが、親の要素に 対する宣言は子の要素に継承されます。 例えば、 body 要素で指定した文字の色は p 要素に継承されます。もし、 p 要素で色を指定しない場合、 body 要素の文字の色が使われます。一方、 p 要素で色を指定すれば、その色が優先されます。
但し、宣言されるプロパティの種類によっては継承されないものもあります。 例えば、背景画 像の指定 background などは継承されません。もし仮に継承されるとすると、 背景画像が、子の要素が始まる度に、内容表示の左上から表示されること になり、全体として、 親要素を覆う一つの背景画像の上に、子要素の部分だけいくつも親要素と同じ 画像が表示されることになります。
セレクタにはいろいろな書式があります。 HTML 要素はそのままセレクタになります。
複数のセレクタに対して同じ宣言を行うには次のようにカンマ「,」で区切り ます。
h1, h2, h3 {font-family: helvetica}
一方、複数の宣言を行うには、次のようにセミコロンで「;」区切ります。
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
id 属性に対応した HTML要素を指定するには #を付けます。
#sec01 { color: blue }
クラスとは、名前をつけてスタイルを管理ができます。。 HTML文書の各要素に指定することで、同じ
.pastoral { color: green }
この .pastral は pastral という名前のクラスを意味します。 HTML 文書で次のようにクラスを指定すると、クラスへの宣 言が有効になります。
<h1 class="pastoral">Way too green</h1>
なお、複数のクラスを指定する場合は空白で区切って指定します。
また、セレクタとして特定の親子関係を指定することもできます。
h1 em { color: red }
このように空白で区切って指定すると、 左の h1 要素に含まれる右の em 要 素のみに宣言が有効になります。
なお、 h1 の em と h2 の em に有効なセレクタは h1 , h2 em
ではなく、h1 em , h2 em と空白の結合の方が ,(カンマ)よ
りも強いことに注意して下さい。つまり、 h1 と h2 の中に含まれる em を赤
で強調するには次のようにします。
h1 em, h2 em { color: red }
一方、疑似クラスというものが用意されています。多くのブラウザではハイパー リンクが色付で用意されています。この色を疑似クラスを使って指定すること ができます。次のように疑似クラス link, visited, active を使うと、通常 のリンク、既に訪れたリンク先、指定された状態のリンクの色を指定できます。
a:link { color: red }
a:visited { color: blue }
a:active { color: lime }
また、「一行目」「一文字目」を表す疑似クラスも用意され、文章の始めだけ 表現を変えることができます(一部ブラウザでは実現されていません)。
p:first-letter { font-size: 200%; float: left }
p:first-line { padding-left: 1em }
CSS での宣言が、どのように HTML 文書の内容を表示されるかを説明 します。
ブロック要素では、次のようなモデルが仮定されています。
マージンの大きさ、枠の太さや種類、パディングの大きさが指定できます。 また、パディング領域の背景は background プロパティで指定できます。 これはリスト内の要素 li, dt, dd も同じです。
font-style はフォントスタイルを指定します。normal(立体),italic(デザイ ンが考慮された斜字体), oblique(単なる斜字体) が指定できます。
font-weight はフォントの太さを指定します。 normal, bold, lighter, bolder の他、 100, 200, 300, 400(normal と同じ), 500, 600, 700(bold と 同じ), 800, 900 を指定できます。
font-size はフォントの大きさを指定します。値としては、 xx-small, x-small, samll, medium, large, x-large, xx-large, smaller, larger の他、 ポイント数、パーセント表示なども利用できます。
color は文字の色を指定します。 なお、color を指定する時は必ず background-color を指定します。そうでな い場合、ブラウザのデフォルトの色と color が一致する可能性があり、最悪 文字が全く読めなくなってしまいます。
text-indent は最初の行の字下げを指定します。単位付数値で字下げの幅を指 定します。
text-align は行そろえを指定します。 left で左寄せ、 right で右寄せ、 center で中央揃え、 justify で両端揃えを指定します。
line-height は行の高さを指定します。 normal でブラウザに任せます。 単位付数値で実際の高さを指定します。単位なし数値では使っているフォント の高さにその数値を掛けた高さにします。パーセント値も同様です。
箇条書(li 要素)のマークを指定します。 disc(黒丸), circle(白丸), square(四角), decimal(十進数), lower-roman(英字の小文字), upper-roman(英字の大文字), lower-greek(小文字のギリシャ文字), hiragana(ひらがなのいろは),none(なし) などを指定できます。
background-color は背景色を指定します。color と一緒に指定します。指定 しない場合は、透明になります。
background-image は背景に表示する画像を指定します。 url 指定を使います。 なお、背景画像は瞬時には表示されないため、背景画像が表示されてない時点 でも文字が読めるように、background-color で文字が読めるような色を指定 すべきです。
background-repeat は背景画像を繰り返し表示するかどうかを指定します。 repeat-x は横方向だけ繰り返します。 repeat-y は縦方向だけ繰り返します。 repeat は縦横両方とも繰り返します。 no-repeat は画像を一枚だけ表示しま す。
text-decoration は文字の下線などを指定します。 none で無指定、underline で下線、overline で上線、 line-through で取消 線、blink で点滅を指定できます。
vertical-align は同じ行の中で縦方向の位置揃えを指定します。 baseline はベースライン同士を揃えます。top はボックスの上を揃えます。 middle はボックスの中心を揃えます。bottom はボックスの下を揃えます。
マージンの長さを設定するプロパティです。実数値+単位で実サイズを指定で きます。パーセント値を設定すると親ボックスの横幅に対する割合で指 定できます(margin-top でも横幅を参照する)。 auto は状況に応じて自動的に設定されます。なお、四方向同じ指定で良けれ ば margin というプロパティが使えます。
パディングの長さを設定するプロパティです。実数値+単位で実サイズを指定で きます。パーセント値を設定すると親ボックスの{\em 横幅}に対する割合で指 定できます(padding-top でも横幅を参照する)。なお四方向同じ指定で良けれ ば padding というプロパティが使えます。
三つの値を空白で区切って指定します。 最初の値は枠の色を指定します。次の値は枠の幅を指定します。 幅の指定は、実数値+単位か、 thin, medium, thick のキーワードになります。 三つ目の値は枠の形式を指定します。none で透明、hidden は枠なし、solid は実線、 double は二重線、 groove は枠が立体的にへこんで見えるようなデ ザイン、 ridge は枠が立体的に突き出ているように見えるようなデザイン、 inset は枠の内側がへこんで見えるデザイン、 outset は枠の内側がつき出て 見えるデザイン、dashed は破線、 dotted は点線を表します。 なお、四方向同じ指定で良ければ border というプロパティが使えます。
ボックスの内容領域の幅を指定するのが width、高さを指定するのが height です。実数値+単位、パーセント値、キーワード auto が使えます。
float は要素をボックスとして扱い、右、または左に寄せ、その反対側に続く 要素の内容を回り込ませます。left, right, none を指定できます。 なお、float を指定する要素には、画像を除き width プロパティを指定する 必要があります。
clear は float で指定された回り込みを解除します。右を解除させたければ right、左を解除させたければ left、両側を解除させたければ both、解除し なければ none を指定します。
border-radiusは囲う枠の角を丸める効果があります。 四隅の角を別々の半径で指定できますが、指定する数を減らすと、共通化されます。
box-shadow はボックスに影をつける効果があります。 色のほか、右、下への影の長さを指定できます。 マイナスの値も指定できます。
CSS で使用できる単位には、cm や mm の他、in (インチ)、 pt(ポイント 1/72 インチ)、pc(パイカ 12 ポイント)と実際の長さを表すものが使えます。 さらに、コンピュータ毎に長さが異なる、画面上の画素を表す px や、実際に 表示されるフォントのサイズを表す em、表示される文字 x の高さを表す ex を使うことができます。
50% などパーセントを付けた指定は、現在の値(継承された値)に対しての割 合を示します。属性が継承するものでも、この指定自体は 継承せず、変更された値(新しく決まったフォントの太さなど)が継承されます。
bolder や smaller は現在の値に対して、さらに太くや小さく するという指定を表します。属性が継承するものでも、この指定自体は 継承せず、変更された値(新しく決まったフォントの太さなど)が継承されます。
画像の指定などは url 指定を使います。 url(http://www.c.dendai.ac.jp/a.png)や、 url(../b.png) などと書きます。
色の指定法は #aabbcc のように # 記号の 後に二桁の十六進数を三つ指定します。これで RGB(赤、緑、青) の光の強さ の度合を指定します。 #ffffff で白、 #000000 で黒、 #ff0000 で赤、 #00ff00 で緑、 #0000ff で青を表します。 この他、プロパティの値の指定には次のキーワードも使用できます。 black(#000000 と同じ), Silver(#c0c0c0 と同じ), gray(#808080 と同じ), white(#ffffff と同じ), maroon(#800000 と同じ), red(#ff0000 と同じ), purple(#800080 と同じ), fuchsia(#ff00ff と同じ), green(#008000 と同 じ), lime(#00ff00 と同じ), olive(#808000 と同じ), yellow(#ffff00 と 同じ), navy(#000080 と同じ), blue(#0000ff と同じ), teal(#008080 と 同じ), aqua(#00ffff と同じ)。
body {color: black;
background-color: red}
このスタイルシートを default.css というファイル名で保存し、 次の HTML 文書を同じ場所に保存(例えば test.html など)すると、スタイル シートが正しく作用しているかどうか確かめられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<p>テスト</p>
</body>
</html>
em {color: red}
h1 {text-align: center;
color: white;
background-color: black;
border: red medium double
}
h2 {text-align: left;
padding-left: 50px;
background-image: url(a.png);
background-repeat: no-repeat
}
h3 {border-left: yellow 1em solid;
border-right: yellow 1em solid;
padding-left: 1em;
padding-right: 1em
}
p { margin-top: 6ex;
margin-bottom: 6ex;
line-height: 6ex;
border: aqua thin solid;
}
p:first-line { padding-left: 1em }
table { border-collapse: collapse }
table, table td, table th { border: 1px solid black }
もともと、JavaScript は HTML ドキュメントを操作するために作られた言 語です。 そのために、HTML はプログラミング言語からは DOM(Document Object Model)というデータ構造で見ることができるようになっています。 DOMについては次回詳しく説明します。
HTML ドキュメントをブラウザ上で JavaScript で操作するには、 script 要素を使います(HTML Standard 4.12.1)。 script 要素は、JavaScript のファイルを src で指定して読ませるか、 script 要素内にプログラムを直接書きます。 head 要素内に書いた script は body が読み込まれる前に実行され、 body 内に書かれた script はその場で読み込まれる度に実行されます。 なお、ドキュメントが全て読み込まれてから実行したい時はscript 要素に defer 属性を指定します。
ブラウザが HTML ドキュメントを解釈する際、JavaScript のグローバルな オブジェクトとして window (7.2.2章)が定義されている。
| 属性 | 引数 | 戻り値 |
|---|---|---|
| document | documentオブジェクト | |
| alert | 表示する文字列 | |
| confirm | 表示する文字列 | boolean値 |
| prompt | 表示する文字列、デフォルト値 | 入力された文字列 |
HTMLドキュメントの DOM(Document Object Model) を参照するオブジェク トが Document です。このオブジェクトを介して、全てのドキュメントの要 素にアクセスできます。
| 属性 | 引数 | 戻り値 |
|---|---|---|
| body | body エレメント | |
| getElementByID | id名 | idの付けられたエレメント |
| getElementsByName | 要素名 | 該当する要素の配列 |
| querySelector | セレクタ | 該当する最初の要素 |
| querySelectorAll | セレクタ | 該当する要素の配列 |
| createElement | 要素名 | 作成した要素 |
| 属性 | 引数 | 戻り値 |
|---|---|---|
| innerText | 要素内のテキスト | |
| innerHTML | 要素内のHTML |
以下の文章を表示する HTML ドキュメントを作成しなさい。
HTMLの基本文法は <要素名 属性名="属性値">内容</要素名>と書
く。なお、このタグを表すために、 <, >, & の文字をそのまま表
示したい場合は名前文字参照を使って、 <, >, & と
& 記号と; (セミコロン)の間に定められた語を書く。なお、名前文字参照
にはトランプのハート ♥♥ やユーロ記号€ €
や様々な数学記号やアクセント付きの文字などがある。
文字の一部を♥のように赤くするには
1. スタイルシート、或いは style 要素に、.クラス名 {color: red;} と定義
2. 指定したい部分を span 要素とし、そのspan の属性として class="クラス名"を指定する
なお、赤くする理由が強調したい場合の時は、クラスを使用する依り、強調を
意味する em 要素にスタイルシートで赤を設定する。
window.alert を使用して、HTML ドキュメントを開くと画面にポップアッ プウィンドウが開き、 Hello World が出るようにしなさい。
また、confirm、 prompt も試しなさい。
document.bodyの innerText や innerHTML を使用して、HTML ドキュメントに Hello World が出るよ うにしなさい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習9-1</title>
<style>
.red {color: red;}
</style>
</head>
<body>
<p>
HTMLの基本文法は <要素名 属性名="属性値">内容</要素名>と書く。
なお、このタグを表すために、 <, >, & の文字をそのまま表
示したい場合は名前文字参照を使って、 &lt;, &gt;, &amp; と
& 記号と; (セミコロン)の間に定められた語を書く。なお、名前文字参照
にはトランプのハート &hearts;♥ やユーロ記号&euro; €
や様々な数学記号やアクセント付きの文字などがある。
</p>
<p>
文字の一部を<span class="red">♥</span>のように赤くするには
</p>
<ol>
<li>スタイルシート、或いは style 要素に、.クラス名 {color: red;} と
定義</li>
<li>指定したい部分を span 要素とし、そのspan の属性として class="ク
ラス名"を指定する</li>
</ol>
<p>
なお、赤くする理由が強調したい場合の時は、クラスを使用する依り、強調を
意味する em 要素にスタイルシートで赤を設定する。
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習9-2</title>
</head>
<body>
<script>
window.alert("hello world");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習9-3</title>
</head>
<body>
<script>
document.innerText="hello world";
</script>
</body>
</html>