はじめての無料でできる ホームページ作成HTML&CSS入門
本書は、はじめてホームページを作る人でも準備から公開までの手順が簡単にわかる入門書です。ジオシティーズ（ジオクリエイター）を使った無料ホームページサービスの利用方法から、基本的なHTMLの使い方、レイアウト方法、テーブルやリンクの設定、スタイルシートのいろいろな技、ホームページの公開方法までホームページ作成の手順を、図や写真を使ってわかりやすく解説しています。さらに、無料のアクセスカウンタ、掲示板、ブログ、画像素材、検索ツールの使い方といった応用編も充実しており、プロ並みのホームページが無料で作れます。実用的なQ&Aやカラーネーム、便利な無料サービスも紹介。サンプルのダウンロードサービス付き。
【サポートはこちら】→http://www.shuwasystem.co.jp/books/7980/1894-5/1894-5.html
【サポートはこちら】→http://www.shuwasystem.co.jp/books/7980/1894-5/1894-5.html
パソコンの基本操作を確認しよう
ダウンロードの手引き
CHAPTER 1 ホームページの基本
1 インターネットとホームページの概要
インターネットとは
ホームページとは
2 ホームページが表示されるしくみ
ホームページが表示される流れ
ホームページを公開するには
3 無料ホームページサービスとは
無料ホームページサービスを利用する
いろいろな無料ホームページサービス
4 ホームページの内容を考える
テーマを決めよう
ホームページで使いたい素材を用意しよう/HTMLファイルを作ろう
5 ＨＴＭＬファイルを作成するには
HTMLとは
タグとは
6 ホームページ作成の準備
本書で作成するホームページ
専用のフォルダを作成する
拡張子を表示させる
基本的なHTMLファイルを作成する
ファイルをHTMLファイルとして保存する
他のページのHTMLファイルを作成する
7 HTMLファイルをブラウザで開くには
[メニュー]バーを表示する
HTMLファイルを開く
CHAPTER 2 無料ホームページサービスを利用しよう
8 Yahoo! ジオシティーズを利用するには
Yahoo! ジオシティーズとは
Yahoo! Japan IDを取得する
9 Yahoo! ジオシティーズに登録してみよう
Yahoo! ジオシティーズのトップページを表示する
ホームページのURLを取得する
10 ホームページの基本的な設定を行うには
ホームページの作成方法を選択する
ジオクリエーターを起動する
11 ジオクリエイターでホームページを作成する
テンプレートを編集する
ホームページを保存する
ホームページをブラウザで確認する
12 ホームページを編集する
サブページを作成する
保存したホームページをジオクリエーターで開く
目次にサブページへのリンクを設定する
プレビューを利用してホームーページを確認する
13 ホームページ作成を楽しくするその他サービス
閲覧者とコミュニケーションが取れる機能
無料素材を提供しているサイト
Q&A
CHAPTER 3 簡単HTMLでテキストに変化をつけてみよう
14 文字を太くするには
テキストに太字のスタイルを設定する
変更をブラウザで確認する
15 文字の大きさを設定するには
文字のサイズを指定する
文字のサイズを変更する
16 文字の色を設定するには
カラーコード/カラーネーム
ページ全体のテキストの色を指定する
テキストの色をカラーコードで指定する
17 テキストに動きをつけるには
テキストに動きをつける
テキストの動き方を指定する
18 ページに表示されない文字を設定するには
HTMLにコメントを残す
CHAPTER 4 簡単HTMLでレイアウトに変化をつけてみよう
19 テキストに段落を設定するには
テキストに段落を設定する
テキストに複数の段落を設定する
20 テキストを改行する
タグを挿入して改行する
空白行を挿入する
21 文章の見出しを設定する
ページのタイトルを設定する
見出しのレベルを指定する
22 テキストを指定した位置に配置するには
テキストを中央に配置する
テキストを右揃えに配置する
23 ページに区切り線を挿入するには
区切り線を挿入する
区切り線の太さを指定する
区切り線を塗りつぶしにする
区切り線の色を変更する
24 区切り線の長さと位置を変更するには
区切り線の長さを設定する
区切り線の位置を指定する
Q&A
CHAPTER 5 簡単HTMLで箇条書きリストを作ろう
25 箇条書きリストを作成するには
テキストを箇条書きにする
ブラウザで確認する
26 階層のある箇条書きリストを作成するには
階層のある箇条書きを作成する
複数の項目に階層を付ける
27 連番のついた箇条書きを作成するには
番号付きの箇条書きを設定する
下層の項目を番号付き箇条書きにする
28 箇条書きラベルを変更するには
ラベルのスタイルを変更する
下層のラベルを変更する
29 箇条書きラベルを個別に変更するには
ラベルを個別に変更する
下層のラベルを個別に変更する
Q&A
CHAPTER 6 ホームページに写真を掲載してみよう
30 ホームページに掲載する画像データとは
ホームページに使用できる画像ファイルの形式
画像管理用のフォルダを作成する
31 ホームページに画像を表示させるには
画像へのリンクを設定する
ブラウザで確認する
32 画像に代替テキストを埋め込むには
画像の代替テキストを埋め込む
代替テキストをブラウザで確認する
33 画像の表示サイズを調整するには
画像サイズをブラウザに占める割合で指定する
画像サイズをピクセル数で指定する
34 画像に枠を設定するには
画像に枠を設定する
画像の枠を削除する
35 テキストを画像に回り込ませるには
画像を段落に設定する
画像の左側にテキストを回りこませる
画像の右側にテキストを回りこませる
画像とテキストの間隔を調整する
36 テキストの回りこみを解除するには
見出し要素のテキストを追加する
回り込みを解除する
37 ページ背景に画像や色をつけるには
ホームページの背景に画像を設定する
ホームページの背景色を指定する
Q&A
CHAPTER 7 表組（テーブル）をつくろう
38 表組（テーブル）の基本を覚えよう
表組の仕組みを理解する
表組の基本になるＨＴＭＬを記述する
39 行とセルを設定しよう
表組の行を設定する
表組にセルを設定する
40 表組に罫線を設定しよう
罫線を設定する
罫線の色を設定する
41 表組の大きさを設定する
表組の大きさをピクセル数で指定する
表組の大きさをブラウザの大きさに対する比率で指定する
42 列の幅と行の高さを調整するには
列の幅を指定する
行の高さを指定する
43 セル内のテキストの位置を設定するには
テキストをセルの右揃えに指定する
テキストをセルの左揃えに指定する
44 セルを連結するには
1行分の要素を追加する
セルを連結する
45 表組にテキストを回りこませるには
段落要素のテキストを追加する
テキストに回り込み設定をする
46 表組の背景に色を設定するには
表組の背景色を設定する
CHAPTER 8 リンクを設定しよう
47 リンクのしくみを理解しよう
リンクとは/リンクが設定できる対象
リンクの種類
48 ファイルにリンクを設定するには
リンク元とリンク先を確認する
リンクを設定する
他のページへのリンクを設定する
49 外部のページにリンクするには
リンク先に外部のホームページを指定する
リンクを確認する
50 未アクセスのリンクの色を設定する
未アクセスの表示に戻すには
未アクセスのリンクの色を設定する
51 アクセス済みのリンクの色を変更するには
アクセス済みのリンクの色を指定する
アクセス済みのリンク色を確認する
52 メールリンクを設定するには
メール送信のリンクを設定する
メール送信のリンクを確認する
Q&A
CHAPTER 9 フレームページをつくろう
53 フレームページとは
フレームページとは
フレームを定義するタグ
54 フレームページをつくるには
左右分割のフレームを設定する
「frame.html」をブラウザで開く
55 フレームの境界線を調整する
フレームの境界線に色をつける
フレームの境界線を非表示にする
56 フレーム内の配置を調整するには
左右の空きスペースを指定する
上下の空きスペースを指定する
57 リンク先を正しいフレームに表示させるには
リンク先の表示場所を確認する
表示するフレームを指定する流れ
フレームに名前を設定する
表示先のターゲットを設定する
58 フレーム表示を解除してリンク先を表示するには
ホームページの入り口へのリンクを設定する
フレームの解除を設定する
59 フレームファイルへのリンクを設定する
メモ用のコメントを削除する
リンク先に「frame.html」を指定する
Q&A
CHAPTER 10 スタイルシートでプロの技を使おう
60 スタイルシートとは
スタイルシートの概要/スタイルシートでできること
3種類の記述方法
61 スタイルシートを作成するには
スタイルシートの書き方/スタイルを指定する方法
スタイルシートを「head要素」に記述する
「frame.html」をブラウザで開く
62 スタイルシートで文字の色を設定するには
段落の文字の色を指定する
見出しの文字の色を変更する
63 スタイルシートで文字の大きさを設定するには
文字のサイズを「ポイント」で指定する
文字のサイズを「em」で指定する
64 スタイルシートでページの体裁を整える
行間をポイントで指定する
ブラウザで確認する
テキストを中央に配置する
65 リンクの色を設定するには
未アクセスのリンクの色を指定する
アクセス済みのリンクの色を指定する
66 スタイルシートで背景に画像や色を設定するには
背景に画像を設定する
背景に色を設定する
67 スタイルシートだけのファイルを作るには
別のファイルにスタイルシートを作成する
HTMLファイルにスタイルシートへのリンクを設定する
ブラウザで確認する
スタイルシートを編集する
Q&A
CHAPTER 11 ホームページを公開しよう
68 ホームページを公開するには
ホームページを公開するしくみ
アップロードする前に確認すること
フォルダ全体のサイズを確認する
69 ファイルマネージャでアップロードするには
サブディレクトリを作成する
HTMLファイルをアップロードする
［image］サブディレクトリに画像ファイルをアップロードする
70 アップロードを確認する
ファイルマネージャで確認する
ブラウザでホームページを確認する
71 ファイルマネージャでHTMLを修正する
間違った表示を見つける
HTMLを修正する
不要なファイルを削除する
ブラウザで確認する
72 FFFTPをダウンロードする
FFFTPをダウンロードする
FFFTPをインストールする
73 FFFTPでアップロードする
Webサーバーの設定を行う
Webサーバーにファイルをアップロードする
CHAPTER 12 無料サービスを使おう
74 自分のホームページにカウンタを設置するには
カウンタのデザインを選択する
カウンタを設定する
75 無料掲示板を設置するには
CGIBOYに会員登録する
登録確認メールからの本登録するには
掲示板にホームページへのリンクを設定する
掲示板へのリンクを設定する
76 掲示板を利用するには
掲示板にコメントを書き込む
掲示板からホームページへのリンクを確認する
77 無料のブログを設置するには
新規ユーザー登録する
ブログを作成する
ホームページでブログを表示する
78 無料の画像素材を利用するには
画像をダウンロードする
画像をYahoo! ジオシティーズにアップロードする
ホームページにイラストを挿入する
79 ページ内に検索ツールをつけるには
ホームページにYahoo! 検索フォームを追加する
Webサーバーにファイルをアップロードする
APPENDIX 付録
1 簡単に使える基本的な要素と属性のタグリスト
2 Webセーフカラーとカラーネーム
3 その他の便利な無料サービス
ダウンロードの手引き
CHAPTER 1 ホームページの基本
1 インターネットとホームページの概要
インターネットとは
ホームページとは
2 ホームページが表示されるしくみ
ホームページが表示される流れ
ホームページを公開するには
3 無料ホームページサービスとは
無料ホームページサービスを利用する
いろいろな無料ホームページサービス
4 ホームページの内容を考える
テーマを決めよう
ホームページで使いたい素材を用意しよう/HTMLファイルを作ろう
5 ＨＴＭＬファイルを作成するには
HTMLとは
タグとは
6 ホームページ作成の準備
本書で作成するホームページ
専用のフォルダを作成する
拡張子を表示させる
基本的なHTMLファイルを作成する
ファイルをHTMLファイルとして保存する
他のページのHTMLファイルを作成する
7 HTMLファイルをブラウザで開くには
[メニュー]バーを表示する
HTMLファイルを開く
CHAPTER 2 無料ホームページサービスを利用しよう
8 Yahoo! ジオシティーズを利用するには
Yahoo! ジオシティーズとは
Yahoo! Japan IDを取得する
9 Yahoo! ジオシティーズに登録してみよう
Yahoo! ジオシティーズのトップページを表示する
ホームページのURLを取得する
10 ホームページの基本的な設定を行うには
ホームページの作成方法を選択する
ジオクリエーターを起動する
11 ジオクリエイターでホームページを作成する
テンプレートを編集する
ホームページを保存する
ホームページをブラウザで確認する
12 ホームページを編集する
サブページを作成する
保存したホームページをジオクリエーターで開く
目次にサブページへのリンクを設定する
プレビューを利用してホームーページを確認する
13 ホームページ作成を楽しくするその他サービス
閲覧者とコミュニケーションが取れる機能
無料素材を提供しているサイト
Q&A
CHAPTER 3 簡単HTMLでテキストに変化をつけてみよう
14 文字を太くするには
テキストに太字のスタイルを設定する
変更をブラウザで確認する
15 文字の大きさを設定するには
文字のサイズを指定する
文字のサイズを変更する
16 文字の色を設定するには
カラーコード/カラーネーム
ページ全体のテキストの色を指定する
テキストの色をカラーコードで指定する
17 テキストに動きをつけるには
テキストに動きをつける
テキストの動き方を指定する
18 ページに表示されない文字を設定するには
HTMLにコメントを残す
CHAPTER 4 簡単HTMLでレイアウトに変化をつけてみよう
19 テキストに段落を設定するには
テキストに段落を設定する
テキストに複数の段落を設定する
20 テキストを改行する
タグを挿入して改行する
空白行を挿入する
21 文章の見出しを設定する
ページのタイトルを設定する
見出しのレベルを指定する
22 テキストを指定した位置に配置するには
テキストを中央に配置する
テキストを右揃えに配置する
23 ページに区切り線を挿入するには
区切り線を挿入する
区切り線の太さを指定する
区切り線を塗りつぶしにする
区切り線の色を変更する
24 区切り線の長さと位置を変更するには
区切り線の長さを設定する
区切り線の位置を指定する
Q&A
CHAPTER 5 簡単HTMLで箇条書きリストを作ろう
25 箇条書きリストを作成するには
テキストを箇条書きにする
ブラウザで確認する
26 階層のある箇条書きリストを作成するには
階層のある箇条書きを作成する
複数の項目に階層を付ける
27 連番のついた箇条書きを作成するには
番号付きの箇条書きを設定する
下層の項目を番号付き箇条書きにする
28 箇条書きラベルを変更するには
ラベルのスタイルを変更する
下層のラベルを変更する
29 箇条書きラベルを個別に変更するには
ラベルを個別に変更する
下層のラベルを個別に変更する
Q&A
CHAPTER 6 ホームページに写真を掲載してみよう
30 ホームページに掲載する画像データとは
ホームページに使用できる画像ファイルの形式
画像管理用のフォルダを作成する
31 ホームページに画像を表示させるには
画像へのリンクを設定する
ブラウザで確認する
32 画像に代替テキストを埋め込むには
画像の代替テキストを埋め込む
代替テキストをブラウザで確認する
33 画像の表示サイズを調整するには
画像サイズをブラウザに占める割合で指定する
画像サイズをピクセル数で指定する
34 画像に枠を設定するには
画像に枠を設定する
画像の枠を削除する
35 テキストを画像に回り込ませるには
画像を段落に設定する
画像の左側にテキストを回りこませる
画像の右側にテキストを回りこませる
画像とテキストの間隔を調整する
36 テキストの回りこみを解除するには
見出し要素のテキストを追加する
回り込みを解除する
37 ページ背景に画像や色をつけるには
ホームページの背景に画像を設定する
ホームページの背景色を指定する
Q&A
CHAPTER 7 表組（テーブル）をつくろう
38 表組（テーブル）の基本を覚えよう
表組の仕組みを理解する
表組の基本になるＨＴＭＬを記述する
39 行とセルを設定しよう
表組の行を設定する
表組にセルを設定する
40 表組に罫線を設定しよう
罫線を設定する
罫線の色を設定する
41 表組の大きさを設定する
表組の大きさをピクセル数で指定する
表組の大きさをブラウザの大きさに対する比率で指定する
42 列の幅と行の高さを調整するには
列の幅を指定する
行の高さを指定する
43 セル内のテキストの位置を設定するには
テキストをセルの右揃えに指定する
テキストをセルの左揃えに指定する
44 セルを連結するには
1行分の要素を追加する
セルを連結する
45 表組にテキストを回りこませるには
段落要素のテキストを追加する
テキストに回り込み設定をする
46 表組の背景に色を設定するには
表組の背景色を設定する
CHAPTER 8 リンクを設定しよう
47 リンクのしくみを理解しよう
リンクとは/リンクが設定できる対象
リンクの種類
48 ファイルにリンクを設定するには
リンク元とリンク先を確認する
リンクを設定する
他のページへのリンクを設定する
49 外部のページにリンクするには
リンク先に外部のホームページを指定する
リンクを確認する
50 未アクセスのリンクの色を設定する
未アクセスの表示に戻すには
未アクセスのリンクの色を設定する
51 アクセス済みのリンクの色を変更するには
アクセス済みのリンクの色を指定する
アクセス済みのリンク色を確認する
52 メールリンクを設定するには
メール送信のリンクを設定する
メール送信のリンクを確認する
Q&A
CHAPTER 9 フレームページをつくろう
53 フレームページとは
フレームページとは
フレームを定義するタグ
54 フレームページをつくるには
左右分割のフレームを設定する
「frame.html」をブラウザで開く
55 フレームの境界線を調整する
フレームの境界線に色をつける
フレームの境界線を非表示にする
56 フレーム内の配置を調整するには
左右の空きスペースを指定する
上下の空きスペースを指定する
57 リンク先を正しいフレームに表示させるには
リンク先の表示場所を確認する
表示するフレームを指定する流れ
フレームに名前を設定する
表示先のターゲットを設定する
58 フレーム表示を解除してリンク先を表示するには
ホームページの入り口へのリンクを設定する
フレームの解除を設定する
59 フレームファイルへのリンクを設定する
メモ用のコメントを削除する
リンク先に「frame.html」を指定する
Q&A
CHAPTER 10 スタイルシートでプロの技を使おう
60 スタイルシートとは
スタイルシートの概要/スタイルシートでできること
3種類の記述方法
61 スタイルシートを作成するには
スタイルシートの書き方/スタイルを指定する方法
スタイルシートを「head要素」に記述する
「frame.html」をブラウザで開く
62 スタイルシートで文字の色を設定するには
段落の文字の色を指定する
見出しの文字の色を変更する
63 スタイルシートで文字の大きさを設定するには
文字のサイズを「ポイント」で指定する
文字のサイズを「em」で指定する
64 スタイルシートでページの体裁を整える
行間をポイントで指定する
ブラウザで確認する
テキストを中央に配置する
65 リンクの色を設定するには
未アクセスのリンクの色を指定する
アクセス済みのリンクの色を指定する
66 スタイルシートで背景に画像や色を設定するには
背景に画像を設定する
背景に色を設定する
67 スタイルシートだけのファイルを作るには
別のファイルにスタイルシートを作成する
HTMLファイルにスタイルシートへのリンクを設定する
ブラウザで確認する
スタイルシートを編集する
Q&A
CHAPTER 11 ホームページを公開しよう
68 ホームページを公開するには
ホームページを公開するしくみ
アップロードする前に確認すること
フォルダ全体のサイズを確認する
69 ファイルマネージャでアップロードするには
サブディレクトリを作成する
HTMLファイルをアップロードする
［image］サブディレクトリに画像ファイルをアップロードする
70 アップロードを確認する
ファイルマネージャで確認する
ブラウザでホームページを確認する
71 ファイルマネージャでHTMLを修正する
間違った表示を見つける
HTMLを修正する
不要なファイルを削除する
ブラウザで確認する
72 FFFTPをダウンロードする
FFFTPをダウンロードする
FFFTPをインストールする
73 FFFTPでアップロードする
Webサーバーの設定を行う
Webサーバーにファイルをアップロードする
CHAPTER 12 無料サービスを使おう
74 自分のホームページにカウンタを設置するには
カウンタのデザインを選択する
カウンタを設定する
75 無料掲示板を設置するには
CGIBOYに会員登録する
登録確認メールからの本登録するには
掲示板にホームページへのリンクを設定する
掲示板へのリンクを設定する
76 掲示板を利用するには
掲示板にコメントを書き込む
掲示板からホームページへのリンクを確認する
77 無料のブログを設置するには
新規ユーザー登録する
ブログを作成する
ホームページでブログを表示する
78 無料の画像素材を利用するには
画像をダウンロードする
画像をYahoo! ジオシティーズにアップロードする
ホームページにイラストを挿入する
79 ページ内に検索ツールをつけるには
ホームページにYahoo! 検索フォームを追加する
Webサーバーにファイルをアップロードする
APPENDIX 付録
1 簡単に使える基本的な要素と属性のタグリスト
2 Webセーフカラーとカラーネーム
3 その他の便利な無料サービス
