はじめてのホームページ&HTML5

概 要

知識と予算がゼロでも、サンプルをまねるだけで完成する、HTML5を使ってホームページを作る方法をやさしく解説した入門書です。HTML5とCSS3が登場し、難しいFlashを使わなくても、動きのある楽しいホームページを作ることが簡単にできるようになりました。本書は、ホームページ作成に必要な知識や作業の流れ、ページ作成の基本になるHTML5とCSS3について実際にページを作りながら使い方をわかりやすく解説していきます。手順の確認・復習ができる便利なチェック欄付きで、巻末にはカラーチャートやタグ・スタイルシートの一覧表、サンプルや素材のダウンロードサービスも付いているので、知識ゼロ、予算ゼロの人でもコレ一冊でホームページをはじめられます。

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

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

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

サポート

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

サポート情報へのリンク

目次

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

1 ホームページの仕組み

ホームページが表示されるまでの流れ

ホームページの仕組み

htmlファイルの内容

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

ホームページ上で表現できるいろいろな情報

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

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

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

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

htmlファイルの見え方を確認する

拡張子を表示させる

5 ホームページ作成の事前準備・メモ帳の起動と終了

メモ帳を起動する

メモ帳を終了する

6 ホームページ作成の事前準備・メモ帳をピン留めしておく

メモ帳をタスクバーにピン留めする

メモ帳を終了してタスクバーを確認する

ピン留めしたアイコンからメモ帳を起動する

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

作業用のフォルダーを作成する

使用する素材を保存する

8 HTMLの基本を理解する

タグの使い方

htmlファイルの記述例とブラウザー上での表示例

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

メモ帳を起動して基本的なタグを入力する

ブラウザー内に表示される内容を記述する

htmlファイルを保存する

メモ帳を終了する

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

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

ブラウザーを終了する

11 htmlファイルを「メモ帳」で開くには

htmlファイルをメモ帳で開く

メモ帳を終了する

Q&A

CHAPTER 2 ページ内に文字を表示させるには

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

メモ帳を起動する

htmlファイルをメモ帳で起動する

htmlファイルの内容を変更する

htmlファイルを別名で保存する

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

ブラウザーを終了する

13 ブラウザー内に文字または文章を表示させるには

<p>タグで文章を指定する

htmlファイルを別名で保存する

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

Internet Explorer を終了する

14 文書を改行したいときは

<br>タグで改行を指定する

htmlファイルを別名で保存する

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

15 文字を太く表示したいときは

<b>タグで太くしたい文字を指定する

htmlファイルを別名で保存する

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

16 文章内の一部を目立たせたいときは

<mark>タグで目立たせたい文字を指定する

htmlファイルを別名で保存する

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

17 漢字にルビを振りたいときは

特定の文字にルビを指定する

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

18 ルビに対応していないブラウザーに対応するには

他ブラウザーで表示を確認する

<rp>タグと表示する文字を指定する

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

19 文章の一部にアクセントを付けたいときは

<em>タグで文章の一部にアクセントを付ける

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

20 重要性の高い文章を表示したいときは

<strong>タグで警告文を指定する

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

21 免責事項などの文章を表示したいときは

<small>タグでライセンスに関する文章を表示する

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

22 ページ内に特殊な文字を表示したいときは

特殊文字を文字コードで指定する

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

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

コメント文を入力する

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

24 ブラウザーのタブ部分にページのタイトルを表示させるには

ブラウザーで表示を確認する

<titleタグ>でタイトルを指定する

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

Q&A76

CHAPTER 3 ページのアウトラインを構成するためには

25 ページ全体を構成するアウトラインについて理解する

要素は役割に応じてカテゴリーで分類される

各カテゴリーの役割

ページ全体のアウトラインを構成するタグは主に8つ

ページのアウトラインを決めるための基本

ページ全体のアウトラインは事前に検討する

26 ページ内にヘッダー部分を指定するには

ページのタイトルをヘッダー部分に指定する

htmlファイルを別名で保存する

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

27 ページ内にナビゲーション部分を指定するには

サイトマップをナビゲーション部分に指定する

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

28 単体完結する内容を指定するには

1日ぶんの日記を完結する内容として指定する

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

29 ページ内で連続性のある内容をまとめたいときは

日記に連続性のある文章を記述する

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

30 ページ内にフッター部分を指定するには

ページ全体のフッター情報を指定する

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

31 他の情報源から知り得た内容を引用・転載したいときは

秀和システムの内容を転載する

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

32 ページ内に補足情報を表示させたいときは

補足情報を表示する

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

33 ページ内に連絡先を表示したいときは

ページ作成者の連絡先を表示する

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

34 ページ内の特定部分だけをまとめたいときは

特定の部分だけをまとめる

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

35 ページ内に罫線を表示したいときは

文章を罫線で切り替える

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

Q&A

CHAPTER 4 ページ内に画像・音声・映像を表示させる

36 ページ内に画像を表示したいときは

ページ内に画像を表示する

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

37 画像が表示されなかったときの説明文を入力しておきたいときは

画像に説明文を加える

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

38 画像ファイルの表示サイズを指定したいときは

画像の表示サイズを指定する

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

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

Internet Explorer 10で再生できる音声・音楽ファイル

音声・音楽ファイルの指定方法

Internet Explorer 10の操作パネル

ブラウザーで異なるファイル形式

他のブラウザーで再生させるための方法

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

音声ファイルを指定する

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

41 音声・音楽ファイルの再生をページ上で操作させたいときは

操作パネルの表示を指定する

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

42 他ブラウザーで音声ファイルが再生されないときは

他ブラウザーで表示を確認する

ogg形式の音声ファイルを追加する

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

43 古いブラウザーで音声ファイルが再生されないときは

古いバージョンでの表示を確認する

<embed>タグで古いブラウザーへ対応させる

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

44 ホームページで使える映像ファイル

Internet Explorer 10で再生できる映像ファイル

映像ファイルの指定方法

Internet Explorer 10の操作パネル

ブラウザーで異なるファイル形式

他のブラウザーで再生させるための方法

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

映像ファイルを指定する

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

46 映像ファイルの再生をページ上で操作させたいときは

操作パネルの表示を指定する

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

47 映像が再生できなかったときにヒントとなる画像を表示するには

他ブラウザーで表示を確認する

ヒントとなる画像を指定する

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

48 映像の再生中に字幕を表示させたいときは

字幕用のテキストファイルを用意する

<track>タグで字幕を指定する

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

49 他ブラウザーで映像ファイルが再生されないときは

他ブラウザーで表示を確認する

webm形式の映像ファイルを追加する

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

50 古いブラウザーで映像ファイルが再生されないときは

古いバージョンでの表示を確認する

<embed>タグで古いブラウザーへ対応させる

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

Q&A

CHAPTER 5 ページ内にリストや記述リストを表示する

51 HTML5で表現できるリストの基本

HTML5で表現できる代表的なリストの種類

52 ページ内に箇条書きリストを表示したいときは

箇条書きリストを入力する

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

53 ページ内に複数行の箇条書きリストを表示したいときは

複数行の箇条書きリストを入力する

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

54 階層のある箇条書きリストを表示したいときは

下階層の箇条書きリストを入力する

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

55 ページ内に連番付きリストを表示したいときは

連番付きリストを入力する

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

56 連番付きリストの開始番号を変更したいときは

連番付きリストの開始番号を変更する

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

57 連番付きリストの番号を逆順で表示したいときは

連番付きリストの番号を逆順にする

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

他ブラウザーで表示を確認する

58 連番付きリストの番号を個別に変更したいときは

連番付きリストの番号を個別に変更する

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

59 ページ内に記述リストを表示したいときは

記述リストを入力する

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

60 記述リストの用語に説明文を表示したいときは

定義した名前の説明文を入力する

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

Q&A

CHAPTER 6 ページ内に表組みを表示する

61 ページ内に表組みを表示するには

htmlファイルをメモ帳で開く

表組みを入力するまでの下準備をする

表組みを入力する

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

62 ページ内に複数行の表組みを表示するには

複数行の表組みを入力する

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

63 ページ内の表組みに見出しを指定したいときは

表組みの見出しを入力する

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

64 ページ内の表組みで横方向のセルを結合したいときは

横方向のセル同士を結合する

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

65 ページ内の表組みで縦方向のセルを結合したいときは

縦方向のセル同士を結合する

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

66 ページ内の表組みでヘッダー部分を表示したいときは

表組みにヘッダー部分を追加する

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

67 ページ内の表組みでフッター部分を表示したいときは

表組みにフッター部分を追加する

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

68 ページ内の表組みにタイトルや説明文を表示したいときは

図や表への説明文を追加する

表組みにタイトルを追加する

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

69 表組みの縦列を個別にグループ化したいときは

表組みの縦列を3つにグループ化する

中央のグループを個別に分類する

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

Q&A

CHAPTER 7 ページ内にリンクを指定する

70 リンクの仕組みについて理解する

htmlファイルのリンクを具体例で確認する

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

71 同じページ内にリンクを指定したいときは

ページ内でリンクを指定する

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

72 htmlファイルへリンクを指定したいときは

htmlファイルへリンクを指定する

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

73 外部のhtmlファイルへリンクを指定したいときは

外部のhtmlファイルへリンクを指定する

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

74 リンク先にメールアドレスを指定したいときは

メールアドレスをリンクに指定する

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

75 リンク部分にチップで文字を表示したいときは

メールアドレスへのリンク部分にチップを表示する

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

76 画像ファイルへリンクを指定したいときは

画像ファイルへリンクを指定する

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

77 リンク先の内容を新しいタブで開きたいときは

リンク先を別のタブで表示させる

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

Q&A

CHAPTER 8 スタイルシートを指定する

78 スタイルシートの仕組みについて理解する

スタイルシート適用前と適用後を比較する

スタイルシートとcssファイルの関係

スタイルシートの入力方法

79 スタイルシートを入力するためのcssファイルを作成する

css形式のファイルを作成する

cssファイルをメモ帳で開く

80 htmlファイルにcssファイルを読みこませるには

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

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

81 表示する文字の色を変えたいときは

<h1>タグの文字色を指定する

htmlファイルの内容を変更する

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

82 表示する文字の書体を変えたいときは

<h1>タグの書体を指定する

htmlファイルの内容を変更する

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

83 表示する文章の行揃えを変えたいときは

文章の行揃えを指定する

htmlファイルの内容を変更する

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

84 表示する段落の横幅を変えたいときは

段落の横幅を指定する

htmlファイルの内容を変更する

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

85 段落をブラウザーの左右にあわせて中央で表示したいときは

段落の左右のマージンを指定する

htmlファイルの内容を変更する

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

86 段落の周囲に角丸の罫線を表示したいときは

段落に角丸の罫線を指定する

htmlファイルの内容を変更する

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

87 段落の内側に余白を設けたいときは

段落の余白を指定する

htmlファイルの内容を変更する

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

88 ページ全体や段落の背景色を変えたいときは

ページ全体の背景色を指定する

段落の背景色を指定する

htmlファイルの内容を変更する

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

89 ページ全体の背景に画像を表示させたいときは

ページ全体に背景画像を指定する

htmlファイルの内容を変更する

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

90 特定のタグで文字の大きさを変えたいときは

表組み内の文字の大きさを指定する

htmlファイルの内容を変更する

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

91 表組み用タイトルの表示される位置を変えたいときは

表組み用タイトルの位置を指定する

htmlファイルの内容を変更する

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

Q&A

DATA 資料

1 カラーチャート

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

手順項目索引

INDEX

PR

秀和システム