はじめてのホームページ HTML入門
ホームページ作成の基本スキルであるHTMLタグの書き方から使い方までを例題を使ってやさしく解説したフルカラー入門書です。インターネットやホームページの仕組みやHTMLの基本から、文章を表示させる、見出しの表示、文字の大きさを変える、箇条書きの方法、表組み（テーブル）の作り方、画像の表示、音楽や映像ファイルの再生、リンクなどのHTMLの基本的なタグ、さらにホームページの見栄えを整えるスタイルシートの書き方までをやさしく解説。最新のXHTMLに準拠した正しいHTMLの使い方、タグで描いたHTMLをCSSを使ったスタイル設定に書き換える方法がわかります。サンプルコードのダウンロードサービス付き。
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2166.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2166.html
CHAPTER1 HTMLでホームページを作ろう
1 インターネットを理解する
インターネットとは
ブラウザでホームページが見られるようになるまで
2 ホームページの仕組み
ホームページとは
ホームページの仕組み
3 ホームページで表示できるもの
文字情報
画像情報
映像＆音楽情報
4 ホームページ作成に必要なもの
必須な機材・ソフト・環境
用意しておくと便利な機材とソフト
5 ホームページの内容を考えよう
内容を決める
必要な素材を集める
6 ホームページ作成の事前準備
htmlファイルを確認してみる
ファイルの拡張子を見えるようにする
拡張子を確認してみる
7 HTMLの基本を理解する
タグの使い方
すべての内容がタグで囲まれている
8 htmlファイルを作ってみよう
「メモ帳」を起動する
htmlファイルを保存する
9 htmlファイルをブラウザで開くには
「Internet Explorer」を起動する
CHAPTERR2 文章を表示する
10 文字を表示させるには
htmlファイルを作ってブラウザで表示する
11 ページに見出しを表示させるには
メモ帳でファイルを開いてみる
見出し用のタグを入力する
12 文字を大きく表示させるには
<b>タグで文字を太く表示させる
<strong>タグで文字を太く表示させる
13 文字の色を変更するには
<font>タグを使って文字の色を指定する
RGB値で文字の色を指定する
ページ全体の文字色を変更する
14 文字を斜体で表示させるには
<i>タグで文字を斜体にする
<em>タグで文字を斜体にする
15 文字に下線を引くには
<u>タグで文字に下線を引く
<ins>タグで文字に下線を引く
16 文字の大きさを変えたいときは
<big>タグで文字を大きくする
<small>タグで文字を小さくする
17 特殊な文字を表示させるには
「<」と「>」を文字コードで指定する
他の特殊記号を表示させてみる
18 上付き・下付きを指定するには
<sup>タグで上付き文字を表示させる
<sub>タグで下付き文字を表示させる
19 チップ表示の文字を表示させるには
<acronym>タグで略語の正式名称を表示させる
<abbr>タグで略語の正式名称を表示させる
20 ページに表示されないコメントを入力するには
コメント文を記述してブラウザで確認する
21 ブラウザのウィザードバーに文字を表示させるには
ブラウザでウィンドウバーの表示内容を確認する
ウィンドウバーに表示される文字を指定する
CHAPTER3 ページをレイアウトするには
22 文章の揃えを変えるには
<h1>タグの文字を「中央揃え」に変更する
<p>タグの文字を「右揃え」に変更する
23 文章に段落や改行を設定するには
文章を<br>タグで改行させる
「park_main.html」内の文章を<br＞タグで改行させる
24 文字に取り消し線を引くには
<s>タグと<strike>タグで取り消し線を指定する
<del>タグで取り消し線を指定する
25 ページ内に横罫線を引くには
コンテンツの区切り部分に横罫線を引く
横罫線の「幅」「揃え」「高さ」「色」を指定する
26 テキストをそのまま表示させるには
<pre>タグを使わないで文章をそのまま表示させる
<pre>タグで文章をそのまま表示させる
CHAPTER4 箇条書きリストや連番付きリストを作るには
27 箇条書き（リスト）を作るための基本
<ul>タグと<il>タグを組み合わせて使う
28 階層のある箇条書き（リスト）を作るには
階層構造の箇条書き（リスト）を作る
29 連番付きリストを作るには
連番付きリストを作る
30 連番付きリストでラベルの種類を変えるには
ラベルを小文字のアルファベットに変更する
ラベルを大文字のローマ数字に変更する
31 ラベルの先頭番号を変更するには
ラベルの先頭番号を指定する
32 箇条書き（リスト）のラベルを変えるには
ラベルを「●」から「■」に変更する
階層の違うラベルを「●」に指定する
33 箇条書き（リスト）のラベルを個別に変えるには
同じ階層内のラベルを変更する
CHAPTER5 表組みを作るには
34 ホームページの表組みとは
HTMLの表組みでできること
HTMLでの表組み名称
表組みと記述するタグの関係
35 表組みを作るには
表組みを作る
36 表組みの見出しを設計するには
見出し行を作る
37 表組みのサイズを変えるには
表組みのサイズをピクセルで指定する
表組みのサイズをパーセントで指定する
38 表組みにタイトルを表示するには
表組みにタイトルを表示させる
表組みの右端上にタイトルを表示する
39 セル内の揃えを変えるには
各セルを中央揃えに指定する
特定のセルだけを右揃えにする
40 セルを横方向に結合するには
見出しセルを結合する
41 セルを縦方向に結合するには
2つのセルを縦方向に結合する
3つのセルを縦方向に結合する
42 セル内の縦方向の位置や余白を変えるには
セル内の文字を上端揃えで表示する
セルの余白を調整する
CHAPTER6 画像や音楽、映像を表示・再生するには
43 画像を表示させるには
写真画像を表示させる
44 画像の表示サイズを変えるには
表示する画像の大きさを指定する
表示する画像の大きさをパーセントで指定する
45 ホームページに使える音声・音楽ファイル
インターネット上で扱える音声・音楽ファイル
音質と容量の目安
音楽ファイルを編集するソフト
音楽ファイルをインターネットで検索する
46 音声・音楽ファイルを再生させるには
音声・音楽ファイルを再生させる
47 音声・音楽ファイルをコントロールするには
操作パネルを消してループ再生させる
捜査パネルを表示して自動再生を切る
48 映像ファイルを再生させるには
映像ファイルを再生させる
CHAPTER7 リンクを使うには
49 リンクの仕組みを理解する
リンクの使い方を具体例で確認する
リンクの種類を知っておく
50 同じページ内へリンクさせるには
同じホームページ内でリンクさせる
51 他のホームページへリンクさせるには
他のホームページにリンクする
ブラウザで確認する
52 メールへのリンクを設定するには
ホームページ上にメールへのリンク設定を行う
ブラウザで確認する
53 ファイルへリンクさせるには
他のhtmlファイルをリンクさせる
ブラウザで確認する
54 画像をリンクさせるには
画像へのリンク設定を行う
ブラウザで確認する
CHAPTER8 スタイルシート編
55 スタイルシートとは
スタイルシートの使用例
スタイルシートの記述例
スタイルシートは別ファイルに分割可能
56 cssファイルを読み込ませるには
スタイルシートを別ファイルでまとめる
57 スタイルシートの使い方を理解する
スタイルシートを適用させる前の準備
タグへスタイルシートを指定する
ブラウザで確認する
58 htmlファイルを見直す
htmlファイルの内容を見直してい
59 ボックス構造を理解する
表示される内容のサイズ
余白とボーダーの関係
ボックス全体の幅
ボックス構造をサンプルでチェックする
60 文字の色を変えるには
スタイルシートで文字の色を変更する
61 文字のサイズを変えるには
スタイルシートで文字のサイズを変更する
特定の部分だけにスタイルシートを適用させる
62 文章の揃えを変えるには
スタイルシートで文字の揃えを変更する
特定のタグにid名をつる
63 文字を太く表示するには
指定した部分の文字だけを太くする
64 文字を斜体で表示するには
指定した文字だけを「oblique」の指定で斜体表示する
指定した文字だけを「italic」の指定で斜体表示する
65 文字に下線・上線を加えるには
特定の文字に上線を加える
特定の文字に下線を加える
66 段落や文字の周囲に余白を設けるには1
段落の下側にパディングを指定する
段落の周囲にパディングを指定する
67 段落や文字の周囲に余白を設けるには2
段落にマージンを指定する
同じid名のスタイルシートを別の場所に適用させる
68 段落や文字の周囲に罫線を引くには
段落に罫線を引く
見出しの周囲に2本線を引く
69 罫線の太さや色を変更するには
罫線の太さを指定する
罫線の色を指定する
70 段落や文字の背景に色を指定するには
段落の背景色を指定する
文字の背景色を指定する
71 文章の行間を調整するには
段落の行間を空ける
特定の部分で行間を指定する
72 文章の字間を調整するには
特定段落の字間を指定する
見出し文字の字間を詰める
73 文章や段落の背景に画像を表示するには
段落や背景に画像を表示させる
段落の背景に異なる画像を表示させる
74 ページの背景に画像や色を設定するには
ページ全体の背景に画像を表示させる
ページ全体の背景に色を表示させる
75 背景画像の表示方法を調整するには
背景の画像を1つだけ表示する
背景の画像を横方向にだけ表示する
ページ全体の背景に画像を縦方向にだけ表示する
76 背景画像の表示位置を調整するには
背景画像を右端に表示する
背景画像を右端に1つだけ表示する
77 画像がスクロールしないようにするには
ページ全体の背景画像を固定する
段落の背景画像を固定する
78 文章の1文字目だけに空白を加えるには
1文字目だけ空白を加える
1文字目だけ左側へ食い込ませる
79 文章の1文字目だけ大きく表示するには
1文字目だけ大きく表示する
1文字目の文字に装飾を加える
80 連番付きリストでラベルの種類を指定するには
ラベルを大文字のアルファベットに変更する
ラベルを大文字のローマ数字に変更する
81 箇条書き（リスト）のラベルを指定するには
箇条書き（リスト）のラベルを「●」に変更する
特定のラベルだけ「○」に変更する
82 連番付きリストのラベルに画像を使うには
連番付きのリストのラベル画像を指定する
83 リストの背景に画像を指定するには
箇条書き（リスト）の項目に背景画像を指定する
84 画像の横に表示させた文字の位置を調整するには
日記用のHTMLファイルを作成する
画像横に配置した文字の位置を指定する
85 ボックス内の幅や高さを指定するには
ボックス内の幅を指定する
ボックス内の幅と高さを指定する
86 画像の周囲に余白を加える
画像の余白を指定する
画像の上下だけに余白を加える
87 画像の周囲に罫線を加えるには
画像に罫線を加える
罫線の内容を変更する
88 表組みの幅や高さを変えるには
表組み全体の幅と高さを指定する
<tr>タグの高さを指定する
89 表組みのセル同士で間隔を指定するには
セル同士の間隔を消す
セル同士の間隔を数値で調整する
90 リンクされている文字の色を変えるには
リンクされている文字の色を指定する
1 インターネットを理解する
インターネットとは
ブラウザでホームページが見られるようになるまで
2 ホームページの仕組み
ホームページとは
ホームページの仕組み
3 ホームページで表示できるもの
文字情報
画像情報
映像＆音楽情報
4 ホームページ作成に必要なもの
必須な機材・ソフト・環境
用意しておくと便利な機材とソフト
5 ホームページの内容を考えよう
内容を決める
必要な素材を集める
6 ホームページ作成の事前準備
htmlファイルを確認してみる
ファイルの拡張子を見えるようにする
拡張子を確認してみる
7 HTMLの基本を理解する
タグの使い方
すべての内容がタグで囲まれている
8 htmlファイルを作ってみよう
「メモ帳」を起動する
htmlファイルを保存する
9 htmlファイルをブラウザで開くには
「Internet Explorer」を起動する
CHAPTERR2 文章を表示する
10 文字を表示させるには
htmlファイルを作ってブラウザで表示する
11 ページに見出しを表示させるには
メモ帳でファイルを開いてみる
見出し用のタグを入力する
12 文字を大きく表示させるには
<b>タグで文字を太く表示させる
<strong>タグで文字を太く表示させる
13 文字の色を変更するには
<font>タグを使って文字の色を指定する
RGB値で文字の色を指定する
ページ全体の文字色を変更する
14 文字を斜体で表示させるには
<i>タグで文字を斜体にする
<em>タグで文字を斜体にする
15 文字に下線を引くには
<u>タグで文字に下線を引く
<ins>タグで文字に下線を引く
16 文字の大きさを変えたいときは
<big>タグで文字を大きくする
<small>タグで文字を小さくする
17 特殊な文字を表示させるには
「<」と「>」を文字コードで指定する
他の特殊記号を表示させてみる
18 上付き・下付きを指定するには
<sup>タグで上付き文字を表示させる
<sub>タグで下付き文字を表示させる
19 チップ表示の文字を表示させるには
<acronym>タグで略語の正式名称を表示させる
<abbr>タグで略語の正式名称を表示させる
20 ページに表示されないコメントを入力するには
コメント文を記述してブラウザで確認する
21 ブラウザのウィザードバーに文字を表示させるには
ブラウザでウィンドウバーの表示内容を確認する
ウィンドウバーに表示される文字を指定する
CHAPTER3 ページをレイアウトするには
22 文章の揃えを変えるには
<h1>タグの文字を「中央揃え」に変更する
<p>タグの文字を「右揃え」に変更する
23 文章に段落や改行を設定するには
文章を<br>タグで改行させる
「park_main.html」内の文章を<br＞タグで改行させる
24 文字に取り消し線を引くには
<s>タグと<strike>タグで取り消し線を指定する
<del>タグで取り消し線を指定する
25 ページ内に横罫線を引くには
コンテンツの区切り部分に横罫線を引く
横罫線の「幅」「揃え」「高さ」「色」を指定する
26 テキストをそのまま表示させるには
<pre>タグを使わないで文章をそのまま表示させる
<pre>タグで文章をそのまま表示させる
CHAPTER4 箇条書きリストや連番付きリストを作るには
27 箇条書き（リスト）を作るための基本
<ul>タグと<il>タグを組み合わせて使う
28 階層のある箇条書き（リスト）を作るには
階層構造の箇条書き（リスト）を作る
29 連番付きリストを作るには
連番付きリストを作る
30 連番付きリストでラベルの種類を変えるには
ラベルを小文字のアルファベットに変更する
ラベルを大文字のローマ数字に変更する
31 ラベルの先頭番号を変更するには
ラベルの先頭番号を指定する
32 箇条書き（リスト）のラベルを変えるには
ラベルを「●」から「■」に変更する
階層の違うラベルを「●」に指定する
33 箇条書き（リスト）のラベルを個別に変えるには
同じ階層内のラベルを変更する
CHAPTER5 表組みを作るには
34 ホームページの表組みとは
HTMLの表組みでできること
HTMLでの表組み名称
表組みと記述するタグの関係
35 表組みを作るには
表組みを作る
36 表組みの見出しを設計するには
見出し行を作る
37 表組みのサイズを変えるには
表組みのサイズをピクセルで指定する
表組みのサイズをパーセントで指定する
38 表組みにタイトルを表示するには
表組みにタイトルを表示させる
表組みの右端上にタイトルを表示する
39 セル内の揃えを変えるには
各セルを中央揃えに指定する
特定のセルだけを右揃えにする
40 セルを横方向に結合するには
見出しセルを結合する
41 セルを縦方向に結合するには
2つのセルを縦方向に結合する
3つのセルを縦方向に結合する
42 セル内の縦方向の位置や余白を変えるには
セル内の文字を上端揃えで表示する
セルの余白を調整する
CHAPTER6 画像や音楽、映像を表示・再生するには
43 画像を表示させるには
写真画像を表示させる
44 画像の表示サイズを変えるには
表示する画像の大きさを指定する
表示する画像の大きさをパーセントで指定する
45 ホームページに使える音声・音楽ファイル
インターネット上で扱える音声・音楽ファイル
音質と容量の目安
音楽ファイルを編集するソフト
音楽ファイルをインターネットで検索する
46 音声・音楽ファイルを再生させるには
音声・音楽ファイルを再生させる
47 音声・音楽ファイルをコントロールするには
操作パネルを消してループ再生させる
捜査パネルを表示して自動再生を切る
48 映像ファイルを再生させるには
映像ファイルを再生させる
CHAPTER7 リンクを使うには
49 リンクの仕組みを理解する
リンクの使い方を具体例で確認する
リンクの種類を知っておく
50 同じページ内へリンクさせるには
同じホームページ内でリンクさせる
51 他のホームページへリンクさせるには
他のホームページにリンクする
ブラウザで確認する
52 メールへのリンクを設定するには
ホームページ上にメールへのリンク設定を行う
ブラウザで確認する
53 ファイルへリンクさせるには
他のhtmlファイルをリンクさせる
ブラウザで確認する
54 画像をリンクさせるには
画像へのリンク設定を行う
ブラウザで確認する
CHAPTER8 スタイルシート編
55 スタイルシートとは
スタイルシートの使用例
スタイルシートの記述例
スタイルシートは別ファイルに分割可能
56 cssファイルを読み込ませるには
スタイルシートを別ファイルでまとめる
57 スタイルシートの使い方を理解する
スタイルシートを適用させる前の準備
タグへスタイルシートを指定する
ブラウザで確認する
58 htmlファイルを見直す
htmlファイルの内容を見直してい
59 ボックス構造を理解する
表示される内容のサイズ
余白とボーダーの関係
ボックス全体の幅
ボックス構造をサンプルでチェックする
60 文字の色を変えるには
スタイルシートで文字の色を変更する
61 文字のサイズを変えるには
スタイルシートで文字のサイズを変更する
特定の部分だけにスタイルシートを適用させる
62 文章の揃えを変えるには
スタイルシートで文字の揃えを変更する
特定のタグにid名をつる
63 文字を太く表示するには
指定した部分の文字だけを太くする
64 文字を斜体で表示するには
指定した文字だけを「oblique」の指定で斜体表示する
指定した文字だけを「italic」の指定で斜体表示する
65 文字に下線・上線を加えるには
特定の文字に上線を加える
特定の文字に下線を加える
66 段落や文字の周囲に余白を設けるには1
段落の下側にパディングを指定する
段落の周囲にパディングを指定する
67 段落や文字の周囲に余白を設けるには2
段落にマージンを指定する
同じid名のスタイルシートを別の場所に適用させる
68 段落や文字の周囲に罫線を引くには
段落に罫線を引く
見出しの周囲に2本線を引く
69 罫線の太さや色を変更するには
罫線の太さを指定する
罫線の色を指定する
70 段落や文字の背景に色を指定するには
段落の背景色を指定する
文字の背景色を指定する
71 文章の行間を調整するには
段落の行間を空ける
特定の部分で行間を指定する
72 文章の字間を調整するには
特定段落の字間を指定する
見出し文字の字間を詰める
73 文章や段落の背景に画像を表示するには
段落や背景に画像を表示させる
段落の背景に異なる画像を表示させる
74 ページの背景に画像や色を設定するには
ページ全体の背景に画像を表示させる
ページ全体の背景に色を表示させる
75 背景画像の表示方法を調整するには
背景の画像を1つだけ表示する
背景の画像を横方向にだけ表示する
ページ全体の背景に画像を縦方向にだけ表示する
76 背景画像の表示位置を調整するには
背景画像を右端に表示する
背景画像を右端に1つだけ表示する
77 画像がスクロールしないようにするには
ページ全体の背景画像を固定する
段落の背景画像を固定する
78 文章の1文字目だけに空白を加えるには
1文字目だけ空白を加える
1文字目だけ左側へ食い込ませる
79 文章の1文字目だけ大きく表示するには
1文字目だけ大きく表示する
1文字目の文字に装飾を加える
80 連番付きリストでラベルの種類を指定するには
ラベルを大文字のアルファベットに変更する
ラベルを大文字のローマ数字に変更する
81 箇条書き（リスト）のラベルを指定するには
箇条書き（リスト）のラベルを「●」に変更する
特定のラベルだけ「○」に変更する
82 連番付きリストのラベルに画像を使うには
連番付きのリストのラベル画像を指定する
83 リストの背景に画像を指定するには
箇条書き（リスト）の項目に背景画像を指定する
84 画像の横に表示させた文字の位置を調整するには
日記用のHTMLファイルを作成する
画像横に配置した文字の位置を指定する
85 ボックス内の幅や高さを指定するには
ボックス内の幅を指定する
ボックス内の幅と高さを指定する
86 画像の周囲に余白を加える
画像の余白を指定する
画像の上下だけに余白を加える
87 画像の周囲に罫線を加えるには
画像に罫線を加える
罫線の内容を変更する
88 表組みの幅や高さを変えるには
表組み全体の幅と高さを指定する
<tr>タグの高さを指定する
89 表組みのセル同士で間隔を指定するには
セル同士の間隔を消す
セル同士の間隔を数値で調整する
90 リンクされている文字の色を変えるには
リンクされている文字の色を指定する
