はじめてのホームページ HTML5入門

概 要

はじめてホームページを作る人でも、HTMLの書き方、読み方、作り方が図解でやさしくわかる入門書です。本書ではホームページ作成で欠かせないHTMLタグの書き方から使い方までを最新のWindows7を使って分かりやすく解説しました。インターネットやホームページの仕組み、文章や見出しの表示方法、箇条書きや表組み(テーブル)の作り方、画像や音楽、動画などの扱い方など、HTMLの基本的なタグに加え、ホームページの見栄えを整えるスタイルシート(CSS)の書き方までを豊富な図解でやさしく紹介。Windows付属のメモ帳など、テキストエディタのみを用いてHTMLを作成しますので、特別なソフトなしにすぐにホームページづくりにトライできます。サンプルコードのダウンロードサービス付き。

著者 荒石正二
価格 本体1380円(税別)
ISBN 978-4-7980-2905-4
発売日 2011/3/26
判型 B5変
色数 4色
ページ数 240
CD/DVD
対象読者 入門
シリーズ はじめての...
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

CHAPTER 1 HTMLでホームページを作ろう

1 インターネットを理解する

インターネットとは

ブラウザーでホームページが見られるようになるまで

(裏技)IPv4とIPv6

2 ホームページの仕組み

ホームページとは

ホームページの仕組み

3 ホームページで表示できるもの

文字情報

(裏技)アイデアの参考元

画像情報

映像・音楽情報

ホームページをお気に入りに登録するには

4 ホームページ作成に必要なもの

必須な機材・ソフト・環境

(裏技)ホームページ作成に必要なパソコンのスペック

用意しておくと便利な機材とソフト

5 ホームページの内容を考えよう

内容を決める

必要な素材を集める

6 ホームページ作成の事前準備・拡張子を表示させる

htmlファイルを確認してみる

ファイルの拡張子を見えるようにする

拡張子を確認する

7 ホームページ作成の事前準備・メモ帳の操作方法を理解する

メモ帳を操作する

8 ホームページ作成の事前準備・作成用のフォルダーを作成する

新しいフォルダーを作る

複数のフォルダーを作っておく

9 HTMLの基本を理解する

タグの使い方

すべての内容がタグで囲まれる

10 htmlファイルを作ってみよう

メモ帳を起動する

htmlファイルを保存する

11 htmlファイルをブラウザーで開くには

Internet Explorerを起動するには

htmlファイルを開く

直接htmlファイルを開く

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

●Q&A

CHAPTER 2 文字を表示させるには

12 文字を表示させるには

htmlファイルを作ってブラウザで表示する

13 ページに見出しを表示させるには

メモ帳でファイルを開いてみる

見出し用のタグを入力してブラウザーで確認する

別のページを作って見出し用のタグを入力する

htmlファイルを保存してブラウザー上で確認する

14 文字を太く表示させるには

<b>タグで文字を太く表示させる

<strong>タグで文字を太く表示させる

15 文字を斜体で表示させるには

<i>タグで文字を斜体にする

<em>タグで文字を斜体にする

16 文字に下線を引くには

<ins>タグで文字に下線を引く

17 文字の大きさを小さくするには

注釈文字を<small>タグで小さくする

htmlファイルを保存してブラウザー上で確認する

18 特殊な文字を表示させるには

「<」と「>」を文字コードで指定する

他の特殊記号を表示させてみる

19 上付き・下付き文字を指定するには

<sup>タグで上付き文字を表示させる

<sub>タグで下付き文字を表示させる

20 チップ表示の文字を表示させるには

<acronym>タグで略語の正式名称を表示させる

<abbr>タグで略語の正式名称を表示させる

21 ページに表示されないコメントを入力するには

コメント文を記述してブラウザーで確認する

22 ブラウザーのウインドウバーに文字を表示させるには

ウインドウバーの表示内容を確認する

ウインドウバーに表示される文字を指定する

●Q&A

CHAPTER 3 ページをレイアウトするには

23 文章に段落や改行を設定するには

文章を<br>タグで改行させる

diary_2011_06_12.html内の文章を<br>タグで改行させる

24 文字に取り消し線を引くには

<del>タグで修正箇所に取り消し線を付ける

htmlファイルを保存してブラウザー上で確認する

25 ページ内に区切り線を引くには

<hr>タグで文章間に区切り線を加える

区切り線の色を指定する

26 テキストをそのまま表示させるには

ページ上にhtmlソースを<pre>タグで表示させる

htmlファイルを保存してブラウザーで確認する

●Q&A

CHAPTER 4 箇条書きや連番付きのリストを作るには

27 箇条書き(リスト)を作るには

<ul>タグと<li>タグを組み合わせて使う

28 階層のある箇条書き(リスト)を作るには

階層構造の箇条書き(リスト)を作る

29 連番付きリストを作るには

連番付きリストを作る

30 ラベルの先頭番号を変更するには

連番付きリストの先頭番号を指定する

htmlファイルを保存してブラウザーで確認する

31 別な方法でラベルの先頭番号を変更するには

連番付きリストの先頭番号を指定する

htmlファイルを保存してブラウザー上で確認する

●Q&A

CHAPTER 5 表組みを作るには

32 ホームページの表組みとは

HTMLの表組みでできること

HTMLでの表組みの名称

表組みと記述するタグの関係

33 表組みを作るには

表組みを作る

htmlファイルを保存してブラウザーで確認する

表組みに行を追加する

34 表組みの罫線を表示させるには

<table>タグにborder属性を指定する

表示された罫線の太さを変えてみる

35 表組みの見出しを設定するには

見出し行を作る

36 表組みの横幅を変えたいときには

表組みの横幅をパーセントで指定する

表組みの横幅をピクセル値で指定する

37 表組みにタイトルを表示するには

<caption>タグで表組みにタイトルを表示させる

IEを起動してdiary_2011_06_25.htmlを開く

38 セルを横方向に結合するには

表組みの見出しセルをcolspan属性で結合する

39 セルを縦方向に結合するには

4つのセルをrowspan属性で縦方向に結合する

2つのセルをrowspan属性で縦方向に結合する

●Q&A

CHAPTER 6 画像や音楽、映像を表示・再生するには

40 画像を表示させるには

写真画像を表示させる

41 画像の表示サイズを変えるには

表示する画像の大きさを指定する

表示する画像の大きさをパーセントで指定する

42 ホームページに使える音声・音楽ファイル

インターネット上で扱える音声・音楽ファイルの種類とは

43 音声・音楽ファイルを再生させるには

音声・音楽ファイルを再生させる

44 音声・音楽ファイルをコントロールするには

操作パネルを消してループ再生させる

操作パネルを表示して自動再生を切る

45 映像ファイルを再生させるには

映像ファイルを再生させる

●Q&A

CHAPTER 7 リンクを使うには

46 リンクの仕組みを理解する

リンクの使い方を具体例で確認する

リンクの種類を知っておく

47 同じページ内へリンクさせるには

同じホームページ内でリンクさせる

48 他のホームページへリンクさせるには

他のホームページへリンクさせる

リンクしたページへ移動するかを確認する

49 メールへのリンクを設定するには

ホームページ上にメールへのリンク設定を行う

ブラウザーで確認する

50 ファイルへリンクさせるには

他のhtmlファイルをリンクさせる

ブラウザーで確認する

51 画像をリンクさせるには

画像へのリンクを設定する

ブラウザーで確認する

●Q&A

CHAPTER 8 スタイルシート編

52 スタイルシートとは

スタイルシートの使用例

スタイルシートの記述例

スタイルシートは別ファイルでまとめられている

53 cssファイルを読み込ませるには

スタイルシートを別ファイルでまとめる

54 スタイルシートの使い方を理解する

スタイルシートを適用させる前の準備

タグへスタイルシートを指定する

ブラウザーで確認する

55 ボックス構造を理解する

ボックスの構造

ボックス構造をサンプルでチェックする

56 文字の色を変えるには

スタイルシートで文字の色を変更する

57 文字のサイズを変えるには

スタイルシートで文字のサイズを変更する

特定の部分だけにスタイルシートを適用させる

58 文章の揃えを変えるには

スタイルシートで文字の揃えを変更する

特定のタグだけにスタイルシートを適用させる

59 文字を太く表示するには

指定した部分の文字だけを太くする

60 文字を斜体で表示するには

指定した文字だけを「oblique」の指定で斜体表示する

指定した文字だけを「italic」の指定で斜体表示する

61 文字に下線・上線を加えるには

特定の文字に上線を加える

特定の文字に下線を加える

62 段落や文字の周囲に余白を設けるには・

段落の下側にパディングを指定する

段落の周囲にパディングを指定する

63 段落や文字の周囲に余白を設けるには・

段落にマージンを指定する

同じclass名のスタイルシートを別の場所に適用させる

64 段落や文字の周囲に罫線を引くには

段落に罫線を引く

見出しの周囲に2本線を引く

65 罫線の太さや色を変更するには

罫線の太さを指定する

罫線の色を指定する

66 段落や文字の背景に色を指定するには

段落の背景色を指定する

文字の背景色を指定する

67 文章の行間を調整するには

段落の行間を空ける

特定の部分で行間を指定する

68 文章の字間を調整するには

特定段落の字間を指定する

見出し文字の字間を詰める

69 文章や段落の背景に画像を表示するには

段落の背景に画像を表示させる

段落の背景に異なる画像を表示させる

70 ページの背景に画像や色を設定するには

ページ全体の背景に画像を表示させる

ページ全体の背景に色を表示させる

71 背景画像の表示方法を調整するには

背景の画像を1つだけ表示する

背景の画像を横方向にだけ表示する

ページ全体の背景に画像を縦方向にだけ表示する

72 背景画像の表示位置を調整するには

背景画像を右端に表示する

背景画像を右端にひとつだけ表示する

73 画像を固定して動かさないようにするには

ページ全体の背景画像を固定する

段落の背景画像を固定する

74 文章の1文字目だけに空白を加えるには

1文字目だけに空白を加える

1文字目を左側へ食い込ませる

75 文章の1文字目だけ大きく表示するには

1文字目だけ大きく表示する

1文字目の文字に装飾を加える

76 連番付きリストでラベルの種類を指定するには

ラベルを大文字のアルファベットに変更する

ラベルを大文字のローマ数字に変更する

77 箇条書き(リスト)のラベルを指定するには

箇条書き(リスト)のラベルを に変更する

特定のラベルだけ○に変更する

78 連番付きリストのラベルに画像を使いたいときは

連番付きリストのラベルに画像を指定する

79 リストの背景に画像を指定するには

箇条書き(リスト)の項目に背景画像を指定する

80 画像の横に表示させた文字の位置を調整するには

日記用のhtmlファイルを作成する

画像横に配置した文字の位置を指定する

81 ボックス内の幅や高さを指定するには

ボックス内の幅を指定する

ボックス内の幅と高さを指定する

82 画像の周囲に余白を加えたいときは

画像に余白を指定する

画像の上下だけに余白を加える

83 画像の周囲に罫線を加えるには

画像に罫線を加える

罫線の内容を変更する

84 表組みの幅や高さを変えるには

表組み全体の幅と高さを指定する

<tr>タグの高さを指定する

85 セル同士の間隔を指定するには

セル同士の間隔を消す

セル同士の間隔を数値で調整する

86 リンクされている文字の色を変えるには

css.cssを修正する

●Q&A

DATA 資料

1 カラーチャート

2 タグリスト&スタイルシート

3 ホームページ公開時に必要な最低限の内容とは

4 作ったホームページを公開する

PR

秀和システム