CHAPTER 1はじめる前に

1. 1-1ウェブサイト制作の流れ
2. 1-2代表的なブラウザ
   • COLUMNさまざまなブラウザとバージョン
3. 1-3テキストエディタを選ぼう

CHAPTER 2HTMLファイルを作成しよう

1. 2-1HTMLの基本
   • 2-1-1HTMLファイルの作成と保存
   • 2-1-2ブラウザで表示する
     • 解説HTMLタグの要素と属性
     • 解説HTMLページの基本構造
     • COLUMNHTMLのバージョンとdoctype宣言
     • COLUMN文字コードとは
2. 2-2HTMLタグの意味に基づいてマークアップしよう
   • 2-2-1ページの全体構成を把握する
   • 2-2-2見出しと段落を表示する
   • 2-2-3さまざまなブラウザとバージョン
     • 解説順序のあるリストと順序のないリスト
   • 2-2-3表を作成する
     • 解説tableタグの利用例
3. 2-3HTMLのアウトラインを理解しよう
   • 2-3-1セクションタグを挿入する
     • COLUMN正しい文書構造を形成する意味
   • 2-3-2構造を表すタグを挿入する
     • 解説HTML5の新要素とアウトライン
     • COLUMN間違いやすいHTMLの記述とHTMLの規格

CHAPTER 3CSSで装飾しよう

1. 3-1CSS の基本
   • 3-1-1CSSファイルの作成と読み込み
   • 3-1-2文字サイズを変更する
   • 3-1-3個別にCSSを指定する
     • 解説CSSの記述ルール
     • COLUMNCSSの外部ファイル化と記述場所
2. 3-2色を変更しよう
   • 3-2-1文字色を指定する
   • 3-2-2文字の背景色を指定する
   • 3-2-3色の指定方法
3. 3-3罫線と余白を調整しよう
   • 3-3-1文字に罫線をつける
     • 解説border関連プロパティ
   • 3-3-2文字の余白を調整する
     • COLUMN見出しバリエーション
   • 3-3-3区切り線の追加と余白の調整
     • 解説ボックスモデル
     • 解説padding・marginプロパティ
4. 3-4リストと表を装飾しよう
   • 3-4-1リスト記号を変更する
     • 解説list-style関連プロパティ
   • 3-4-2表を装飾する
     • 解説border-collapse・border-spacingプロパティ
     • 解説text-alignプロパティ
     • 解説font-weightプロパティ
5. 3-5さまざまなブラウザで確認してみよう
   • 3-5-1ブラウザによる表示の違い
   • 3-5-2文字のフォントを指定する
     • 解説font-familyプロパティ
   • 3-5-3文字の高さを指定する
     • 解説line-heightプロパティ
   • 3-5-4normalize.cssを読み込む

CHAPTER 4画像を編集し、HTMLで表示しよう

1. 4-1ウェブページ用の画像を作成しよう
   • 4-1-1画像サイズを理解する
   • 4-1-2切り抜きツールで画像を切り抜く
     • 解説ピクセル（画素）
     • 解説画像形式
2. 4-2画像を挿入しよう
   • 4-2-1HTMLに画像を挿入する
   • 4-2-2画像を図版として指定する
   • 4-2-3図版にキャプションを挿入する
     • COLUMN画像のスライス
     • COLUMN画像素材を入手する

CHAPTER 5共通部分の作成とレイアウト

1. 5-1ページヘッダーとページフッターを挿入しよう
   • 5-1-1サイト名とキャッチコピーを挿入する
     • 解説ブラウザ標準の文字サイズとマージン
   • 5-1-2ウェブフォントを設定する
     • 解説Google Fontsでフォントのバリエーションを指定する
     • COLUMN日本語のウェブフォント
   • 5-1-3コピーライトを挿入する
     • 解説特殊文字
   • 5-1-4ページのヘッダー・フッターとして指定する
2. 5-2ページをレイアウトしよう
   • 5-2-1ページ全体をセンター寄せにする
     • COLUMN一般的なモニターサイズとウェブページの横幅
   • 5-2-22段組みレイアウト
     • 解説time要素
     • 解説floatプロパティとclearプロパティ
     • COLUMNfloatの不具合を解決する「clearfix」の仕組み
     • COLUMNfloatの不具合を解決する「overflow:hidden;」
     • COLUMN新しい段組みレイアウト「フレキシブルボックスレイアウト」
   • 5-2-3CSSの範囲を限定する
     • 解説ブロックレベル要素とインライン要素

CHAPTER 6リンクを設定し、ナビゲーションを作り込もう

1. 6-1リンクを設定しよう
   • 6-1-1外部サイトへリンクする
     • 解説リンク先を新しいタブで開くtarget属性
   • 6-1-2リンク色を変更する
     • 解説リンクの装飾と疑似クラス
   • 6-1-3他のページへリンクする
     • 解説絶対パスと相対パスを理解しよう
2. 6-2ナビゲーションを作り込もう
   • 6-2-1ローカルナビをデザインする
     • 解説背景画像を指定する
     • COLUMNアイコン画像を作るには
   • 6-2-2グローバルナビをデザインする
     • 解説box-sizingプロパティとボックス
     • 解説CSS3とベンダープレフィックス
     • 解説n番目の要素を数えてCSSを指定する
     • 解説text-decorationプロパティ
   • 6-2-3パンくずナビを設置する
   • 6-2-4ページ内リンクを設置する
     • 解説ページ内リンクの利用例とid 属性
     • 解説インライン要素のボックスの特徴

CHAPTER 7各ページを作成しよう

1. 7-1ページを複製しよう
   • 7-1-1複製したページの記事を編集する
2. 7-2一覧ページを作ろう
   • 7-2-1一覧ページに記事と画像を挿入する
   • 7-2-2一覧ページをCSSでデザインする
     • 解説vertical-alignプロパティ
3. 7-3その他の下層をページを作ろう
   • 7-3-1下層ページを作成する
   • 7-3-2立体的なボタンを作成する
     • COLUMNCSSで作るボタンジェネレーター
4. 7-4トップページを作ろう
   • 7-4-1メインビジュアルを配置する
     • 解説背景色を半透明にする
     • 解説絶対配置と相対配置
   • 7-4-23段組みレイアウト
   • 7-4-3おしらせを配置する
5. 7-5タイトルと概要をつける
   • 7-5-1タイトルをつける
   • 7-5-2概要を設定する

CHAPTER 8サイトに動きをつけよう

1. 8-1スライドショーを作ろう
   • 8-1-1JavaScriptとjQuery
   • 8-1-2jQueryプラグインでスライドショーを作る
2. 8-2地図を配置しよう
   • 8-2-1Googleマップを埋め込もう
3. 8-3おといあわせフォームを設置しよう
   • 8-3-1Googleフォームを利用する
     • 解説ユーザの個人情報を保護するSSL
     • 解説フォーム関連のHTMLタグ

CHAPTER 9サイトの公開と仕上げ

1. 9-1サイトを公開しよう
   • 9-1-1レンタルサーバーを契約する
     • 解説ドメイン名を取得する
   • 9-1-2FTPソフトを利用する
     • 解説アクセスを制限する
2. 9-2最終チェックをしよう
   • 9-2-1バリデーションを行う
   • 9-2-2主要ブラウザで確認する
     • COLUMNさまざまなOSとブラウザで検証する
     • COLUMNスマートフォンやタブレットで確認する
   • 9-2-3古いInternet Explorerに対応する
3. 9-3SNSボタンの設置
   • 9-3-1Twitterボタンの設置
   • 9-3-2Facebookの「いいね!」ボタンの設置
4. 9-4アクセス解析を導入しよう
   • 9-4-1Googleアナリティクス