01　HTML の基礎知識

• 1 　HTMLはWebページの内容を記すための言語
• 2 　HTMLの基本形
• 3 　タグの書式と各部の名称・役割
• 4 　終了タグがない「空要素」
• 5 　コメント文
• 6 　要素と要素の関係
• 7 　HTMLのバージョン

02　新規ファイルの作成と保存

• 1　HTMLファイルを作成する

03　HTML 記述のポイント

• 1 　HTML ファイル、CSSファイルの文字コード方式はUTF-8にする
• 2 　すべて半角英数字で、タグは小文字で入力する
• 3 　改行、インデント

04　HTML を書いてみよう

• 1 　基本のHTMLを記述する
• 2 　メタデータを記述する
• 3 　見出し
• 4 　段落
• 5 　非序列リスト、序列リスト
• 6 　画像の挿入
• 7 　外部サイトへリンクを張る

01　CSS の基礎知識

• 1 　CSS でできること
• 2 　デフォルトのスタイルシート

02　CSS の仕組み、基本的な書式、各部の名称

• 1 　CSS の基本的な仕組み
• 2 　CSS の書式と各部の名称・役割
• 3 　その他の書式

03　CSS を記述する場所

• 1 　CSS を記述する場所は決められている

04　CSSファイルを作成してHTMLファイルにリンクする

• 1 　専用のCSS ファイルを作成する
• 2 　HTML ファイルからCSS ファイルにリンクする

05　CSS を記述する

• 1 　style.css を編集する

01　HTML から要素を選択する「セレクタ」

• 1 　セレクタの「パターン」

02　ページ全体のフォント、テキストを調整する

• 1 　ページ全体のフォントを変更する

03　さまざまなセレクタを使用する

• 1 　一部テキストのフォントサイズを変更する（1）
• 2 　一部テキストのフォントサイズを変更する（2）
• 3 　行の高さを調整する 78

04　継承とより高度なフォントの扱い

• 1 　親要素に設定したテキスト色を継承させる
• 2 　CSS ルールを上書きする
• 3 　一部のテキストを明朝体にする
• 4 　Webフォントを使用する
• 5 　装飾的なCSS プロパティと単位

01　ボックスとボックスモデル

• 1 　ボックスとは 〜ブロックレベル要素とインラインレベル要素〜
• 2 　CSS のボックスモデル

02　背景色を変更する

• 1 　ページ全体の背景色を変更する

03　背景に画像を使用する

• 1 　ヘッダーに背景画像を適用する
• 2 　フッターに背景画像を適用する

04　ボックスモデルを理解しよう

• 1 　見出しの上下マージンを調整する
• 2 　見出しのパディングを調整する
• 3 　テキストを右揃えにする

05　サイドバーの表示をカスタマイズする

• 1 　ブレットを消してボーダーラインを引く

06　ショートハンドとauto 値

• 1 　ページ全体をウィンドウの中央に表示する
• 2 　最後にちょっと飾りつけ

01　CSSが適用される優先順位 〜カスケードと詳細度〜

• 1 　カスケードと詳細度

02　見出しの背景を変更する

• 1 　カスケードを利用してCSS プロパティを上書きする

03　ボックスの装飾とマージンの畳み込み

• 1 　ボックスを装飾する

04　テーブルの基本的なCSS をマスターする

• 1 　テーブルに罫線を引く
• 2 　テーブルのマージンとパディング
• 3 　1 列目、3列目が改行しないようにする
• 4 　列の行揃えを変更する
• 5 　セルに背景画像を指定する
• 6 　奇数行に背景色を付ける

01　通常のHTML 配置とフロート、ポジション

• 1 　通常のHTML 配置 155
• 2 　フロート 156
• 3 　ポジション 158

02　全体のHTML 構造を確認する

03　ページ全体に適用されるCSS を記述する

• 1 　デフォルトのマージンをゼロにする

04　ヘッダーを作成する

• 1 　ヘッダーのサイズを固定する
• 2 　ロゴ画像をポジションで配置する
• 3 「お問い合わせ」もポジションで配置する

05　ウィンドウ幅いっぱいに広がる背景画像を適用する

• 1 　ヘッダーの親要素に背景画像を適用する

06　ヘッダーを仕上げる

• 1 　ボックスの下辺だけ角を丸くする

07　ナビゲーションを作成する

• 1 　ナビゲーションをウィンドウの中央に配置する
• 2 　<li>を横に並べる
• 3 　リンクをボタンのように見せかける
• 4 　ナビゲーションのデザインを仕上げる

01　フロートとページレイアウト

• 1 　2 コラムレイアウトの利点とページのサイズ

02　キービジュアルをウィンドウの中央に配置する

• 1　キービジュアルをウィンドウの中央に配置する

03　メイン部分のレイアウトを作成する

• 1 　メイン部分の横幅を固定する
• 2 　2 コラムにする
• 3 　フロートを解除する（1）
• 4 　フロートを解除する（2）
• 5 「お知らせ」の画像にテキストを回り込ませる
• 6 「お知らせ」のデザインを仕上げる
• 7 　バナー（サイドバー）のCSS を調整する

04　フッター部分のレイアウトを作成する

• 1　完成図を見ながらHTMLとCSS を書いてみよう