作りながら学ぶ HTML/CSSデザインの教科書

目次

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アナリティクス