も く じStep 01 HTML ファイルと Web サーバー .............................................................. 8
1.1

HTML とは？

1.2

HTML ファイルの作成手順

1.3

HTML ファイルを Web ブラウザで表示する

1.4

HTML ファイルを再編集する

1.5

インターネットに公開するには？

Step 02 タグの基本と改行 ......................................................................................... 122.1

改行を指定する <br>

2.2

タグを記述するときのルール

2.3<html>、<head>、<body> の記述

2.4<head> 〜 </head> に記述する内容

2.5

DOCTYPE の記述

2.6

正しい HTML ファイルの例

Step 03 見出しと段落 ................................................................................................... 17
3.1

見出しの指定3.2

段落の指定<h1>、<h2>、……、<h6>

3.3

ヘアラインの描画<p><hr>

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

太字 <b>、斜体 <i>、マーカー強調 <mark>、取り消し線 <del>4.2

上付き文字 <sup>、下付き文字 <sub>

Step 05 画像の掲載 ........................................................................................................ 26

2

5.1

Web ページに利用できる画像

5.2

画像ファイルの拡張子の確認

5.3

画像の配置

5.4

alt テキストの指定

5.5

属性の記述ルール<img>Contents

Step 06 リンクの作成− 1 ........................................................................................... 31
6.1

リンクの作成6.2

画像リンクの作成<a>6.3

別サイトへのリンク

Step 07 リンクの作成− 2 ........................................................................................... 35
7.1元のページを維持したままリンク先を開く

7.2

パスの記述

7.3ページ内リンクの作成

Step 08 CSS の基本− 1 ................................................................................................. 40
8.1

CSS とは？

8.2

CSS を記述するときのルール

8.3

CSS の記述方法

8.4

指定方法①

style 属性で CSS を指定

Step 09 CSS の基本− 2 ................................................................................................. 45
9.1<head> 〜 </head> に CSS を記述する場合

9.2

指定方法②

要素に対して CSS を指定

9.3

指定方法③

クラスに対して CSS を指定

9.4

指定方法④

ID に対して CSS を指定

Step 10 文字書式の CSS − 1 ...................................................................................... 52
10.1

文字サイズの指定

10.2

文字色の指定10.3

文字の太さの指定

10.4斜体の指定

10.5

装飾線の指定10.6

フォントの指定font-sizecolor
font-weight

font-styletext-decoration
font-family

Step 11 文字書式の CSS − 2 ...................................................................................... 57
11.1

行間の指定

11.2

文字書式の一括指定

line-height

11.3

行揃えの指定fonttext-alignContents3

Step 12 CSS の色指定 .................................................................................................... 61
12.1光の 3 原色

12.2

16 進数とは？

12.3

16 進数と 10 進数の変換

12.4

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

12.5

文字色を「 RGB の 16 進数 」で指定

12.6

rgb( ) や rgba( ) を利用した色指定Step 13 背景の CSS ......................................................................................................... 65
13.1

背景色の指定13.2

背景画像の指定

background-color
background-image

13.3

背景画像の配置background-repeat、background-position

13.4

背景画像のサイズ調整

Step 14 サイズと枠線の CSS ..................................................................................... 70
14.1

サイズの指定

14.2

枠線の指定

width、height

14.3

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

border

Step 15 余白の CSS ......................................................................................................... 76
15.1

内部余白の指定15.2

上下左右の内部余白を個別に指定

padding15.3

外部余白の指定

15.4

ボックスの CSS のまとめ

marginStep 16 角丸、影、半透明の CSS ........................................................................... 83
16.1

角丸の指定

16.2影の指定

border-radius

16.3

半透明の指定box-shadow
opacity

Step 17 div 要素と span 要素 .................................................................................... 89

4

17.1

div 要素の使い方

17.2

span 要素の使い方

Contents

Step 18 回り込みの CSS ............................................................................................... 95
18.1

回り込みの指定

float

18.2

回り込みの解除

clear

18.3

回り込みを使った要素の配置

Step 19 フレックスボックスを使った配置 ................................................... 102
19.1

フレックスボックスの構成

19.2

アイテムの配置（ 水平方向 ）19.3

アイテムの配置（ 垂直方向 ）19.4

アイテムの折り返し

Step 20 リンクの CSS ................................................................................................. 108
20.1

リンクの書式指定20.2

訪問済みリンク、マウスオーバー時の書式指定

20.3

閲覧履歴の削除について

Step 21 CSS のまとめ ................................................................................................. 112
21.1

CSS の記述方法

21.2

CSS の優先順位

21.3

文字書式の CSS

21.4

背景の CSS

21.5

ボックスの CSS

21.6

角丸、影、半透明の CSS

21.7

回り込みの CSS

21.8

フレックスボックスの CSS

21.9

リンクの CSS

Step 22 表の作成 .......................................................................................................... 119
22.1

表作成の基本<table>、<tr>、<td>

22.2

見出しのセル<th>

22.3

表内に画像を配置

22.4

キャプションの配置<caption>Contents5

Step 23 表の CSS 指定 ................................................................................................. 124
23.1

セルの書式指定23.2

キャプションの配置

23.3

セルとセルの間隔

23.4

枠線の非表示について

caption-sideborder-collapse

Step 24 グループ化とセルの結合 ....................................................................... 130
24.1行のグループ化<thead>、<tbody>、<tfoot>24.2列のグループ化<colgroup>

24.3

セルを横に連結24.4

セルを縦に連結

Step 25 リストの作成と活用 ................................................................................. 136
25.1

リストの作成25.2

番号付きリストの作成<ul>、<li>25.3

リストの階層化

25.4

マーカー指定の CSS

25.5

リストを活用したリンク<ol>、<li>list-style-type

Step 26 ページレイアウトの作成− 1 ............................................................... 143
26.1

ページ幅を固定してウィンドウ中央に表示する

26.2

レイアウトに用いる要素

26.3

ヘッダーの作成<header>、<footer>、<nav>、<aside>

Step 27 ページレイアウトの作成− 2 ............................................................... 149

627.1

ナビゲーションメニューの作成

27.2

メインコンテンツの作成

27.3

フッターの作成

27.4

リンク先ページの作成

Contents

Step 28 CSS ファイルの活用 .................................................................................. 155
28.1

CSS ファイルとは？

28.2

CSS ファイルの作成手順

28.3

CSS ファイルの読み込み

28.4

CSS ファイルと <style> 〜 </style> の併用

Step 29 インラインフレームの作成 .................................................................. 160
29.1

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

29.2

インラインフレームに指定できる属性

29.3

インラインフレーム内に外部サイトを表示

29.4

リンク先をインラインフレーム内に表示

Step 30 フォームの作成 ........................................................................................... 166
30.1

フォームとは？

30.2

ラベルによる関連付け

30.3

テキストボックスとテキストエリア

30.4

チェックボックスとラジオボタン

30.5

セレクトメニュー

30.6

ボタン

30.7

フォーム領域の指定<label><input>、<textarea><input><select>、<option><input>、<button><form>

演習問題の解答 . ................................................................................................................................................... 177
索引 .............................................................................................................................................................................. 223◆ サンプルファイルと演習で使う画像のダウンロード URL

本書で紹介したサンプルファイル、ならびに演習で使用する画像は以下の URL からダウンロードできます。
http://-------------------------------------------

Contents7

Step01HTML ファイルと Web サーバー
Web ページ（ ホームページ ）は HTML と呼ばれる言語で作成します。HTML学習の第一歩となるステップ 01 では、HTML ファイルを作成する方法とWeb の基礎知識について学習します。

Step 01HTML ファイルと Web サーバー

1.1

HTML とは？

Web ページ（ ホームページ ）を作成するには、HTML と呼ばれるコンピュータ言語を学ぶ必要があります。コンピュータ言語と聞くと「 難しそうだな…… 」と思うかもしれませんが、一般的なプログラミング言語と比べて HTML はかなり習得しやすい言語です。このため、初心者でも問題なく学習を進められると思います。
HTML は HyperText Markup Language を略したもので、その中身は単なるテキストファイルでしかありません。テキストファイルとは「 文字だけで構成されるファイル 」のことです。このため、Windows に用意されている「 メモ帳 」など、文字を編集できるアプリケーション（ テキストエディタ ）があれば、誰でも HTML ファイルを作成できます。

図 1-1

HTML ファイルと Web ページ

1.2

HTML ファイルの作成手順

それでは、HTML ファイルの作成手順を解説していきましょう。HTML ファイルは「 メモ帳 」などのテキストエディタで作成します。もちろん、「 メモ帳 」以外のテキストエディタを使用しても構いません。ただし、ファイルの拡張子に注意しなければなりません。

8

通常、テキストエディタで保存したファイルは、拡張子が「 .txt 」のテキストファイルになります。HTML ファイルを作成するときは、この拡張子を「 .html 」に変更する必要があります。このため、ファイルを保存するときに「 ファイルの種類 」を指定しなければいけません。

図 1-2
スタートメニューを開き、「 アプリの一覧 」から「 Windows アクセサリ 」→「 メモ帳 」を選択します。

これを選択

図 1-3
「 メモ帳 」が起動したら、キーボードを使ってテキスト（ 文章 ）を入力します。
ウィンドウの右端で文字を折り返すときは、［ 書式 ］メニューから「 右端で折り返す 」を選択します。

図 1-4
ファイルを保存するときは、「 ファイルの種類 」に「 すべてのファイル 」を選択し、ファイル名の最後に「 .html 」の拡張子を付けます。また、「 文字コード 」は「 UTF-8 」「 .html 」の拡張子を付けるを指定するのが基本です。

「 すべてのファイル 」を選択

文字コードに「 UTF-8 」を選択

Step 01HTML ファイルと Web サーバー9

図 1-5
テキストが HTML ファイルとして保存されます。

1.3

HTML ファイルを Web ブラウザで表示する

続いては、作成した HTML ファイルを Web ブラウザで閲覧するときの操作手順を解説します。
この操作はとても簡単で、HTML ファイルのアイコンをダブルクリックするだけです。すると、
Web ブラウザ（ Google Chrome など ）が起動し、Web ページが表示されます。

ダブルクリック

図 1-6

HTML ファイル

図 1-7

Web ブラウザに表示される

この結果（ 図 1-7 ）を見ると、「 メモ帳 」に記述した文章（ 図 1-3 ）がそのまま Web ブラウザに表示されていることを確認できます。このように、HTML ファイルに記述した文章は、そのままホームページとして表示させることが可能です。ただし、改行は反映されません。ホームページに表示される文章を改行するには、<br> というタグを記述する必要があります。
このように「 タグの記述方法 」を学ぶことが HTML の習得につながります。これについては、本書のステップ 02 以降で詳しく解説していきます。

1.4

HTML ファイルを再編集する

すでに保存されている HTML ファイルを編集するときも、「 メモ帳 」などのテキストエディタを使用します。ただし、普通に HTML ファイルをダブルクリックすると、Web ブラウザが起動してしまいます。
再編集を行うときは、HTML ファイルのアイコンをテキストエディタのウィンドウ内へドラッグ＆ドロップします。すると、HTML ファイルの内容を編集できるようになります。

10「 メモ帳 」などのテキストエディタ

ドラッグ＆ドロップ

図 1-9

図 1-8

HTML ファイルの編集画面

ドラッグ＆ドロップでファイルを開く

1.5

インターネットに公開するには？

作成した Web ページをインターネットに公開するには、HTML ファイルを Web サーバーと呼ばれるコンピュータにコピーする必要があります。この作業をアップロードといいます。ただし、誰でもアップロードを実行できるわけではありません。アップロードを実行するには、Web サーバーを提供する業者（ ※ 1 ）と契約を交わし、自分専用の Web サーバーを確保しておく必要があります。
また、FTP クライアントと呼ばれるアプリケーションの使い方も習得しておかなければなりません。FTP クライアンは、「 インターネット上にあるコンピュータ 」（ Web サーバー ）と「 自分のパソコン 」の間でファイルのコピーを行うためのアプリケーションです。FTP クライアントの使い方や設定方法は、各自が契約した Web サーバーの利用手引などに記されているので、そちらを参照してください。
（ ※ 1 ）Web サーバーには、有料のものと無料のものがあります。

演 習（1）「 メモ帳 」などのテキストエディタに図 1-3 の文章を入力し、HTML ファイルとして保存してみましょう。
（ 2 ）演習（ 1 ）で保存した HTML ファイルを Web ブラウザで閲覧してみましょう。
（ 3 ）演習（ 1 ）で保存した HTML ファイルを「 メモ帳 」などのテキストエディタで開いてみましょう。
（ 4 ）文章の一部を変更してから「 上書き保存 」を実行し、変更内容が反映されているかを Web ブラウザで確認してみましょう。

Step 01HTML ファイルと Web サーバー

11

Step02

タグの基本と改行
ステップ 01 で解説したように、文章だけを記述した HTML ファイルを Web
ブラウザで閲覧すると、改行が無視されてしまいます。これを正しく改行するには <br> というタグを記述しなければなりません。ここでは「 タグの基本 」と「 改行 」について解説します。

Step 02

タグの基本と改行

2.1

改行を指定する<br>HTML ファイルに記述した文章を改行して表示するには、その位置に <br> という文字を記述しなければいけません。たとえば、P9 〜 10 で紹介した例の場合、以下のように <br> を追加すると、正しい位置で改行して表示できるようになります。
▼ sample02-1.html

123

スマートフォンとは？<br><br>
スマートフォンは、携帯電話にパソコンと同じような機能を追加したモバイル端末です。以下に、スマートフォンの主な特徴を紹介しておきます。<br>

456
7<br>
・Web、SNS、メールなどを利用できる<br>・アプリケーションを自由に追加できる<br>・タッチパネルで操作できる

図 2-1

sample02-1.html を Web ブラウザで閲覧した様子

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

12