も く じStep 0101-1

HTML の入力と保存.................................................................................801-2

改行の挿入..................................................................................................901-3

ページタイトルの指定............................................................................9Step 02

見出しと段落....................................................... 1002-1

見出しと段落の指定............................................................................. 1002-2

見出しと段落の追加............................................................................. 1102-3

ヘアラインの描画.................................................................................. 12Step 03

文字の装飾........................................................... 1303-1

太字、斜体、マーカー強調の指定.................................................. 1303-2上付き文字の指定.................................................................................. 15Step 04

2HTML の基本と改行................................................8

画像の掲載........................................................... 1604-1

画像の配置............................................................................................... 1604-2

alt テキストの指定................................................................................. 1704-3

複数の画像の配置.................................................................................. 18

もくじ

Step 05

リンクの作成....................................................... 2005-1

別サイトへのリンク............................................................................. 2005-2別のページへのリンク......................................................................... 2205-3元のページを維持したままリンク先を開く............................... 2505-4

ページ内リンクの作成......................................................................... 26

Step 06

CSS の基本............................................................ 2706-1

style 属性を使った CSS の指定.......................................................... 2706-2

要素に対して CSS を指定.................................................................... 2806-3

クラスに対して CSS を指定................................................................ 30

Step 07

文字書式の CSS.................................................... 3207-1

文字サイズ、文字色、フォント、太字、下線の指定............. 3207-2

行間、行揃えの指定............................................................................. 35

Step 08

背景の CSS............................................................ 3708-1

背景色の指定........................................................................................... 3708-2

背景画像の指定...................................................................................... 39

﻿3

Step 0909-1

枠線の指定............................................................................................... 4209-2

内部余白の指定...................................................................................... 4409-3

サイズの指定........................................................................................... 4509-4

外部余白の指定...................................................................................... 46

Step 10角丸、影、半透明の CSS...................................... 49

10-1

角丸の指定............................................................................................... 49

10-2影の指定.................................................................................................... 50

10-3

半透明の指定........................................................................................... 51

Step 11

div 要素と span 要素............................................ 52

11-1

div 要素を使ったグループ化............................................................. 52

11-2

span 要素を使った文字書式の指定................................................ 55

Step 12

4

サイズ、枠線、余白の CSS.................................. 42

回り込みの CSS.................................................... 57

12-1

回り込みの指定...................................................................................... 57

12-2

CSS を適用する要素の限定................................................................ 60もくじStep 13

リンクの CSS........................................................ 62

13-1

リンクの書式指定.................................................................................. 62

13-2

疑似クラスを使ったリンクの書式指定........................................ 63

Step 14フレックスボックスの CSS.................................. 64

14-1

フレックスボックスの指定............................................................... 64

14-2

アイテムの配置...................................................................................... 65

Step 15表の作成............................................................... 67

15-1表の作成.................................................................................................... 6715-2枠線の書式指定...................................................................................... 6815-3セルの書式指定...................................................................................... 6915-4行のグループ化...................................................................................... 7015-5セルの結合............................................................................................... 7215-6表の中央揃え........................................................................................... 72

Step 16リストの作成....................................................... 7316-1リストの作成........................................................................................... 7316-2マーカーの指定...................................................................................... 74

16-3

リストの書式指定.................................................................................. 75

﻿5

Step 1717-1

ページ幅を固定してウィンドウ中央に配置............................... 77

17-2

余白のリセット...................................................................................... 79

17-3

ヘッダーの作成...................................................................................... 79

17-4

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

17-5

メインコンテンツの書式.................................................................... 84

17-6

フッターの作成...................................................................................... 85

17-7

ページレイアウトの保存.................................................................... 88

Step 18

CSS ファイルの活用............................................. 89

18-1

CSS ファイルの作成と読み込み....................................................... 89

18-2

CSS ファイルを複数の HTML ファイルで活用............................ 90

Step 19

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

19-1別の Web ページの表示....................................................................... 91

19-2

Google マップの埋め込み.................................................................. 92

Step 20

6

ページレイアウトの作成..................................... 77

フォームの作成.................................................... 93

20-1

テキストボックス.................................................................................. 9320-2

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

20-3

セレクトメニュー.................................................................................. 95

もくじ

本書に掲載している問題の「演習用ファイル」や「解答例のファイル」は、以下の URL からダウンロードできます。

◆ ファイルのダウンロード URL
https://------------------------------------

﻿7

Step01
Step 01

01-1

HTML の基本と改行HTML の基本と改行HTML の入力と保存（ 1 ）テキストエディタ（ Windows の「 メモ帳 」など ）を起動し、以下の HTML を入力してみましょう。
12
3
4
5
6
78
910
11121314
15
16<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"></head><body>
キャンプ サークル Monta
ほぼ毎週、キャンプを企画しているサークルです。
学内の方なら誰でも入会できます。
「勝手に現地集合」のソロキャンプも開催中！

</body></html>※行番号は入力しなくても構いません。

（ 2 ）演習（ 1 ）で入力した HTML を「 01-1-2camp.html 」という名前でファイルに保存してみましょう。
Hint：文字コードに「 UTF-8 」を指定し、拡張子「 .html 」で保存します。

※ HTML ファイルのアイコンは、規定に設定している Web ブラウザに応じて変化します。

8

（3）「 01-1-2camp.html 」をダブルクリックして、Web ブラウザで表示してみましょう。

Web ブラウザ
で表示

01-2

改行の挿入

（1）
「 01-1-2camp.html 」をテキストエディタで開き、<br> を記述して、以下のように改行してみましょう。

このように改行01-3

ページタイトルの指定（ 1 ）ページタイトルに「 キャンプ サークル Monta 」という文字を指定してみましょう。
ページタイトルを指定（ 2 ）演習（ 1 ）で作成した HTML を「 01-3-2camp.html 」という名前でファイルに保存してみましょう。
Step 01HTML の基本と改行

9

Step02
Step 02

02-1

見出しと段落見出しと段落見出しと段落の指定（ 1 ）ステップ 01 で保存した「 01-3-2camp.html 」を開き、「 キャンプ サークル Monta 」の文字をレベル 1 の見出し（ h1 要素 ）にしてみましょう。

h1 要素（ 2 ）以下の図に示した文字を <p> 〜 </p> で囲み、1 つの段落（ p 要素 ）にしてみましょう。

p 要素

10

02-2

見出しと段落の追加（ 1 ）ページに以下の文字を追加し、それぞれに h2 要素、p 要素を指定してみましょう。
サークル説明会
入会を希望する方に向けて、サークル説明会を下記の日程で開催します。
興味がある方は、ぜひご参加ください。
日付：5 月 10 日（ 火 ）時間：14 時〜 15 時
場所：中央キャンパス

2 号館 302 講義室

Hint：改行する部分に <br> を記述します。

h2 要素
p 要素

p 要素

Step 02

見出しと段落11

02-3

ヘアラインの描画（ 1 ）以下の図に示した位置にヘアラインを描画してみましょう。

ヘアライン

ヘアライン

Hint：ヘアラインを描画する位置に <hr> を記述します。

（ 2 ）演習（ 1 ）で作成した HTML を「 02-3-2camp.html 」という名前でファイルに保存してみましょう。

12