Contents

も く じStep 01 HTMLとWWWサーバー …………………………………… 8
1.1

HTMLとは…？

6.1

光の3原色

1.2

HTMLファイルの作成手順

6.2

16進数とは…

1.3

HTMLファイルをWebブラウザで閲覧する

6.3

16進数と10進数の変換

1.4

HTMLファイルを再編集する

6.4

RGBの16進数で色を指定するには…？

1.5

ホームページをインターネットに公開するには…？

6.5

文字色をRGBの16進数で指定する

6.6

背景色の指定Step 02 タグの基本と改行 …………………………………………… 12

Step 07 画像の利用 …………………………………………………… 35

2.1

改行を指定する

2.2

タグを記述する際のルール

7.1

2.3

<HTML>、<HEAD>、<BODY>の記述<HEAD>〜</HEAD>に記述する内容

7.2

画像の配置

2.4

7.3

altテキストの指定

2.5

正しいHTMLファイルの例

7.4

枠線の指定

<BR>

Step 03 見出しと段落 ………………………………………………… 17<H1>、<H2>、…、<H6><P>
ヘアラインの描画 <HR>

ホームページで利用できる画像<IMG>

Step 08 画像のサイズと文字の配置 ………………………………… 39

3.1

見出しの指定8.1

画像のサイズを変更する

3.2

段落の指定

8.2

画像と文字の位置を調整する

8.3

画像の左右に文字を回り込ませる

8.4

文字の回り込みの解除

8.5

画像と文字の間隔を調整する

3.3

Step 04 文字の装飾 …………………………………………………… 22
4.1

太字<B>、斜体<I>、下線<U>、取り消し線<S>の指定

4.2

上付き文字<SUP>、下付き文字<SUB>の指定

Step 05 文字の書式と行揃え ………………………………………… 26

2

Step 06 HTMLにおける色指定 …………………………………… 30

5.1

文字サイズの指定

5.2

文字色の指定5.3

属性を記述する際のルール

5.4

行揃えと DIVタグ

5.5

Pタグや H1…H6タグで行揃えを指定する<FONT size=…><FONT color=…>

Step 09 リンクの作成とパスの記述 ………………………………… 46
9.1

リンクの作成9.2

画像リンクの作成

9.3

パスの記述

9.4

別サイトへのリンク<A>

Step 10 少し特殊なリンクの作成 …………………………………… 51
10.1

リンク先を別ウィンドウで開く

10.2

ページ内リンクを作成する

10.3

メールリンクを作成する

Contents

3

Contents

Step 11 BODYタグに指定できる属性 …………………………… 56
11.1

背景色と文字色の指定

17.1

11.2

リンクの文字色の指定

17.2

11.3

背景画像の指定

Step 12 表の作成 ……………………………………………………… 60
12.1
12.2
12.3
12.4

表の作成

<TABLE>、<TR>、<TD><TD>〜</TD>の記述について
見出しの作成 <TH>
表タイトルの作成 <CAPTION>

Step 13 TABLEタグに指定できる属性 …………………………… 65

TABLEを利用してページ全体のレイアウトを作成する
TABLEを入れ子にする

Step 18 フォームの作成−1 ………………………………………… 89
18.1

フォームとは…？

18.2

テキストボックスの作成

18.3

テキストエリアの作成

18.4

チェックボックスの作成

18.5

ラジオボタンの作成

Step 19 フォームの作成−2 ………………………………………… 94

13.1

外枠の太さを指定する

19.1

セレクトボックスの作成

13.2

表全体のサイズを指定する

19.2

セレクトボックスの高さを指定する

13.3

表の背景色を指定する

19.3

FORMタグの記述

13.4

表の余白を指定する

19.4

フォームの内容をメールで送信してもらう

13.5

文字の回り込みを指定する

13.6

表示する枠線を指定する

Step 14 TDタグに指定できる属性 ………………………………… 69

Step 20 フレームの利用 ……………………………………………… 99
20.1

フレーム分割用HTMLの作成

20.2

ウィンドウを左右に分割する
ウィンドウを上下に分割する

14.1

列の幅、行の高さを指定する

20.3

14.2

セル内の配置を指定する

20.4

ウィンドウを縦横に分割する

14.3

セルの背景色を指定する

20.5

FRAMEタグに指定できる属性

14.4

セル内の折り返しを禁止する

20.6

リンク先を表示するフレームを指定する

Step 15 表のグループ化とセルの結合 ……………………………… 74

Step 21 インラインフレームの利用 ……………………………… 106

15.1

行のグループ化

21.1

インラインフレームの作成

15.2

列のグループ化

21.2

リンク先を表示するフレームの指定

15.3

横方向にセルを結合する

15.4

縦方向にセルを結合する

Step 16 表をレイアウトに利用する ………………………………… 80

4Step 17 表をページレイアウトに利用する ………………………… 85

16.1

TABLEを利用して文字や画像を配置する

16.2

セルの背景色を利用してデザインする

16.3

文字を囲んで表示する

Step 22 音声や動画の利用とファイルのダウンロード ………… 110
22.1

音声や動画の配布

22.2

ファイルのダウンロード

22.3

EMBEDタグで動画や音声を埋め込む

Contents

5

Contents

Step 23 CSSを利用する ………………………………………… 113

Step 28 枠線のCSS ……………………………………………… 140

23.1

CSSとは…？

28.1

枠線の種類の指定

23.2

CSS記述のルール

28.2

枠線の太さの指定

23.3

CSSの指定方法

28.3

枠線の色の指定23.4

指定方法−1

タグにCSSを指定する

28.4

上下左右の枠線を個別に指定する

23.5

指定方法−2

クラス付きのタグにCSSを指定する

28.5

枠線の一括指定23.6

指定方法−3

タグ内にCSSを直接記述する

Step 24 文字書式のCSS−1 ……………………………………… 120

border-styleborder-widthborder-color
border

Step 29 CSSを利用したデザイン ……………………………… 144
29.1

コラムをデザインする

24.1

文字サイズの指定

29.2

立体ボタンを作成する

24.2

文字色の指定29.3

見出しをデザインする

29.4

見出しと本文をデザインする

24.3
24.4
24.5

font-size
color
文字の太さの指定 font-weight
斜体や文字装飾の指定 font-style、text-decoration
フォントの指定 font-family

Step 25 文字書式のCSS−2 ……………………………………… 125
25.1
25.2
25.3
25.4
25.5

行間の指定

line-heightfont
行揃え（横）の指定 text-align
行揃え（縦）の指定 vertical-align
文字間隔、単語間隔の指定 letter-spacing、word-spacing

Step 30 CSSでレイヤーを作成する …………………………… 14930.1

相対位置で配置を指定する

30.2

絶対位置で配置を指定する

30.3

重なる順番を指定する

position:relative
position:absolutez-index

文字書式を一括指定

演習問題の解答 ………………………………………………………… 153
さくいん ………………………………………………………………… 190

Step 26 背景のCSS ……………………………………………… 129
26.1

背景色の指定26.2

背景画像の指定

26.3
26.4
26.5
26.6

background-color
background-image
背景画像の繰り返しの指定 background-repeat
背景画像の表示位置の指定 background-position
背景画像の固定 background-attachment
背景の一括指定 background

Step 27 サイズと余白のCSS …………………………………… 134
27.1

ボックスの構成27.2

サイズの指定27.3

内部余白の指定27.4

6

width、heightpadding
外部余白の指定 margin

Contents

7

Step

01

HTMLとWWWサーバー
ホームページは、HTMLと呼ばれる言語で作成します。HTML学習の第一歩となるステップ01では、HTMLファイルを作成する方法、および

通常、テキストエディタで保存したファイルは拡張子が「.txt」のテキストファイルになります。一方、HTMLファイルの拡張子は「.html」または「.htm」でなければいけません。このため、「メモ帳」で編集した内容をHTMLファイルとして保存するには、保存時にファイルの種類（保存形式）を指定する必要があります。
図1-2[スタート]メニューから[すべてのプログラム]→[アクセサリ]→[メモ帳]と選択すると、「メモ帳」を起動できます。

Webの基礎知識について学習します。

● 1.1 HTMLとは…？
ホームページを作成するには、HTMLと呼ばれるコンピュータ言語を学ぶ必要があります。コ

これを選択

ンピュータ言語と聞くと、「難しそうだな…」と思われるかもしれませんが、HTMLは一般的なプログラミング言語と比べて、かなり習得しやすい言語といえます。パソコンの初心者であっても、問題なく学習を進められるでしょう。
HTMLとは、HyperText Markup Languageを略したものであり、その実態は単なるテキス
トファイルでしかありません。テキストファイルとは、文字だけで記述された文章ファイルのことです。よって、Windowsの「メモ帳」のように文章を編集できるソフトウェア（テキストエディタ）があれば、誰でもHTMLファイルを作成できます。
なお、ホームページ作成ソフトウェアを使えば、HTMLを知らなくてもHTMLファイルを作成できます。これはソフトウェアがHTMLの記述を代行してくれるためです。とはいえ、HTMLを学習しておいた方が有利であることに変わりはありません。IT化が進む現代において、
ホームページは必要不可欠な情報発信源です。その仕組みを十分に理解するためにも、必ずHTMLを習得しておきましょう。
図1-3
「メモ帳」
（テキストエディタ）では、キーボードを使ってテキスト（文章）を入力していきます。

HTMLファイル

ホームページ
図1-1「すべてのファイル」を指定● 1.2 HTMLファイルの作成手順
それでは、さっそくHTMLファイルを作成する手順を解説していきます。前述したように、
HTMLファイルは単なるテキストファイルでしかありません。よって、「メモ帳」などのテキス
トエディタで作成できます。ただし、ファイルの拡張子には注意してください。

8「.html」の拡張子を付ける

図1-4
入力したテキスト（文章）を保存す
る際は、[ファイルの種類]に「すべてのファイル」を指定し、ファイル
名の最後に「.html」の拡張子を付けます。

Step 01 HTMLとWWWサーバー

9右クリック↓【01-05】

図1-5
編集した文章がHTMLファイル
として保存されます。

これを選択● 1.3 HTMLファイルをWebブラウザで閲覧する
続いては、作成したHTMLファイルをWebブラウザで閲覧する方法を解説します。この操作
手順はとても簡単で、HTMLファイルのアイコンをダブルクリックするだけです。すると、
Webブラウザ（Internet Explorer）が起動し、ホームページが表示されます。

図1-9 「メモ帳」が起動し、HTMLファイルの内容を編集可能になります。

図1- 8● 1.5 ホームページをインターネットに公開するには…？
作成したホームページをインターネットで公開するには、HTMLファイルをWWWサーバーと呼ばれるコンピュータにコピーする必要があります。この操作のことをアップロードといいます。
ただし、誰でもアップロードを実行できるわけではありません。アップロードを実行するには、
WWWサーバーを提供している企業（※1）と契約を交わし、自分専用のWWWサーバーを確保し
図1-6ておく必要があります。
また、FTPソフト（FTPクライアント）と呼ばれるソフトウェアの使用方法も習得しなければダブルクリック

いけません。FTPソフトとは、WWWサーバーなど「インターネット上にあるコンピュータ」と「自分のパソコン」の間でファイルのコピーを行うためのソフトウェアです。なお、FTPソフト
図1-7 HTMLファイルの内容がWebブラウザに表示されるの使用方法や設定方法は、各自が契約したWWWサーバーの利用手引などに明記されているので、そちらを参照してください。

この結果（図1-7）を見ると、「メモ帳」に記述した文章（図1-3）がそのままWebブラウザに表示されるのを確認できます。このように、HTMLファイルに記述した文章は、そのままホームページとして表示させることが可能です。ただし、改行は反映されません。というのも、ホームペ（※1）WWWサーバーは、インターネット接続プロバイダや専門のサービス業者などが提供しています。また、学校にWWWサーバーが用意されている場合もあります。

ージに表示される文章を改行するには、<BR>というタグを記述する必要があるからです。
つまり、タグの記述方法を習得することが、HTMLの習得につながるわけです。なお、
HTMLで使用する様々なタグについては、本書のステップ02以降で詳しく解説していきます。

演 習（1）「メモ帳」で図1-3のような文章を入力し、HTMLファイル（拡張子「.html」）として保存してみま● 1.4 HTMLファイルを再編集する
保存したHTMLファイルを再編集する場合も、「メモ帳」などのテキストエディタを使用しま

しょう。
（2）演習（1）で保存したHTMLファイルをWebブラウザ（Internet Explorer）で閲覧してみましょう。

す。ただし、普通にHTMLファイルをダブルクリックするとWebブラウザが起動するだけで、HTMLファイルを編集できません。既存のHTMLファイルを編集するには、アイコンを右クリ（3）演習（1）で保存したHTMLファイルを「メモ帳」で開いてみましょう。

ックし、[プログラムから開く]→[Notepad]を選択します。すると、「メモ帳」が起動し、HTMLファイルの内容を編集できるようになります。

（4）さらに、文章の一部を変更してから[上書き保存]を実行し、変更内容が反映されているかをWeb
ブラウザ（Internet Explorer）で確認してみましょう。

10

Step 01 HTMLとWWWサーバー

11

Step

02

タグの基本と改行
ステップ01で解説したように、HTMLファイルをWebブラウザに表示させると改行が無視されてしまいます。これを正しく改行するには、<BR> というタグを記述しなければいけません。ステップ02では、<BR>およびタグの基本について解説します。

● 2.2 タグを記述する際のルール<BR>などのタグは、定められたルールに従って記述しなければいけません。ルールに違反した場合、その記述はタグとして認められず、通常の文字として表示されます。タグの記述に関するルールは以下のとおりです。
・タグは、半角文字で記述しなければいけません。もちろん、<>の文字も半角文字で記述しなければいけません。
・<>内に記述する文字は、大文字でも小文字でも構いません。

● 2.1 改行を指定する <BR>
なお、2.1節で解説した<BR>は少し特殊なタグとなります。一般的なタグの場合、以下のよHTMLファイルに記述した文章を改行して表示させるには、その位置に<BR>という文字を記

うなルールも追加されます。

述しなければいけません。たとえば、ステップ01で用いた例の場合、以下のように<BR>を追加します。これで、Webブラウザでも正しい位置で改行できます。

・

開始タグ と 終了タグ を対にして記述します。

ここでいう 開始タグ とは、たとえば <HTML>のようにタグの名前を <>で挟んだタグです。

▼sample2̲1.html

一方、 終了タグ

電気自動車とは？<BR>

は</HTML>のようにタグの名前の前に「/」（スラッシュ）を記述したタグとなります。そして、これらを対にし、<HTML>〜</HTML>という形式でタグを記述するのが基本<BR>
電気自動車は、エンジンではなくモーターで駆動する自動車です。その特徴は以下のとおりです。環境問題が注目される現在において、電気自動車は活躍が期待できる存在といえるでしょう。

です。つまり、先ほど解説した<BR>は、 終了タグ である</BR>が不要な少し特殊なタグとい
えます。

<BR>
<BR>
・排気ガスを全く出さない<BR>
・走行時の騒音が少ない<BR>・エネルギー効率が高い● 2.3 <HTML>、<HEAD>、<BODY>の記述
続いては、<HTML>〜</HTML>のように対で記述するタグの例として、HTML、HEAD、BODYの3つのタグを解説します。これら3つのタグは、HTMLファイルに必ず記述しなければいけな
いタグとなります。
2.1節では、<BR>だけを使用したHTMLを紹介しましたが、これは厳密には正しいHTMLではありません。というのも、HTMLでは<HTML>〜</HTML>の間に内容を記述するというルー
ルが定められているからです。
また、<HTML>〜</HTML>をHEADとBODYの2つの領域に分ける必要もあります。この領域分けに使用するのが、<HEAD>〜</HEAD>と<BODY>〜</BODY>のタグです。これらのルールをまとめると、HTMLは次ページのような構成になります。

図2-1 「sample2̲1.html」をWebブラウザで表示した場合

このように、HTMLでは<>で囲まれた文字により、Webブラウザでの表示形式を指定します。
また、<>で囲まれた文字のことをタグと呼びます。

12

Step 02 タグの基本と改行

13

日本語の文字コードを指定する際は、以下のようにMETAタグを記述します。日本語の文字コ<HTML>

ードは「シフトJIS」「JIS」「日本語EUC」「UTF-8」などの種類があり、これらを正しく指定<HEAD>

しないと日本語が文字化けして表示される場合があります。

：（ここにホームページ全体の設定を記述する）

HEADの領域<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">：</HEAD>上に示した<META 〜>の記述は「シフトJIS」の文字コードを指定した場合です。他の文字コードを指定する場合は、「Shift_JIS」の部分を以下の表のように書き換えてください。なお、<BODY>

Windowsの「メモ帳」でHTMLを記述した場合、文字コードは「シフトJIS」になるのが普通です。

：（ここにブラウザに表示する内容を記述する）

BODYの領域：</BODY>

よって、上のようにMETAタグを記述しておけば、文字化けが生じる恐れはありません。
■文字コードの指定
文字コード</HTML><HEAD> 〜 </HEAD> の領域は、ホームページ全体の設定などを記述する領域です。一方、<BODY> 〜 </BODY> の領域は、Webブラウザに表示する内容を記述する領域です。つまり、2.1節で作成したHTMLファイルは、 <BODY> 〜 </BODY> の領域内だけを記述した不完全な
HTMLファイルといえます。

METAタグ内の記述

シフトJIS

Shift_JISJIS

iso-2022-jp

日本語EUCEUC-JP

UTF-8

UTF-8

また、METAタグは、検索エンジン用のキーワードを指定する際にも活用できます。キーワー
ドを指定する際は、以下のようにMETAタグを記述し、「content="〜"」の部分にキーワードを（カンマ）でキーワードを区切って列記します。複数のキーワードを指定する場合は、半角の「,」
記述してください。

● 2.4 <HEAD>〜</HEAD>に記述する内容<META name="keywords" content="電気自動車,モーター,環境問題">

先ほど、<HEAD>〜</HEAD>にはホームページ全体に関連する設定などを記述する、と解説しました。続いては、<HEAD>〜</HEAD>に記述する代表的なタグを解説していきます。
まずは<TITLE>〜</TITLE>のタグですが、ここにはホームページのタイトルを記述します。

● 2.5 正しいHTMLファイルの例<TITLE>〜</TITLE>の間に記述した文字は、Webブラウザのウィンドウ上部に表示されます。
これまでに解説してきた話をまとめると、前述のHTMLは以下のように記述するのが正しい<TITLE>電気自動車の利点と欠点</TITLE>

HTMLといえます。特に、<HTML>〜</HTML>、<HEAD>〜</HEAD>、<BODY>〜</BODY>の
3つは、あらゆるHTMLファイルの基本となりますので、よく理解しておきましょう。

<TITLE>〜</TITLE>に記述した文字▼sample2̲2.html<HTML>

図2-2 Webブラウザのウィンドウ上部に、ホームページのタイトルが表示されます。

そのほか、<HEAD>〜</HEAD>の領域にはMETAタグを記述するのが一般的です。METAタグ
は、日本語の文字コードを指定したり、ホームページのキーワードを指定したりするタグです。

<HEAD><TITLE>電気自動車の利点と欠点</TITLE><META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><META name="keywords" content="電気自動車,モーター,環境問題"></HEAD>（次ページへ続く）

このMETAタグも 終了タグ </META>を記述しなくてもよい少し特殊なタグとなります。

14

Step 02 タグの基本と改行

15

Step
<BODY>
電気自動車とは？<BR><BR>
電気自動車は、エンジンではなくモーターで駆動する自動車です。その特徴は以下のとおりです。環境問題が注目される現在において、電気自動車は活躍が期待できる存在といえるでしょう。

03

<BR>
<BR>

見出しと段落実際にホームページを作成する際は、文章を改行するだけでなく、できるだけ読みやすい文章に仕上げていく必要があります。そこで、ステッ
プ03では、見出しや段落を指定するタグを学習します。また、ヘアラインと呼ばれる区切り線を表示させるタグについても学習します。

・排気ガスを全く出さない<BR>
・走行時の騒音が少ない<BR>・エネルギー効率が高い● 3.1 見出しの指定 <H1>、<H2>、…、<H6></BODY></HTML>

HTMLに記述した文章は、通常、全ての文字が同じ文字サイズで表示されます。ただし、この状態は見出しと本文を区別しづらいため、あまり読みやすい文章とはいえません。そこで、見出しとする文字は<H?>〜</H?>のタグで挟んで記述します。

ワンポイントのHTML4.01はCSSの習得が必須であるなど、初めてHTMLを学ぶ人には少し敷居が高いと思<H?>〜</H?>は、その文字が見出しであることを指定するタグで、「?」の部分には1〜6の数
字を記述します。この数字は見出しのレベルを表しており、<H1>〜</H1>が最もレベルの高い
見出し、<H6>〜</H6>が最もレベルの低い見出しとなります。もちろん、レベルに応じて見出しの文字サイズも変化します。なお、<H?>〜</H?>には改行も含まれるため、</H?>の位置では<BR>を記述しなくても改行が行われます。
以下に、<H1>〜</H1>および<H2>〜</H2>のタグを使用した例を示しておくので参考としわれます。よって、本書では<!DOCTYPE 〜>の記述を省略した汎用的なHTMLについて解説してください。

<!DOCTYPE>の記述
厳密なHTMLでは、<HTML>の前に<!DOCTYPE 〜>を記述する必要があります。<!DOCTYPE〜>はHTMLのバージョンを指定するタグですが、これを正しく記述するには、各バージョンのHTMLについて使用可能なタグなどを理解しておかなければいけません。特に、最新バージョン

ます。
もし、<!DOCTYPE 〜>を記述する場合は、旧バージョンのHTML仕様も包括した「HTML4.01 Transitional」または「HTML4.01 Frameset」を指定しておくとよいでしょう。この場▼sample3̲1.html<HTML>

合の<!DOCTYPE 〜>の記述は以下のようになります。
●「HTML4.01 Transitional」を指定する場合<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">※この指定では、インラインフレーム以外のフレームを使用できません。

<HEAD><TITLE>漢字検定の紹介</TITLE><META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><META name="keywords" content="漢字,日本漢字能力検定,漢検"></HEAD>
レベル1の見出し●「HTML4.01 Frameset」を指定する場合<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><BODY><H1>漢字検定の紹介</H1><H2>漢字検定とは？</H2>

レベル2の見出し「漢検」の正式名称は「日本漢字能力検定」といい、平成4年6月4日に文部省（※1）認定の技能検定となりました。その後、年を追うごとに志願者数が増加し、平成16年度には年間200万人以
上もの志願者数を誇る技能検定へと発展しました。<BR>

演 習（1）ステップ01の演習（1）と同じHTMLファイルを作成し、<BR>を追加して図2-1のように表示させてみましょう。

（※1）平成13年1月6日文部科学省に統合<BR>「漢検」には、1級、準1級、2級、準2級、3〜8級の10段階の技能検定が用意されています。もちろん、1級が最も難しく、平成17年度第1回の合格率はわずか12.4％でした。<BR></BODY></HTML>（2）さらに、HTML、HEAD、BODYのタグを追加し、正しいHTMLファイルを作成してみましょう。
なお、HEADの領域では、タイトルに「電気自動車の利点と欠点」、文字コードに「シフトJIS」、
キーワードに「電気自動車」「モーター」「環境問題」を指定します。

16

Step 03 見出しと段落

17