PART1 ホームページとHTMLの仕組み
Lesson 1 ホームページが見える仕組み

• 1. ホームページを見るには
• 2. ホームページの中身
• 3. ホームページの公開時に気をつけること
• 4. ホームページ作成には，ブラウザとエディタが必要

Lesson 2 HTMLの基本構造

Lesson 3 ホームページを公開するために必要な知識

• 1. ホームページ公開領域とURLの取得
• 2. 公開用の各種ファイルの作成
• 3. 作成したファイルをFTPでWebサーバに転送

Lesson 4 前準備（HTMLファイルを保存するフォルダーの作成）

• 1. フォルダー作成の手順

PART2 テキストに意味をつける
Lesson 1 基本のテキスト要素

• 例題01 日記を書いてみよう

Lesson 2 引用

• 例題02 読書メモを作ってみよう

Lesson 3 さまざまな文字表現を覚えよう

• 例題03 強調，略語・定義語，ルビ・下付き・上付き文字

Lesson 4 その他のタグを使ってみよう

• 例題04 その他のタグ
• やってみよう！ 1 日記を書いてみよう
• やってみよう！ 2 読書メモを作ってみよう
• やってみよう！ 3 強調表現
• やってみよう！ 4 略語や定義語
• やってみよう！ 5 ルビ・下付き・上付き文字
• やってみよう！ 6 整形済みテキスト
• やってみよう！ 7 コピーライトの表示

PART3 画像を表示する
Lesson 1 画像を利用するための準備

• 1. 主要なWebブラウザで表示できる画像ファイル形式
• 2. 画像ファイルを格納するフォルダーの用意
• 3. フォルダー［image］を作成する

Lesson 2 画像ファイルを用意する

• 1. 本書で利用する画像ファイル

Lesson 3 画像の表示

• 例題05 写真を表示してみよう
• やってみよう！ 8 画像を表示しよう

PART4 リンクの指定
Lesson 1 リンクとは

• 例題06 基本的なリンクの指定方法を覚えよう

Lesson 2 相対パスと絶対パス

• 例題07 相対パス，絶対パスについて理解しよう
• やってみよう！ 9 作成したHTML にリンクを張ろう
• やってみよう！ 10 ページ内リンクを設定しよう
• やってみよう！ 11 新しいタブで開いてみよう
• やってみよう！ 12 画像にリンクを張ろう

PART5 CSSで文字を装飾する
Lesson 1 CSSの役割

• 1. CSSとは
• 2. なぜCSSが必要なのか
• 3. CSSの基本的な記述方法

Lesson 2 CSSをHTMLで読み込むには

• 例題08 CSSファイルを作り，HTMLからリンクしよう

Lesson 3 背景・文字の装飾

• 例題09 背景・文字を装飾しよう

Lesson 4 引用部分の装飾

• 例題10 読書メモを整えよう
• やってみよう！ 13 CSS の読み込み
• やってみよう！ 14 背景色の変更
• やってみよう！ 15 文字色の変更
• やってみよう！ 16 見出しの位置変更
• やってみよう！ 17 文字の大きさをpx，%，emで変更しよう
• やってみよう！ 18 文字の大きさをキーワードで変更しよう
• やってみよう！ 19 フォントを変更しよう
• やってみよう！ 20 読書メモの引用部分を線で囲ってみよう
• やってみよう！ 21 読書メモの引用部分の幅を狭くしよう
• やってみよう！ 22 本文と引用部分の間に余白を作ってみよう
• やってみよう！ 23 引用部分の余白と線の太さ，背景色を調整しよう

PART6 リストを作る
Lesson 1 箇条書きリスト

• 例題11 リストのマーカーを変更しよう

Lesson 2 順番のついたリスト

• 例題12 欲しいものリストを作ってみよう

Lesson 3 定義リスト

• 例題13 料理リストを作ってみよう
• やってみよう！ 24 項目の先頭に「・」がついたリストを作ろう
• やってみよう！ 25 リストのマーカーを変更しよう
• やってみよう！ 26 リスト番号の表示を変更しよう
• やってみよう！ 27 文字色の変更

PART7 ページにファイルを埋め込む
Lesson 1 様々なファイルを埋め込んでみよう

• 例題14 様々なファイルを埋め込んでみよう
• やってみよう！ 28 HTML ファイルを埋め込もう
• やってみよう！ 29 PDF を埋め込もう
• やってみよう！ 30 サンプル動画のサイズを変更しよう
• やってみよう！ 31 サンプル音声を自動再生しよう
• やってみよう！ 32 Youtube とGoogle マップの表示サイズを変えてみよう

PART8 テーブルを作成する
Lesson 1 テーブルとは

• 1. テーブルの基本構造

Lesson 2 テーブルの基本要素

• 例題15 簡単な表を作り，タイトルをつけよう

Lesson 3 表のヘッダー

• 例題16 表にヘッダー行の指定をしよう

Lesson 4 見出しセルの方向と列のグループ化

• 例題17 見出しセルの方向を定義し，列のグループ化をしよう

Lesson 5 表のフッター

• 例題18 合計にあたる部分をフッターに指定しよう

Lesson 6 表を見やすく整える

• 例題19 テーブルに線を引き，セルに色をつけ見やすく整えよう
• やってみよう！ 33 テーブルを作成しよう
• やってみよう！ 34 tbody要素に色を付けたテーブルを作成しよう
• やってみよう！ 35 thead要素に色を付けたテーブルを作成しよう
• やってみよう！ 36 caption 要素を左寄せにしたテーブルを作成しよう
• やってみよう！ 37 見出しセルに色をつけたテーブルを作成しよう
• やってみよう！ 38 商品名の列をグループ化し色をつけたテーブルを作成しよう
• やってみよう！ 39 tfoot要素に色をつけたテーブルを作成しよう
• やってみよう！ 40 表を見やすく整えよう

PART9 フォームを作る
Lesson 1 フォームとは

• 1. formの基本構造

Lesson 2 テキストエリアとラジオボタン

• 例題20 名前入力欄と性別選択のフォームを作ってみよう

Lesson 3 フォームのグループ化と，同意文がセットになったボタン

• 例題21 フォームをグループにして説明を加えてみよう

Lesson 4 便利なフォーム機能

• 例題22 フォームに便利な入力欄を追加しよう
• やってみよう！ 41 ふりがなの入力欄を追加しよう
• やってみよう！ 42 フォームを見やすくしよう
• やってみよう！ 43 その他の値を入れてみよう
• やってみよう！ 44 パスワード入力欄を作ってみよう
• やってみよう！ 45 検索用入力欄を作ってみよう
• やってみよう！ 46 日付入力欄を作ってみよう

PART10 カテゴリーとセクション
Lesson 1 カテゴリーとコンテンツモデルについて理解しよう

• 1. カテゴリーとは
• 2. コンテンツモデルとは

Lesson 2 アウトラインとセクション

• 例題23 文章を内容で切り分けてみよう

Lesson 3 記事を作ってみよう

• 例題24 ブログ記事を書いてみよう

Lesson 4 ナビゲーションとフッター

• 例題25 ナビゲーションとフッターを追加しよう

Lesson 5 特定の意味がない要素

• 例題26 適切な要素がない場合に使ってみよう
• やってみよう！ 47 セクションを追加しよう
• やってみよう！ 48 hr 要素を追加しよう
• やってみよう！ 49 新着商品ページを作ろう
• やってみよう！ 50 おすすめ商品をのせよう
• やってみよう！ 51 キャプションつきの画像を使おう
• やってみよう！ 52 連絡先情報を追加しよう
• やってみよう！ 53 フッターに要素をまとめよう
• やってみよう！ 54 ナビゲーションを作ろう
• やってみよう！ 55 div 要素と span 要素を使おう

PART11 ホームページをデザインする
Lesson 1 レイアウトとは

Lesson 2 ページ全体の設定

• 例題27 ページ全体の設定をしよう

Lesson 3 要素を左右に並べる

• 例題28 マークアップしたものを並べてみよう
• やってみよう！ 56 背景画像を指定しよう
• やってみよう！ 57 背景画像の繰り返しを指定しよう
• やってみよう！ 58 ナビゲーションを並べよう
• やってみよう！ 59 幅を変更してみよう
• やってみよう！ 60 上部のあきを狭くしよう
• やってみよう！ 61 サイドバーの位置を右にしてみよう

PART12 ホームページを飾る
Lesson 1 色，図形，アニメーション

• 例題29 CSSで設定してみよう
• やってみよう！ 62 グラデーションと影の距離を変えてみよう
• やってみよう！ 63 クリックすると重なる四角を描こう
• やってみよう！ 64 メニューを角丸ボタン風にしてみよう
• やってみよう！ 65 四角の動きを変えてみよう

PART13 スマートフォンやSNSの対応
Lesson 1 基本的なルールとWebサービスの利用

• 例題30 スマートフォン向けのCSS を設定する
• やってみよう！ 66 viewport を入れてみよう
• やってみよう！ 67 スマートフォン用にCSSを追加してみよう
• やってみよう！ 68 Web フォントを使ってみよう
• やってみよう！ 69 Web フォントを変更してみよう
• やってみよう！ 70 ソーシャルアイコンを入れてみよう

索引