■サンプルファイルのダウンロードについて
本書掲載のサンプルファイルは、下記 URL からダウンロードできます。
https://----------------------------

・本書の内容についてのご意見、ご質問は、お名前、ご連絡先を明記のうえ、小社出版部宛文書（郵送または E-mail）でお送りください。
・電話によるお問い合わせはお受けできません。
・本書の解説範囲を越える内容のご質問や、本書の内容と無関係なご質問にはお答えできません。
・匿名のフリーメールアドレスからのお問い合わせには返信しかねます。
本書で取り上げられているシステム名／製品名は、一般に開発各社の登録商標／商品名です。本書では、™ および ® マークは明記していません。本書に掲載されている団体／商品に対して、その商標権を侵害する意図は一切ありません。本書で紹介している URL や各サイトの内容は変更される場合があります。

はじめに
本書では、いわゆるホームページに、図形や絵、アニメーションや画像（二次元グラフィッ
クス）を表示する方法について解説します。この方法を使うと、ホームページの中に図形や画像を表示するだけではなく、自由に図形やグラフを描いたり、ゲームを作ることさえできます。

本書で解説する方法は、HTML の <canvas> 要素を使う方法、CSS（スタイル）を使う方法、

SVG を使う方法の 3 種類です。HTML ドキュメントの中で HTML の <canvas> 要素を使う方法
では、プログラミングの経験がないか少ない場合には、グラフィックスのプログラミングは難しいと感じるかもしれません。実際、本書の内容を完全に理解するには、HTML と CSS、そして JavaScript というものを理解する必要がありますが、本書では経験のない初心者のために最初からやさしく解説します。

CSS による描画や、<svg> 要素を使った SVG によるグラフィックス描画については、CSS や

SVG そのものに強力な画像操作機能が備わっているので、JavaScript を使わなくても比較的単純な記述でさまざまな表現ができます。さらに、SVG を JavaScript で扱うこともできます。
本書は、ファイルやフォルダ（ディレクトリ）などについて基本的な知識があり、Web ブラ
ウザのような Web クライアントの使い方、ファイルのコピーやテキストファイルの作成と編集などの基本的な操作ができる読者を対象にしています。本書を活用して実際に HTML ドキュ
メントの作成に取り組むことで確実に実力を身に着けることができます。
本書を活用して HTML のグラフィックスの基礎を楽しくマスターしてください。
2021 年秋 著者しるす

iii

本書の表記abc[……]

具体的な文字や数値に置き換わる部分は斜体で表します。

書式の説明において [ と ] で囲んだものは省略できることを示します。
本文を補足するような説明や、知っておくとよい話題です。

ご注意●

本書の内容は本書執筆時の状態で記述しています。Web ブラウザや Web クライアントによっては本書の記述とまったく同じにはならない場合があります。また、将来、HTML やCSS、JavaScript や SVG の仕様が変わるなど、何らかの理由で記述と実際とが異なる結果となる可能性があります。

●

本書は HTML、CSS、JavaScript、SVG などについて、そのすべてを網羅的に完全に解説するものではありません。必要に応じてそれぞれのドキュメントなどを参照してください。

●

本書のサンプルは、プログラミングや記述方法を理解するために掲載するものです。ユーザーとの対話を含むプログラムもありますが、実用的なアプリとして提供するものではありませんので、ユーザーのエラーへの対処やセキュリティ、その他の面で省略してあるところがあります。また、環境によっては意図通りにグラフィックスが表示されても警告が指摘される場合があります。

●

プログラムの一部は説明する際により理解しやすいように意図的に冗長なコードにしている部分があります。また、紙面掲載の都合で改行して掲載しているコードがあります。

●

掲載しているコードのうちコードの断片はそのままでは実行できません。また、一連のJavaScript コードを Web ブラウザで表示して実行するときには <script> タグで囲うなどして適切な形式のファイルにする必要があります。詳しくは本文の説明を参照してください。

iv

本書に関する問い合わせについて

本書に関する問い合わせは、sales@cutt.co.jp にメールでご連絡ください。

なお、問い合わせ内容は本書に記述されている範囲に限らせていただきます。特定の環境や特定の目的に対する問い合わせにはお答えできませんので、あらかじめご了承ください。
問い合わせの際には下記事項を明記してくださいますようお願いいたします。

●

氏名

●

連絡先メールアドレス

●

書名

●

記載ページ

●

問い合わせ内容

●

実行環境

v

目次

目

次

はじめに............................................................................................................................iii

第1章
1.1

ホームページとグラフィックス …… 1
HTML ドキュメント............................................................................................. 2
HTML……2●●

HTML ドキュメントの作り方……3

ローカルファイル……3

ホームページの仕組み……4●

1.2

CSS と JavaScript............................................................................................ 5
CSS……5

●

1.3

●

●

JavaScript……5

HTML のグラフィックス..................................................................................... 6
グラフィックスの種類……6

イメージ……7●

1.4●

Web サーバー....................................................................................................... 7
Web サーバー経由の表示……7●

ローカルサーバー……8●Web サーバーについて……8

ビルトインサーバー……9●●

その他の Web サーバー……11

●

第2章
2.1

HTML と CSS の基礎 …… 13
HTML の基礎..................................................................................................... 14
HTML の概要……14●

属性……18●●

単純な HTML ファイル……14

ヘッダー……19<meta> タグ……20

●

2.2

●

●

●

HTML の典型的な構造……19

コメント……21

さまざまな要素を含む HTML……23●

CSS の概要……25

グラフィックス要素……24

長さの単位……26●

ヘッダーでのスタイル指定……28●

コメント……31

●

●

●

●

スタイル指定の例……26

ボディーでのスタイル指定……29

スタイルクラス……32

CSS ファイル.................................................................................................... 34
スタイルシートファイル……34●

vi

インデント……22

CSS の基礎........................................................................................................ 25
●

2.4

●

HTML の例........................................................................................................ 23●

2.3

タグ……15●

疑似クラスと疑似要素……37

●

目 次

第3章
3.1

JavaScript の基礎 …… 41
JavaScript について....................................................................................... 42●

JavaScript とは……42●

HTML と JavaScript……44
ヘッダー関数……49

●

3.2

●

空白……52

改行……53

コメント……54

リテラル……56

整数と実数……61●

文字と名前……54

●

●

●

●

配列……62

条件分岐……70

関数……63●

繰り返し……77●●●

定数……61strict モード……67●

その他の実行制御……82

演算..................................................................................................................... 85
式と値……85

代入式……86●

特殊な値……87●●

演算子……88

算術演算子……88●

代入演算子……90●

ビット演算子……91

関係演算子……93●

論理演算子……94●

文字列演算子……94●●

メンバー演算子……94

特殊演算子……95●

結合性……98●●

優先順位……97●

計算順序の指定……99●

オブジェクト指向プログラミング..................................................................... 99
オブジェクト指向……99●●

オブジェクト……100

文字列表記のプロパティ……102●

コンストラクタ……103●

4.1

インデント……54

変数……58

エラーの検出……68

●

第4章

●

●

制御構造.............................................................................................................. 70●

3.5

ボディースクリプト……47

JavaScript ファイル……50

●

●

3.4

●

JavaScript の基本的な要素............................................................................ 52●

3.3

JavaScript の基本構造……42

●

●

●

プロパティ……100●

メソッド……102

複数のメソッドの同時使用……105

HTML の主な要素 …… 107
HTML のタグ...................................................................................................108
さまざまなタグ……108

●

4.2

4.3

イメージとビデオ.............................................................................................109●<img> 要素……109●●<svg> 要素……115●<picture> 要素……112<video> 要素……116●<canvas> 要素……113

アニメーション……117●

input 要素........................................................................................................118●

HTML の input 要素……118●

input 要素の使用例……119

vii

第5章
5.1

5.2

図形とテキストの描画 …… 125
キャンバス........................................................................................................126●<canvas> 要素……126●

3 次元グラフィックス……130

直線……134

色……148四角形……138●

影のスタイル……152●

テキスト............................................................................................................154●

フォント……156

グラフ...............................................................................................................159
棒グラフ……159●

6.1

円と弧……143

線のスタイル……149

文字列の描画……154

第6章

●

●

●

5.5

スタイル……133●

デザイン要素....................................................................................................148●

5.4

座標……130●

図形...................................................................................................................134●

5.3

コンテキスト……127●

折れ線グラフ……162●●

円グラフ……165

イベント処理 …… 169
イベントとプログラム.....................................................................................170
イベント……170●

イベントハンドラ……170●

オブジェクトのイベントハンドラ……175●

6.2

さまざまなイベント.........................................................................................176
イベントとイベントハンドラ……176●

6.3

イベントリスナー.............................................................................................177
イベントとリスナー……177

イベントリスンの例……178

●

第7章
7.1

●

キャンバスとイメージ …… 183
イメージの表示.................................................................................................184
キャンバスへのイメージ表示……184●

7.2

イメージへの描画……188

8.1

モノクロ化……192●●

色の反転……194

ゲーム …… 197
ゲームの要素....................................................................................................198
グラフィックス……198

乱数……198●

キーボード……203

●

viii

イメージデータ……186●

イメージの操作.................................................................................................188●

第8章

さまざまなイベント……176●●

サウンド……205●●

タイマー……200

目 次ストーリーとキャラクタ……206

思考アルゴリズム……206●

8.2

シンプルなゲーム.............................................................................................206
クイズ……206

●

8.3

9.1

ランナー……221

9.3

ボールゲーム……228●

CSS とグラフィックス …… 239
CSS による操作...............................................................................................240
スタイル指定による表示の操作……240●

9.2

マルバツゲーム……212●

動きのあるゲーム.............................................................................................221●

第9章

変形...................................................................................................................240●

scale()……240●translate()……243●

skew()……245●

matrix()……247

線形グラデーション……248

第 10 章●rotate()……244

グラデーション.................................................................................................248
●

9.4

●

●

放射グラデーション……251

アニメーション.................................................................................................252●

CSS アニメーションの基礎……252●

transition……258●

アニメーションの例……255

SVG の基礎 …… 261

10.1 SVG の基礎......................................................................................................262●

SVG とは……262●

SVG と他の描画技術……266●

SVG の用途……262●

SVG の小さな例……263

10.2 基本的な要素....................................................................................................266
文字……266●

空白……268●●

グルーピング―<g> 要素……270

行……269●

数値……270

定義―<defs> 要素……271●●

要素の再利用―<use> 要素……272●●

コードの切り替え―<switch> 要素……274

継承……276●

10.3 座標...................................................................................................................277
座標系……277●●

viewBox……279

10.4 さまざまな図形.................................................................................................281
直線―<line> 要素……281●

矩形―<rect> 要素……284

●

●
●
●

角丸矩形……286

楕円―<ellipse> 要素……288
パス―<path> 要素……291●●

折れ線―<polyline> 要素……283●●

円―<circle> 要素……287

ポリゴン―<polygon> 要素……290

ベジェ曲線―<path> 要素……297●

マーカー―<marker> 要素……299ix

10.5 ストロークとフィル.........................................................................................301
ストローク……302●●

ラインキャップ……303●

フィル（塗り潰し）……308

10.6 テキストの描画.................................................................................................312
文字列―<text> 要素……312

色とグラデーション……313●

文字列の描画位置……315●●●

さまざまなフォント……316

テキスト範囲に対する指定―<tspan> 要素……317●

位置揃え―text-anchor 属性……319

テキスト長さの指定―textLength 属性……320●

回転―transform 属性……321

●

●

●

縦書き……322

パスに沿ったテキスト―<textPath> 要素……324●

第 11 章画像操作とアニメーション …… 327

11.1 変換...................................................................................................................328
変換関数……328●

移動―translate()……328●

回転―rotate()……333●●

拡大・縮小―scale()……331

傾斜―skewX()、skewY()……335●

変換マトリックス―matrix()……337●

表示位置の指定―preserveAspectRatio 属性……339●

11.2 クリッピングとマスキング..............................................................................344
イメージのクリッピング―<clipPath> 要素……345●

イメージのマスク―<mask> 要素……347

●

●

●

文字によるクリッピング……346

グラデーションのマスク……349

11.3 フィルター........................................................................................................350
フィルターによる操作……350●

ぼかし―<feGaussianBlur> 要素……354●

カラーフィルター―<feColorMatrix> 要素……355●

合成―<feComposite> 要素……356

影―<feOffset> 要素……359●●

11.4 グラデーション.................................................................................................361
線形グラデーション―<linearGradient> 要素……361●

放射グラデーション―<radialGradient> 要素……365●

グラデーションの広がり方―spreadMethod 属性……367●

11.5 アニメーションの基礎.....................................................................................368
アニメーションの概要……368●

アニメーション使用上の注意……370●

11.6 単純なアニメーション.....................................................................................370
シンプルなアニメーション―<animate> 要素……370●

複数の属性のアニメーション……371●

アニメーションの同期……372●

アニメーションの反復―<animate> 要素の repeatCount 属性……374●

11.7 さまざまなアニメーション..............................................................................375
設定の変更―<set> 要素……375●●

移動―<animateMotion> 要素……378●x

変換―<animateTransform> 要素……376

目 次

11.8 SVG と JavaScript.......................................................................................380
図形の操作……380●

要素の生成……382●●

イベント処理……384

付 録 …… 387
付録 A

トラブル対策.................................................................................................388

付録 B

課題解答例....................................................................................................391

付録 C

参考リソース.................................................................................................402

索  引............................................................................................................................403

xi

1
ホームページとグラフィックス
ここでは、いわゆるホームページの実態と、ホームページに図形や画像を表示する方法について概説します。具体的なことは第 2 章以降で詳しく説明します。

第1章

ホームページとグラフィックス

第1章

ホームページとグラフィックス

1.1

HTML ドキュメント

いわゆるホームページは、HTML ドキュメントという種類の文書として作成されています。

HTML
一般によくホームページと呼ばれる、Web ブラウザなどに表示されるページ（ウェブページ、
Web ページ）は、HTML ドキュメントという種類のドキュメント（文書）として作成されています。
とても単純な HTML ドキュメントの例を次に示します。
リスト 1.1 ● simple.html<html><body><h1>HTMLグラフィックス入門</h1><p>キャンバスというものを使ってホームページに図形を描く方法を学びます。</p></body></html>

これをテキストファイルにして、simple.html というファイル名でディスクに保存して、同じマシンで Web ブラウザに表示すると、次のように表示されます。

図1.1●simple.htmlを表示した例

リスト 1.1 の <html> や <body> その他の要素について詳しくは第 2 章で説明します。ここでは、このような単純な記述によってホームページを作成できるという点に注目してください。

<html> と </html>、<body> と </body>、そして <h1> と </h1> や <p></p> で囲むことで文字列

2

1.1

HTML ドキュメントを表示できるので、Web ブラウザに文字列を表示するための基本はきわめて単純です。

1

また、リスト 1.1 の simple.html は、文字だけで構成される単純なテキストファイルである

点にも注目してください。

2

ホームページの中にはとても複雑に見えるものがありますが、基本的なホームページの実態
はこのように単純なものをベースにしています。

3

HTML ドキュメントの作り方

4HTML ドキュメントファイルは、文字だけで構成されるテキストファイルなので、Windowsのメモ帳や Linux など Unix 系 OS の gedit のようなシンプルなテキストエディタで作成するこ

5とができます。

例えば、リスト 1.1 の simple.html は、メモ帳で次のように入力してファイルに保存するこ6とで作成することができます。

789

図1.2●HTMLファイルを編集する例

10

このとき、ファイルの拡張子（ファイル名の最後のピリオドより後の部分）を html にする必要があります。上の例では simple.html というファイル名で保存しています。

11

ローカルファイル
Web サーバーの機能を利用する必要がない HTML ファイルの場合は、図 1.1 に示したように、HTML ドキュメントを表示するマシンに HTML ファイルをローカルファイルとして保存して、同じマシンの Web ブラウザで表示することができます。
付録

本書の範囲のほとんどのサンプルは、HTML ファイルおよび関連するさまざまなファイルをローカルに保存してそのまま Web ブラウザなどで表示することができます。
ローカル HTML ファイルを Web ブラウザに表示する方法には、次のような方法があります。

3

第1章

ホームページとグラフィックス●

拡張子（.html）が Web ブラウザに関連付けられていれば、ファイル名をダブルクリック

するか、ファイル名をマウスの右ボタンでクリックするなどしてローカルメニューを表示
してからメニュー項目の「開く」などを選択する。
●

Web ブラウザを開いておいて、HTML ファイルを Web ブラウザにドラッグ & ドロップする。

●

Web ブラウザのアドレスバーにファイル名を入力する（必要に応じて完全パスで）。

Web サーバーの機能を利用する必要がある場合は、Web サーバー上にファイルを置いて Web
クライアントからリクエストしないと期待した通りに表示されません。Web サーバーの機能を利用する必要がある場合には、本書で扱う一部のキャンバスを操作する HTML が含まれます。
また、本書では扱いませんが、PHP や Go 言語でサーバー側で HTML ドキュメントを生成する
場合や、WebAssembly のように WebAPI と呼ばれるものを利用する場合も、Web サーバーを介さないと意図通りに表示できません。

課題 1.1
リスト 1.1 を適切なテキストエディタまたは開発ツールで入力し、ファイル名を simple.

html として保存してから Web ブラウザで表示してください。

ホームページの仕組み
公開されているホームページ（HTML ドキュメント）は、通常は Web サーバーというネッ
トワーク上のマシンにファイルとして保存されています。そして、Web ブラウザや HTML を表示できるその他のアプリのようなプログラム（Web クライアント）から特定のページがネッ
トワークを介して Web サーバーにリクエスト（要求）されると、Web サーバーはその要求に答えて HTML ファイルを返します。Web クライアントは Web サーバーからネットワークを介して送られた HTML ファイルを表示します。

Web ブラウザ

リクエスト
HTML ドキュメント

Web サーバー

図1.3●ホームページが表示される仕組み

4

1.2

CSS と JavaScript

1
Web サーバーから Web ブラウザのようなクライアントに送られて表示されるウェブページは、必ずしも物理的なファイルではなく、Web サーバー側で実行されるプログラム（PHP や Go 言

2語など）が生成した結果である場合もあります。

3

1.2

4

CSS と JavaScript

5

HTML ドキュメントでさまざまなものをさまざまな見え方で表示するためには、HTML に加えて CSS と JavaScript が必要になります。

6

CSS

7

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、HTML ページのスタイルを指定するために使います。例えば、文字列の色を指定したり、文字列の配置方法な

8どを指定します。
現在主流となっている HTML5（HTML のバージョン 5）では、スタイルの指定に CSS を使9うので、HTML と切り離すことはできません。
CSS は、HTML ファイルの中に記述することも、別のファイルとして記述して HTML ファイ

10

ルに読み込むこともできます。
CSS については第 2 章で説明します。

11

JavaScript
JavaScript は、スクリプト言語という種類のプログラムを作成するための言語（プログラミ
ング言語）です。例えば、
HTML のキャンバスというものに「直線を描く」とか「四角形を描く」という処理は JavaScript のプログラムとして記述します。
付録

JavaScript も、HTML ファイルの中に記述することも、別のファイルとして記述して HTML
ファイルに読み込むこともできます。
JavaScript については第 3 章で説明します。

5

第1章

ホームページとグラフィックス

HTML ドキュメントでグラフィックスを表示するために HTML、CSS、JavaScript が必要であるといっても、そのすべてに精通していなければならないわけではありません。本書で基本的なことを理解したら、必要に応じて他の書籍や Web 上のドキュメントなどで調べて利用できるようになれば十分です。

1.3

HTML のグラフィックス

ウェブページに図形や画像を表示する方法はいろいろあります。基本的には、画像（イメージ）と、図形やグラフのようなグラフィックス要素は分けて考えます。

グラフィックスの種類
グラフィックスの主要な形式として、ラスターグラフィックスとベクターグラフィックスの2 種類があります。
ほとんどのペイントソフトやカメラの写真データなどに使われるラスターグラフィックス（ビットマップグラフィックス）は、画像をピクセル（画素）の集合で表します。そのため、ラスターグラフィックスの一部を取り出してとても大きく拡大すると、画素（色の矩形または
色の点）が見えます。

図1.4●ラスターグラフィックス

6

1.4

Web サーバー

ラスターグラフィックスはグラフィックスをそのままディスプレイなどに表示できますが、1

拡大縮小などによって（ピクセルを増やしたり減らしたりするので）美しさが損なわれることがあるという欠点があります。

2

ベクターグラフィックスは、座標とそれを結ぶ線などの数値データをもとにして演算によって画像を生成します。円を中心座標と半径で指定し、直線を両端点の座標で指定し、さらに線

3の太さや色などの属性値を指定して、それらの情報からソフトウェアがグラフィックスをディ
スプレイなどに表示します。

4

本書で扱うキャンバスや SVG の図形の描画では、基本的にベクターグラフィックスを扱います。ベクターグラフィックスでは図形を表示するために座標と描き方を指定しなければなりま

5

せんが、拡大縮小してもきれいなグラフィックスを描くことができるという特徴があります。

6

イメージ
写真やイラストのようなラスターグラフィックスの画像は、イメージファイルとして別に7作っておいて HTML に読み込んで表示することができます。
また、JavaScript でイメージを読み込んでキャンバスに表示したり加工することもできます。

8

SVG では、イメージを単純な記述によってさまざまに操作することができます。

1.4

9

Web サーバー

10
11

一部のウェブページは Web サーバーを介して表示しないと意図通りに表示できません。なお、このセクションの内容は、本書のごく一部だけに関連するので、必要に応じて後で戻ることにして先に進んでもかまいません。

Web サーバー経由の表示
一般的には、ウェブページを公開するときには、Web サーバーを使って公開します。
付録

さらに、Web サーバーの機能を使う HTML ファイルは、ローカル HTML ファイル（作業している PC にある物理的なファイル）を直接表示しようとしても意図通りに表示できません。
例えば、キャンバスの内容を書き換える JavaScript や、WebAssembly、PHP のプログラムは、

7

第1章

ホームページとグラフィックス

Web サーバーを介して表示する必要があるので、Web サーバーを準備する必要があります。

Web サーバーについて

Web サーバーは、例えば、Web ブラウザの上部にあるアドレスバーに「http://doggy.php.

xdomain.jp」とか「/ch08/index.html」などと入力すると、そこにある Web ページが表示されるようにするハードウェアとソフトウェアのセットです。

ハードウェアは、一般的にはいわゆるパソコン（PC）か専用のハードウェアを使います。
ソフトウェアは、正式には HTTP サーバー（HTTP Server）と呼ぶプログラムですが、ソフ
トウェアの世界では慣例として Web サーバーといえば HTTP サーバーのことを指します。

HTTP はネットワーク上で Web ブラウザのような Web クライアントが Web サーバーと通信する際に主に使う通信プロトコル（決まり事）のひとつです。

ソ フ ト ウ ェ ア と し て の Web サ ー バ ー と し て 代 表 的 な も の は、Apache と IIS（Internet
Information Services）です。Apache は、世界で最も人気のある Web サーバーなので、一般的には Apache を使うとよいでしょう。Windows では IIS があらかじめインストールされている
場合があります。
一般に広く使うことができる具体的な Web サーバーシステムの形態としては、ローカルサー
バー、レンタルサーバー、自前の公開サーバーなどがあります。また、ローカルマシンでウェ
ブページのテストを行うために使われる PHP や Python などに埋め込まれたビルトインサー
バーもあります。

ローカルサーバー
PC を用意して、Apache や IIS などを起動して Web サーバーとして機能するようにしておきます。そして、その同じ PC でアドレスを「localhost」とすることでアクセスして Web ブラウ
ザに表示します。あるいは LAN で接続したマシンから Web サーバーのアドレスを指定してア
クセスします。
HTML を保存する Web サーバーの典型的なディレクトリは次の通りです（これとは異なる場合もあり、また設定により変更できます）
。

8

1.4

Web サーバー

表1.1●HTMLを保存するWebサーバーの典型的なディレクトリ

システム
Windows/ApacheWindows/IIS
Windows/XAMPPLinux/Apache1

典型的なディレクトリC:¥Apache24¥htdocs
C:¥inetpub¥wwwroot

2/var/www/html

3C:¥xampp¥htdocs

ローカル Web サーバーを使う場合は、Web サーバーが準備できたら、作成した HTML ファ

4

イルと関連ファイルを上記のような HTML を保存する Web サーバーの典型的なディレクトリ
に保存します。

5

そして Web サーバーを起動します。準備した環境に応じて Web サーバーが Apache なら
ApacheMonitor や XAMPP Control Panel などで Apache をスタートさせるか、IIS をスタート

6

するか、あるいは Linux でコマンド「sudo systemctl start apache2」を実行するなどして Web
サーバーを起動します。なお、システムによっては、システムの起動時に Web サーバーがス

7

タートするように設定されている場合もあります。
Web サーバーが起動したら、Web ブラウザを起動して、アドレスバーに HTML ファイルのアドレス（例えば「localhost/ch01/simple.html」）を入力します。すると Web サーバー上の8

合は、そのマシンの Web サーバーを起動して、そのマシンのアドレスに続けてディレクトリ

9

ます。

10

HTML ファイルが表示されるはずです。LAN で接続した別のマシンにファイルを保存した場とファイル名を例えば「192.168.11.12/ch03/twice/src/main.html」とアドレスバーに入力しWeb サーバーを介する必要がある JavaScript プログラムの学習や、公開するサイトを準備するときのテスト環境として、他に理由がなければベストの方法です。

11

ビルトインサーバー
PHP や Python には、公開するサイトに使う目的ではなく、作成中のサイトのテストなどに使うことを目的としたビルトイン Web サーバーが組み込まれています。
PHP のビルトインサーバーは PHP 5.4.0 以降で使うことができます。PHP ビルトインの付録

Web サーバーを使う場合は、まずビルトインサーバーをコマンドラインから起動します。ビル
トインサーバーは、オプション -S とホストとポートを引数に指定して php を実行することで起動します。

9

第1章

ホームページとグラフィックス

C:¥HTMLGraph>php -S （ホスト）:（ポート）

例えば、ホストを localhost、ポートを 8080 として次のように実行します。
C:¥HTMLGraph>php -S localhost:8080[Tue Oct 12 15:59:34 2021] PHP 7.4.15 Development Server (http://localhost:8080)
started

これでメッセージの最後に「started」と表示されればサーバーが起動しています（メッセージの詳細は PHP のバージョンによって異なります）。
ビルトインサーバーをファイル名を指定しないで起動した場合、起動したカレントディレク
トリがドキュメントのルートになります。つまり、上の例のようにカレントディレクトリが「C:¥HTMLGraph」である場合には、アドレスバーに「localhost:8080/ch01/simple.html」と入力すれば、「C:¥HTMLGraph¥ch01¥simple.html」にある HTML ファイルが Web サーバー経由で表示されます。

図1.5●PHPのビルトインWebサーバーで表示した例

Web ブラウザのアドレスバーに入力した URI リクエストにファイル名が含まれない場合（単に localhost とした場合など）は、カレントディレクトリまたは指定したディレクトリにある
index.php か index.html が Web ブラウザに表示されます。

ビルトインサーバーを終了する時は、ビルトインサーバーを起動したコンソール（コマンド

プロンプトウィンドウ）で Ctrl キーを押しながら C キーを押してサーバーのプロセスを終了します（必要に応じて複数回行います）
。

10

1.4

Web サーバー

その他の Web サーバー

1

あらかじめ用意されているレンタル Web サーバーを借りるという方法もあります。レンタルサーバーには有料のものと無料のものがあり、その多くは自分のドメインを設定することも2できます。レンタルサーバーなど外部の Web サーバーを使う場合は、まず Web サーバーにFTP ソフトウェアなどを使って HTML と関連ファイルをアップロードしてから、Web ブラウ

3

ザのアドレスバーでサーバーのアドレスに続けてファイルの場所を指定します。
常時インターネットに接続しておく PC とドメインを用意して、Web サーバーを公開する方4

法もあります。この方法ならば、誰でもどこからでもアクセスできるうえに、将来本書の範囲を超えてやりたいことがあったときに、制約なしで何でもできます。ただし、公開する Web

5

サーバーを用意して運用することはかなりの手間暇がかかります。特に、セキュリティ上と重大なバグなどの問題があるので、少なくとも、常に運用状況を監視できる体制にしておかない

6と予期しない重大な事態が発生する可能性があります。そのため、本書の対象読者のような初心者にはお勧めしません。

7

第 7 章「キャンバスとイメージ」の Web サーバーを介して表示しないと意図通り表示できない

8

ごく一部のウェブページは、上記のいずれかの Web サーバーを利用して表示します。

9
10
11

付録

11

2
HTML と CSS の基礎
この章では、主に HTML ファイルでグラフィッ
クスを使うときに役立つ HTML と CSS の基礎について説明します。

第2章

HTML と CSS の基礎

第2章

HTML と CSS の基礎

2.1

HTML の基礎

ここではウェブページにグラフィックスを表示するということに焦点を当てて、HTML に関して必要不可欠なことを説明します。

HTML の概要
HTML（HyperText Markup Language）は、Web ページを記述するためのマークアップ言語です。
HTML にはいくつかのバージョンがありますが、新しく作るページでは HTML 5 を使うこと
で新しいバージョンの CSS や SVG をはじめ最新の技術を使うことができます。

HTML ドキュメントファイルの名前の最後は .html にします。以前は Windows 環境では .htm

が使われていたことがありますが、これは Windows 系のファイルシステムのファイル拡張子（最後のピリオドから後の部分）が過去に最大 3 文字までに制限されていた名残です。これから作成する HTML ドキュメントのファイル名の最後は .html にするべきです。

単純な HTML ファイル

ここで、第 1 章のリスト 1.1 で示した simple.html を見直してみましょう。
リスト 2.1 ● simple.html（再掲）<html><body><h1>HTMLグラフィックス入門</h1><p>キャンバスというものを使ってホームページに図形を描く方法を学びます。</p></body></html>

これは Web ブラウザに次のように表示されました。

14

2.1

HTML の基礎

12
3

図2.1●simple.htmlを表示した例

4

タグ

リスト 2.1 の <html> や <body>、<h1> や <p> などのように < と > で囲まれているものをタグ5といい、</html> や </body>、</h1> や </p> のように </ で始まっているものを特に終了タグと

6

いいます。

HTML はさまざまな要素から構成されていますが、基本的な要素はこの「タグ」とその内容7です。
タグは、開始タグと終了タグで構成され、その中に要素の内容が含まれます。
タグの標準的な形式は次の通りです。

8<タグ名 属性リスト>要素の内容</タグ名>

9< タグ名 > は開始タグ、</ タグ名 > は終了タグです。

10

開始タグには属性リスト（プロパティリスト）を指定することができます。属性はプロパティ

11ともいい、そのタグに関連する状態を表す値です。
開始タグと終了タグの間のテキストは、要素の内容（content）といいます。
終了タグは、</ とタグを表す文字または文字列に続けて > を書きます。

例えば、「こんにちは」と表示するときには、パラグラフ（Paragraph）要素（<p> タグ）として記述します。

要素内容

終了タグ

<p>

こんにちは

</p>

付録

開始タグ

図2.2●HTMLの要素

15

第2章

HTML と CSS の基礎

リスト 2.1 では、次のような文を表示するために <p> タグを使っています。
<p>キャンバスというものを使ってホームページに図形を描く方法を学びます。</p>

最小の HTML ページは <p> こんにちは </p> だけでも作ることができます。
<p>こんにちは</p>

これを例えば minhtml.html というファイル名で保存すると、Web ブラウザに「こんにちは」と表示することができます（ただし Web クライアントの種類によってはそのように表示されない可能性もあります）。

タグ <p> は </p> までが段落であると解釈されますが、<p> や </p> そのものは Web ブラウザには表示はされないという点は重要です。

最小の HTML ページ minhtml.html は HTML ドキュメントとして機能しますが、普通はルート要素として内容が HTML であることを示す <html> を書き、その中の要素として文書のボディー（本体）であることを示す <body> を書いてから <p> タグを書きます。
<html><body><p>こんにちは</p></body></html>タグは入れ子にすることができます。
<タグ名1 属性リスト>テキスト要素<タグ名2>他の要素内容</タグ名2></タグ名1>

16