も く じStep 01
01-1
01-201-3

Step 02

かい ぎょうにゅうりょくほ ぞんHTML の入力と保存.................................................................................8
かいぎょう そうにゅう

改行の挿 入 ................................................................................................9
し てい

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

みだだん らく

見出しと段落....................................................... 10
み だだんらくし てい

み だだんらくつい か02-1

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

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

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

Step 03
03-103-2

Step 04

びょう がもじ

そう しょく文字の装 飾 .......................................................... 13
ふと じ

しゃたい

うえ つもきょうちょう

し てい

太字、斜体、マーカー強調の指定................................................. 13
じし てい

上付き文字の指定. ................................................................................ 15が ぞう

けい さい

画像の掲載........................................................... 16が ぞう

はい ち04-1

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

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

き ほんHTML の基本と改 行 ...............................................8

し てい

ふくすうが ぞう

はい ち

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

もくじ

さく せい

Step 05

リンクの作成....................................................... 20
べつ05-1

別サイトへのリンク............................................................................. 20

べつ05-2別のページへのリンク......................................................................... 22

もと05-3い じ

さきひら元のページを維持したままリンク先を開く............................... 25
ない05-4

さくせい

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

Step 06

き ほん

CSS の基本............................................................ 27
ぞくせい

つかし てい06-1

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

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

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

よう そじ しょ しき

文字書式の CSS.................................................... 32
も じ いろふと じか せん

し てい

文字サイズ、文字色、フォント、太字、下線の指定. ........... 32
ぎょうかん ぎょうそろ

Step 08

08-2

もし てい

も じ

07-1

08-1

し てい

たい

Step 07

07-2

たい

し てい

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

はい けい背景の CSS............................................................ 37
はいけいしょくし てい

背景色の指定. ......................................................................................... 37

はいけい が ぞう

し てい

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

﻿3

わく せん

Step 09
09-1

わくせん

し てい

枠線の指定............................................................................................... 42ない ぶ

よ はく

し てい

09-2

内部余白の指定...................................................................................... 44

09-3

サイズの指定. ......................................................................................... 45

09-4

し てい

がい ぶ

10-1
10-2
10-3

よ はく

し てい

かど まる

かげ

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

Step 10

はん とう めい角丸、影、半透明の CSS...................................... 49
かどまる

し てい

角丸の指定............................................................................................... 49かげ

し てい影の指定.................................................................................................... 50
はんとうめいし てい

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

よう そStep 11よう そ

div 要素と span 要素............................................ 52
よう そつかか11-1

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

11-2

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

よう そまわStep 12
12-1
12-2

4

よ はく

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

つかも じ しょしき

し てい

こ

回り込みの CSS.................................................... 57
まわこし てい

回り込みの指定...................................................................................... 57てきようよう そげんてい

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

リンクの CSS........................................................ 62
しょしき し てい

13-1

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

13-2

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

ぎ じStep 14

つかしょしき し てい

フレックスボックスの CSS.................................. 64
し てい

14-1

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

14-2

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

はい ちひょうStep 1515-1

ひょう

わくせん

しょしき し てい

枠線の書式指定...................................................................................... 68
しょしき し てい

15-3

セルの書式指定...................................................................................... 69
ぎょう

か行のグループ化...................................................................................... 70
けつごう

15-515-6

さくせい表の作成.................................................................................................... 67

15-215-4

さく せい表の作成............................................................... 67

セルの結合............................................................................................... 72
ひょう ちゅうおうそろ

Step 16表の中央揃え........................................................................................... 72

さく せい

リストの作成....................................................... 73
さくせい

16-1

リストの作成. ......................................................................................... 73

16-2

マーカーの指定...................................................................................... 74

16-3

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

し てい

しょしき し てい

﻿5さく せいStep 17

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

ちゅうおう

はい ち

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

17-2

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

17-3

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

17-4

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

17-5

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

17-6

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

17-7

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

よ はくさくせい

さくせい

しょしきさくせい

ほ ぞん

かつ よう

Step 18

CSS ファイルの活用............................................. 89
さくせい

よこ18-1CSS ファイルの作成と読み込み....................................................... 89

18-2

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

ふくすう

19-1
19-2

Step 20

かつよう

さく せい

Step 196

こ てい

17-1

インラインフレームの作成................................. 91
べつひょう じ別の Web ページの表示....................................................................... 91
うこGoogle マップの埋め込み.................................................................. 92

さく せい

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

20-1

テキストボックス.................................................................................. 93

20-2

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

20-3

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

もくじ

ほん しょ

けい さい

もん だい

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

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

﻿7

Step01
Step 01

きほ ん

か い ぎょうHTML の基本と改行HTML の基本と改行

01-1にゅうりょくほ ぞんHTML の入力と保存
ちょうき どういかにゅう りょく（ 1 ）テキストエディタ（ Windows の「 メモ帳 」など ）を起動し、以下の HTML を入力してみましょう。
12
345
6
78
910111213
1415
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