エントロピー関数
| NAGASAKA Yasunori 2012/11/29 |
A = { a1, a2, a3, ..., an}
{pa1, pa2, pa3, ..., pan}
コインの例を上記の形式で表すと以下のようになる。
コインを投げた時の表裏の出方 A = {表が出る, 裏が出る}
{ 1/2, 1/2 }
ジャンケンで出す手 A = {a1:グー、a2:チョキ、a3:パー}
{ 1/3, 1/3, 1/3}
ジャンケンで出す手 B = {b1:グーを出す、b2:グーを出さない}
{ 1/3, 2/3}
それぞれのエントロピーを求めると以下のようになる。
H(A) = Σ 1/3・log(1 / (1/3))
= 1/3・log 3 + 1/3・log 3 + 1/3・log 3
= log 3 = 1.585 bit
H(B) = 1/3・log(1 / (1/3)) + 2/3・log(1 / (2/3))
= 1/3・log 3 + 2/3・(log 3 - log 2)
= 1/3・1.585 + 2/3・(1.585 - 1) = 0.918 bit
ここで条件付確率 P(A|B) に対応する条件付エントロピーを以下のように求める。
まず B のそれぞれの事象が生起することがわかっている場合の A の事象が生起する確率を求める。
例として、P(a1|b1) は「グーを出すことがわかっている状況で、
グーを出す」確率であり、すなわち 1 である。以降同様に 6 種類の確率が求められる。
H(A|b1) = 1・log 1/1 + 0・log 1/0 + 0・log 1/0 = 0
H(A|b2) = 0・log 0 + 1/2・log 1/(1/2) + 1/2・log 1/(1/2)
= 1/2・log 2 + 1/2・log 2 = log 2 = 1
最後にこの二つのエントロピーに生起する確率をかけて和を求めることで
条件付エントロピーを求めることができる。
H(A|B) = H(A|b1)・P(b1) + H(A|b2)・P(b2)
= 0・1/3 + 1・2/3 = 0.667 bit
今度は逆に H(B|A) を求めてみる。この場合、A の各事象が生起することが事前にわかると、
B の事象はすべて確率 1 か 0 で生起するのでエントロピーは 0 になる。
H(B|a1) = 1・log 1/1 + 0・log 1/0 = 0
H(B|a2) = 0・log 1/0 + 1・log 1/1 = 0
H(B|a3) = 0・log 1/0 + 1・log 1/1 = 0
H(B|A) = H(B|a1)・P(a1) + H(B|a2)・P(a2) + H(B|a3)・P(a3)
= 0・1/3 + 0・1/3 + 0・1/3 = 0 bit
条件付エントロピーを一般形で記述すると次の式になる。
条件付確率 P(ai|bj) と結合確率 P(ai,bj) の違いに注意する必要がある。
H(A|B) = Σ H(A|bj)・P(bj)
j
= ΣΣ P(ai|bj)P(bj)・log (1 / P(ai|bj))
i j
= ΣΣ P(ai,bj)・log (1 / P(ai|bj))
i j
結合エントロピーは結合確率 P(A,B) に基づいて計算されるエントロピーで、
次式で求められる。
H(A,B) = ΣΣ P(ai,bj)・log (1 / P(ai,bj))
i j
例として、上記のジャンケンの例で結合エントロピーを求めてみる。
H(A) = ΣΣ 1/3・log(1 / (1/3))
= 1/3・log 3 + 1/3・log 3 + 1/3・log 3
= log 3 = 1.585 bit
エントロピー H(A), H(B)、条件付エントロピー H(A|B), H(B|A)、
結合エントロピー H(A,B), H(B,A) の関係は以下のようになる。
H(A) = (1) + (2) H(B) = (2) + (3) H(A|B) = (1) H(B|A) = (3) H(A,B) = H(B,A) = (1) + (2) + (3)上記のジャンケンの例では (1) = 0.667, (2) = 0.918, (3) = 0 となり、 図で示したエントロピー、条件付エントロピー、結合エントロピーの関係が 保たれていることがわかる。
A = { s1, s2, s3, ..., sn}
{ps1, ps2, ps3, ..., psn}
情報源から生成された記号の並び(記号系列)を通報と呼ぶ。次の記号系列はいずれも通報である。
S = { s1, s2, s3, ..., sn}
{ps1, ps2, ps3, ..., psn}
独立情報源の記号 1 個あたりの発生エントロピーは、
これまでのエントロピーの計算式をそのまま当てはめて計算することができる。
S = { a, b, c, d }
{0.25, 0.25, 0.25, 0.25}
0.25 * log2(1 / 0.25) * 4 =
S = {s1, s2, ..., sn}
s1 s2 ... sj ... sn
s1 (P11 P12 ... P1j ... P1n)
s2 (P21 P22 P2j P2n)
s3 (P31 . . . )
P = . ( . . . )
si (Pi1 Pi2 ... Pij ... Pin)
. ( . . . )
sn (Pn1 Pn2 ... Pnj ... Pnn)
※ 上記行列の行と列に添えた s1, ..., sn の表記は理解しやすくするために記載したもので、
本来の行列の表記にはない。
マルコフ情報源の記号 1 個あたりの発生エントロピーは、
条件付エントロピーの計算式をそのまま当てはめて計算することができる。
単位時間あたりの発生エントロピーは、独立情報源と同様に r・H(S|S) となる。
H(S|S) = Σ H(S|si)・P(si)
i
= ΣΣ P(sj|si)P(si)・log (1 / P(sj|si))
j i
= ΣΣ P(sj,si)・log (1 / P(sj|si))
j i
例として、状態遷移行列 P が以下である時の、
記号 1 個あたりの発生エントロピーを求めてみる。
( 0.5 0.25 0.25)
P = (0.25 0.5 0.25)
(0.25 0.25 0.5)
この場合、状態遷移行列から各アルファベットが生成される条件付き確率は求められるが、
各アルファベットの生成確率は明示的に与えられていない。
各アルファベットの生成確率は、事象系が正規マルコフ情報源(後述)であれば、
上記の状態遷移行列に沿って非常に長い時間アルファベットを生成し続けた時の定常分布、
極限分布と一致する。
この例は正規マルコフ情報源であるので、次の連立方程式を解くことで生成確率を求められる。
x, y, z を各アルファベットの生成確率とする。
(x, y, z) = (x, y, z)( 0.5 0.25 0.25)
(0.25 0.5 0.25)
(0.25 0.25 0.5)
x + y + z = 1
ここから次の 4 個の式が得られる。
x = 0.5x + 0.25y + 0.25z
y = 0.25x + 0.5y + 0.25z
z = 0.25x + 0.25y + 0.5z
x + y + z = 1
変形して書き直すと、
2x = y + z
2y = x + z
2z = x + y
x + y + z = 1
これを解くと x = y = z = 0.333... が得られる。
これらの値を用いて発生エントロピーは次のように計算できる。
H(S|S) = ΣΣ P(sj|si)P(si)・log (1 / P(sj|si))
j i
= 0.5 * 0.333 * log (1 / 0.5) +
0.25 * 0.333 * log (1 / 0.25) +
0.25 * 0.333 * log (1 / 0.25) +
0.25 * 0.333 * log (1 / 0.25) +
0.5 * 0.333 * log (1 / 0.5) +
0.25 * 0.333 * log (1 / 0.25) +
0.25 * 0.333 * log (1 / 0.25) +
0.25 * 0.333 * log (1 / 0.25) +
0.5 * 0.333 * log (1 / 0.5)
= 0.5 * log (1 / 0.5) +
0.25 * log (1 / 0.25) +
0.25 * log (1 / 0.25)
= 0.5 * log 2 + 0.25 * log 4 + 0.25 * log 4
= 0.5 + 0.5 + 0.5
= 1.5 bit
S = { a, b, c }
(0.5 0.25 0.25)
P = (0.25 0.5 0.25)
(0.25 0.25 0.5 )
行列 P の 2 乗を計算すると、その結果は 2 秒後に生成される記号の確率を表している。
同様に P の t 乗を計算すると、それは t 秒後に生成される記号の確率となる。
例として、P の 3 乗の 1 行 1 列成分 0.34375 は、現在の記号が a で 3 秒後に a
が生成される確率である。
(0.5 0.25 0.25)(0.5 0.25 0.25) (0.375 0.3125 0.3125)
P×P = (0.25 0.5 0.25)(0.25 0.5 0.25) = (0.3125 0.375 0.3125)
(0.25 0.25 0.5 )(0.25 0.25 0.5 ) (0.3125 0.3125 0.375 )
(0.375 0.3125 0.3125)(0.5 0.25 0.25) (0.34375 0.328125 0.328125)
P×P×P = (0.3125 0.375 0.3125)(0.25 0.5 0.25) = (0.328125 0.34375 0.328125)
(0.3125 0.3125 0.375 )(0.25 0.25 0.5 ) (0.328125 0.328125 0.34375 )
マルコフ情報源の中で次の性質を持つものを正規マルコフ情報源という。
A = θw θ = (1 1 1 ... 1)T, T は転置を表す w = (p1 p2 p3 ... pn) 0 < pi (i = 1, 2, ..., n) Σpi = 1 i定常分布を表す確率ベクトルを z とすると、 z = zP を満足する z がただ一つ存在する。 そして z = w が成り立つ。
例1 P1 = (0.5 0.25 0.25) = (x x x)
(0.25 0.5 0.25) (x x x)
(0.25 0.25 0.5 ) (x x x)
は P1 の 1 乗ですべての要素が 0 でなくなるので正規マルコフ情報源である。
例2 P2 = (0.5 0 0.5) = (x 0 x)
(0.5 0.5 0 ) (x x 0)
(0 0.5 0.5) (0 x x)
P2×P2 = (x 0 x)(x 0 x) = ( xx xx 2xx) = (x x x)
(x x 0)(x x 0) (2xx xx xx) (x x x)
(0 x x)(0 x x) ( xx 2xx xx) (x x x)
P2 の 2 乗ですべての要素が 0 でなくなるので正規マルコフ情報源である。
例3 P3 = (0.5 0 0.5) = (x 0 x)
(0 0.5 0.5) (0 x x)
(0.5 0 0.5) (x 0 x)
P3×P3 = (x 0 x)(x 0 x) = (2xx 0 2xx) = (x 0 x)
(0 x x)(0 x x) ( xx xx 2xx) (x x x)
(x 0 x)(x 0 x) (2xx 0 2xx) (x 0 x)
P3×P3×P3 = (x 0 x)(x 0 x) = (2xx 0 2xx) = (x 0 x)
(x x x)(0 x x) ( xx xx 3xx) (x x x)
(x 0 x)(x 0 x) (2xx 0 2xx) (x 0 x)
P3 の 2 乗と 3 乗が同じ形になり、以後同じ形の繰り返しとなる。
よって P3 で表される情報源は正規マルコフ情報源ではない。
S = { s1, s2, s3, ..., sn}
{ps1, ps2, ps3, ..., psn}
情報源アルファベットの各記号 {s1, s2, s3, ..., sn} に対して、変換後の符号(Code)
(の組)を C = {c1, c2, c3, ..., cn} とする。個々の c1, c2, ... を符号語、または単に
符号と呼ぶ。c1, c2 などの符号は、符号を構成する記号の組み合わせとして表現される。
符号を構成する記号の個数を r とすると、それで表現される符号を r 元符号と呼ぶ。
例として 2 進数 0, 1 を符号を構成する記号として使用する場合は 2 元符号となる。
個々の符号を構成する記号の個数を、その符号の符号語長、または符号長と呼ぶ。
以下に情報源アルファベットと符号の例をいくつか示す。
L = Σ lk・psk
k
例として、以下のように情報源アルファベット S とその確率事象系、
および対応する符号を C とすると、L は以下のように計算できる。
S = { a, b, c, d}
{0.5, 0.25, 0.125, 0.125}
C = {0, 01, 011, 0111}
L = 1・0.5 + 2・0.25 + 3・0.125 + 4・0.125
= 0.5 + 0.5 + 0.375 + 0.5
= 1.875
同じ事象系に対して異なる符号化を施した符号を C2 とすると、
その平均符号長 L2 は以下のように計算できる。
このように生成確率の高い情報源に長い符号を割り当てると平均符号長が長くなる。
通信の効率という観点では、
平均符号長が長い符号はより長い通信時間を必要として効率が悪い(例えばFAX)。
よって一般的には平均符号長が短くなるように符号化の手順を構成する。
C2 = {0111, 011, 01, 0}
L2 = 4・0.5 + 3・0.25 + 2・0.125 + 1・0.125
= 2 + 0.75 + 0.25 + 0.125
= 3.125
すべての符号に対して符号長が等しい場合を固定長符号または等長符号、
符号により長さが異なる場合を可変長符号と呼ぶ。
先に示した 4 種類の符号化の例で、ASCII コードは 2 元符号でも 16 元符号でも固定長符号であり、
ローマ字と 10 進→ 2 進変換の例は可変長符号となる。
S = { a, b, c, d }
C11 = { 0, 0, 1, 11 }
クラス C12, 特異符号ではないが一意に復号化できない符号の例を以下に C12 として示す。
この例では、
4 個の情報源記号に対して異なる符号が割り当てられているので特異符号ではないが、
受信側で例えば '01' を受信した場合に 'ab' と
'c' の 2 種類の復号が可能でやはり一意に決められない。
S = { a, b, c, d }
C12 = { 0, 1, 01, 10 }
次に一意に復号化可能なクラス C2 を復号化の過程の違いで瞬時符号と非瞬時符号の
2 種類に分類する。それぞれの符号の例を続けて示す。
S = { a, b, c, d }
C21 = { 0, 10, 110, 1110 }
C22 = { 0, 01, 011, 0111 }
両者は特異符号ではなく、またいくつか符号の並びを調べてみるとわかるが一意に復号が可能であり、
復号化の結果は一通りしか存在しないのでクラス C2 に属する。
両者は一見すると非常に似ているが、復号の過程を調べてみるとどの時点で復号可能かが異なる。
例として、'0' を受信すると C21 では直ちに 'a' と復号化できる。一方 C22 では次の記号を受信して、
それが'0'であればその時点で復号化が可能となる。C22 では'0', '01', '011' のどれを受信した場合でも
次の記号がわからないと復号ができない。唯一'0111'のみは受信した瞬間に復号ができる。
このように各符号を受信した時点で復号が可能なものを瞬時符号、
そうでないものを非瞬時符号として区別する。
<html> <head> <title>シンプルなWebページ</title> </head> <body> <h1>1 見出し</h1> <p>本文の文章はここに書く。</p> <p>次の段落。段落と段落の間は1行空く。</p> <h1>2 次の見出し</h1> <h2>2.1 小見出し</h2> <p>次の本文</p> </body> </html>HTML における文書の表現はこのように、全体を html 要素として <html> と </html> で囲む。その中には最初に head 要素があり、 続いて本文である body 要素がある。 本文には見出しを表す h1 や h2 要素と本文文章の段落を表す p 要素が含まれる。 HTML では head, body, h1, p などの要素を表すタグを必要な場所に記述する。 これらのタグはブラウザによる整形後は表示されない。 またタグはすべて < と > で囲むことで、その他の部分と区別するので文字 '<','>' はそのままの形では本文に含めることができない。
<html> <HEAD> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <Body> <h2>見出しの書き方 <p> 見出しは次のように書きます。全部で6レベルあります。 <h1>見出し1</h1> <H2>見出し2 <H3>見出し3</h3> <H4>見出し4</h4> <h5>見出し5 <h6>見出し6</h6> <h2>本文の書き方</h2> <p> 本文の文章はここに書く。 改行したいときには次のように書く。<br> <hr> 直前の行のように指示するとこのように線を引くこともできます。 文章の一部を強調したいときには<em>このように</em>書く。 <a href="http://edu.isc.chubu.ac.jp/naga/index.html">他のWebページへのリンク</a> はこのように書く。<br> <A id="abc" name="abc">このように</a>文章の一部に印を付けることができます。 <p> 別の段落はこのように書きます。段落と段落の間は空行が入ります。 </P> <h2>箇条書きの書き方</H2> <p> 箇条書きは次のように書きます。 <ul> <li>箇条書きの項目 <li>箇条書きの項目</LI> <li>箇条書きの項目 </ul> <ol> <li>番号付き箇条書きの項目 <li>番号付き箇条書きの項目 <li>番号付き箇条書きの項目 </ol> <h2>図の挿入の仕方 <p> 画像を表示することもできます。 <img src="dragon.gif" alt="ドラゴン"></img> <h2>表の書き方</h2> <p> 表を作ることもできます。タイトルを付けることもできます。 </p> <table border="1"> <caption>各地の降水量</caption> <tr> <th> </th> <th>愛知</th> <th>岐阜</th> <th>三重</th> <th>静岡</th> <th>東京</th> <th>大阪</th> </tr> <tr> <th>1月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>2月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>3月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> </table> <a href="#abc">上で印を付けたところ</a>に戻ることができます。 <hr> <address>Copyright 2012 NAGASAKA Yasunori, All Rights Reserved.</address> </body> </html>
<?xml version="1.0" encoding="shift-jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="Content-language" content="ja" /> <meta http-equiv="Content-style-type" content="text/css" /> <link rel="stylesheet" href="nofile.css" type="text/css" /> <meta name="description" content="このページの説明文を書く" /> <meta name="keywords" content="キーワード1, キーワード2, キーワード3" /> <meta name="robots" content="all" /> <meta name="author" content="作者の名前" /> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <body> <h2>見出しの書き方</h2> <p> 見出しは次のように書きます。全部で6レベルあります。 </p> <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> <h2>本文の書き方</h2> <p> 本文の文章はここに書く。 改行したいときには次のように書く。<br /> <hr /> 直前の行のように指示するとこのように線を引くこともできます。 文章の一部を強調したいときには<em>このように</em>書く。 <a href="http://edu.isc.chubu.ac.jp/naga/index.html">他のWebページへのリンク</a> はこのように書く。<br /> <a id="abc" name="abc">このように</a>文章の一部に印を付けることができます。 </p> <p> 別の段落はこのように書きます。段落と段落の間は空行が入ります。 </p> <h2>箇条書きの書き方</h2> <p> 箇条書きは次のように書きます。 </p> <ul> <li>箇条書きの項目</li> <li>箇条書きの項目</li> <li>箇条書きの項目</li> </ul> <ol> <li>番号付き箇条書きの項目</li> <li>番号付き箇条書きの項目</li> <li>番号付き箇条書きの項目</li> </ol> <h2>図の挿入の仕方</h2> <p> 画像を表示することもできます。 </p> <img src="dragon.gif" alt="ドラゴン"></img> <h2>表の書き方</h2> <p> 表を作ることもできます。 タイトルを付けることもできます。 </p> <table border="1"> <caption>各地の降水量</caption> <tr> <th> </th> <th>愛知</th> <th>岐阜</th> <th>三重</th> <th>静岡</th> <th>東京</th> <th>大阪</th> </tr> <tr> <th>1月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>2月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>3月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> </table> <a href="#abc">上で印を付けたところ</a>に戻ることができます。 <hr /> <address>Copyright 2012 NAGASAKA Yasunori, All Rights Reserved.</address> </body> </html>
セレクタ {
プロパティ: 値;
プロパティ: 値;
...
}
設定例
h1 {
font-size: 150%;
color: #ff0000;
background-color: #000000;
text-alaign: center;
border: 1px solid #0000ff;
}
上記の設定例では、h1 要素に対して、フォントの大きさを通常の大きさの 1.5 倍、
文字の色を赤色、背景の色を黒色、文章をセンタリングする、
枠線を実線で 1 ピクセルの幅にして色を青色にする、という内容になっている。
body {
font-size: 150%;
font-family: "Times New Roman",selif,"ＭＳ Ｐ明朝";
line-height: 150%;
text-align: center;
background-color: #cccccc;
margin-left: 10%;
}
.page {
color: #000000;
background-color: #FFFFFF;
width: 750px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
h1 {
font-size: 150%;
font-family: Helvetica,sans-selif,"ＭＳ Ｐゴシック",Osaka;
color: #ffffff;
background-color: #333366;
}
h2 {
color: #ff0000;
font-size: 120%;
font-family: Helvetica,sans-selif,"ＭＳ Ｐゴシック",Osaka;
text-align: left;
margin-left: 5%;
}
h3 {
color: #ff00ff;
font-family: Helvetica,sans-selif,"ＭＳ Ｐゴシック",Osaka;
text-align: left;
margin-right: 5%;
border-style: solid;
border-width: 0px 0px 1px 13px;
border-color: #aaaa88;
}
h4, h5, h6 {
color: #ff00ff;
font-family: Helvetica,sans-selif,"ＭＳ Ｐゴシック",Osaka;
text-align: right;
margin-right: 5%;
}
p {
color: #000099;
background-color: #dddddd;
text-align: left;
padding: 1em;
padding-right: 3em;
border: solid 1px #ff00ff;
border-top-width: 10px;
border-top-color: #0000ff;
margin: 1em;
margin-bottom: 2em;
}
p.small {
font-size: 50%;
color: #ffffff;
background-color: #666666;
}
em {
color: #ffffff;
background-color: #ff00ff;
}
a:link {
color: #88aaaa;
text-decoration: underline;
}
a:visited {
color: #aa88aa;
text-decoration: underline;
}
a:hover {
color: #ffffff;
text-decoration: underline;
background-color: #88aaaa;
}
a:active {
color: #ffffff;
text-decoration: underline;
background-color: #88aaaa;
}
ol {
color: #00ff00;
}
img {
padding: 1em;
padding-left: 5em;
border: solid 1px #0000ff;
border-right-width: 10px;
border-right-color: #00ffff;
margin: 1em;
margin-bottom: 3em;
}
以下が xhtml2.html である。xhtml1.html との違いは、(1) CSS の設定を記した sample.css
を指定している、(2) p 要素の一部に class の指定を加えて、
class による適用範囲の限定の仕方を示している。
<?xml version="1.0" encoding="shift-jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="Content-language" content="ja" /> <meta http-equiv="Content-style-type" content="text/css" /> <link rel="stylesheet" href="sample.css" type="text/css" /> <meta name="description" content="このページの説明文を書く" /> <meta name="keywords" content="キーワード1, キーワード2, キーワード3" /> <meta name="robots" content="all" /> <meta name="author" content="作者の名前" /> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <body> <div class="page"> <h1>見出しの書き方</h1> <p> 見出しは次のように書きます。全部で6レベルあります。 </p> <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> <h2>本文の書き方</h2> <p> 本文の文章はここに書く。 改行したいときには次のように書く。<br /> </p> <hr /> <p> 直前の行のように指示するとこのように線を引くこともできます。 文章の一部を強調したいときには<em>このように</em>書く。 <a href="http://edu.isc.chubu.ac.jp/naga/index.html">他のWebページへのリンク</a> はこのように書く。<br /> <a id="abc" name="abc">このように</a>文章の一部に印を付けることができます。 </p> <p class="small"> 別の段落はこのように書きます。段落と段落の間は空行が入ります。 </p> <h2>箇条書きの書き方</h2> <p> 箇条書きは次のように書きます。 </p> <ul> <li>箇条書きの項目</li> <li>箇条書きの項目</li> <li>箇条書きの項目</li> </ul> <ol> <li>番号付き箇条書きの項目</li> <li>番号付き箇条書きの項目</li> <li>番号付き箇条書きの項目</li> </ol> <h2>図の挿入の仕方</h2> <p> 画像を表示することもできます。 </p> <img src="dragon.gif" alt="ドラゴン"></img> <h2>表の書き方</h2> <p> 表を作ることもできます。 タイトルを付けることもできます。 </p> <table border="1"> <caption>各地の降水量</caption> <tr> <th> </th> <th>愛知</th> <th>岐阜</th> <th>三重</th> <th>静岡</th> <th>東京</th> <th>大阪</th> </tr> <tr> <th>1月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>2月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <th>3月</th> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> </table> <a href="#abc">上で印を付けたところ</a>に戻ることができます。 <hr /> <address>Copyright 2012,2013 NAGASAKA Yasunori, All Rights Reserved.</address> </div> </body> </html>
<?xml version="1.0" encoding="shift-jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="Content-language" content="ja" /> <meta http-equiv="Content-style-type" content="text/css" /> <link rel="stylesheet" href="sample.css" type="text/css" /> <meta name="description" content="このページの説明文を書く" /> <meta name="keywords" content="キーワード1, キーワード2, キーワード3" /> <meta name="robots" content="all" /> <meta name="author" content="作者の名前" /> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <body> <h1>JavaScript の簡単なサンプル</h1> <h2>sample.js</h2> <p> 以下では JavaScript の簡単なサンプルが挿入されている。 文法はC言語にかなり似ている。 </p> <script type="text/javascript" src="sample.js"></script> <p> プログラムは実行された後、ソースファイルが配置された場所に表示される。 </p> </body> </html>
var i, j = 0;
var strMsg = "Hello, world.";
var strDate = Date();
document.writeln(strMsg + "<br />");
document.writeln(strDate + "<br />");
for (i = 0; i < 10; i++) {
document.writeln(i + "<br />");
j += i;
}
document.writeln(j + "<br />");
if (0 == j % 2) {
document.writeln("even number<br />");
}
else {
document.writeln("odd number<br />");
}
i = 0;
while (i < 10) {
document.writeln(i++ + " ");
}
<?xml version="1.0" encoding="shift-jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="Content-language" content="ja" /> <meta http-equiv="Content-style-type" content="text/css" /> <link rel="stylesheet" href="sample.css" type="text/css" /> <meta name="description" content="このページの説明文を書く" /> <meta name="keywords" content="キーワード1, キーワード2, キーワード3" /> <meta name="robots" content="all" /> <meta name="author" content="作者の名前" /> <script type="text/javascript" src="sample2.js"></script> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <body id="body1"> <form action="mailto:any.naga@gmail.com" method="post" enctype="text/plain"> <p> <textarea name="test" rows="4" cols="40"> </textarea> </p> <input type="submit" value="Submit" /> <input type="reset" value="Cancel" /> </form> <form name="form1"> <input type="button" name="b1" value="color" onclick="color()" /> <input type="button" name="b2" value="hello" onclick="hello()" /> <input type="button" name="b3" value="number" onclick="number()" /> </form> <address>Copyright 2012,2013 NAGASAKA Yasunori, All Rights Reserved.</address> </body> </html>
document.onload = init();
document.form1.b1.onclick = color();
document.form1.b2.onclick = hello();
document.form1.b3.onclick = number();
var intRandom, intR10, intR1;
function init() {
var strDate = Date();
var strMsg = "Hello, world."
var i, j;
document.writeln(strMsg + "<br />");
document.writeln(strDate);
intRandom = Math.floor(Math.random() * 100);
intR10 = Math.floor(intRandom / 10);
intR1 = intRandom % 10;
}
function hello() {
var boolFlag;
alert("Hello, world.\n");
boolFlag = confirm("Hello, world.\n");
if (true == boolFlag) {
alert("OK was selected.\n");
}
else {
alert("Cancel was selected.\n");
}
}
function color() {
var strColor;
var b;
strColor = prompt("背景の色", "gray");
alert(strColor);
b = document.getElementById("body1");
b.style.backgroundColor = strColor;
}
function number() {
var intNum, int10, int1, a = 0, b = 0;
while (a < 2) {
a = 0;
b = 0;
intNum = prompt("0 ~ 99", "00");
int10 = Math.floor(intNum / 10);
int1 = intNum % 10;
if (intR10 == int10) a++;
if (intR1 == int1) a++;
if (intR10 == int1) b++;
if (intR1 == int10) b++;
alert(a + " " + b);
if (2 == a) {
intRandom = Math.floor(Math.random() * 100);
intR10 = Math.floor(intRandom / 10);
intR1 = intRandom % 10;
}
}
}
<?xml version="1.0" encoding="shift-jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="Content-language" content="ja" /> <meta http-equiv="Content-style-type" content="text/css" /> <link rel="stylesheet" href="sample.css" type="text/css" /> <meta name="description" content="このページの説明文を書く" /> <meta name="keywords" content="キーワード1, キーワード2, キーワード3" /> <meta name="robots" content="all" /> <meta name="author" content="作者の名前" /> <script type="text/javascript" src="sample3.js"></script> <title>Webページの書き方, HTML/XHTML の基本</title> </head> <body id="body1"> <form name="form1"> 1個目の数 <input type="text" id="text1" size="10" /> <br /> 2個目の数 <input type="text" id="text2" size="10" /> <br /> 3個目の数 <input type="text" id="text3" size="10" /> <br /> <input type="button" id="calc" value="合計を計算" /> <br /> 合計 <input type="text" id="sum" size="10" /> <br /> </form> <address>Copyright 2012,2013 NAGASAKA Yasunori, All Rights Reserved.</address> </body> </html>
window.onload = WindowOnLoad;
function WindowOnLoad() {
document.getElementById('calc').onclick = calc;
}
function calc() {
var a = document.getElementById("text1").value - 0;
var b = document.getElementById("text2").value - 0;
var c = document.getElementById("text3").value - 0;
var sum = a + b + c;
document.getElementById("sum").value = sum;
}