XHTML/HTML + CSS SUPER RECIPE BOOK

レイアウト、ヘッダー、メニュー、テキスト、画像、テーブル、フォーム、フッター、レシピとカテゴリーに分けてテクニックを解説しています。

CHAPTER1　LAYOUT　レイアウト

• 1段組みのレイアウトを作成する
• 2段組みの固定レイアウトを作成する
• 3段組みの固定レイアウトを作成する
• 2段組みのリキッドレイアウトを作成する
• リキッドな3段組みのレイアウトを作成する
• サイドバーを縦に長く表示する
• レイアウトを枠で囲んで表示する
• 罫線で区切って表示する

CHAPTER2　HEADER　ヘッダー

• タイトルを表示する
• タイトルを画像で表示する
• ヘッダーをバーの形にデザインする
• ヘッダーに画像を表示する
• ヘッダーをグラデーションでデザインする
• ヘッダーにワンポイントで画像を入れる
• タイトルの下に画像を大きく表示する
• タイトルの右側に検索フォームを表示する

CHAPTER3　BACK　背景

• パターンを敷き詰めて背景にする
• グラデーションで背景を表示する
• ワンポイントで画像を表示する
• 1枚の大きな画像を表示する

CHAPTER4　MENU　メニュー

• リスト形式でメニューを表示する
• リストマークを画像で表示する
• 階層構造のメニューをデザインする
• リンクを罫線で区切って表示する（1）
• リンクを罫線で区切って表示する（2）
• リンクを画像で装飾する
• リンクの文字も画像で表示する
• 表示中のページがわかるようにする
• メニューに見出しをつけて表示する
• メニューを枠に囲んで表示する
• メニューを角丸の枠で囲んで表示する
• リンクを横に並べて表示する
• リンクを罫線で区切って表示する（1）
• リンクを罫線で区切って表示する（2）
• バーの形で表示する
• リンクとバーを画像で表示する
• リンクの文字も画像で表示する
• タブの形で表示する

CHAPTER5　TEXT　テキスト

• 見出しと文章を表示する
• 見出しをバーの形で表示する
• 見出しを画像で装飾する
• 見出しの下に区切り線を表示する
• 区切り線を画像で表示する
• 見出しにマークをつけて表示する
• 見出しを画像で表示する
• 見出しに付加情報を表示する
• 見出しと文章を枠で囲んで表示する
• 枠を画像で作成する

CHAPTER6　IMAGE　画像

• 画像を中央に配置する
• 画像の右側に文章を回り込ませて表示する
• 画像の左側に文章を回り込ませて表示する
• 画像を枠で囲んで表示する
• 画像にキャプションをつける
• 複数の画像を並べて表示する
• キャプションつきの画像を並べて表示する
• 画像をトリミングして表示する

CHAPTER7　TABLE　テーブル

• テーブル（表組み）を作成する
• テーブルの罫線をカスタマイズする
• テーブルにキャプションをつけて表示する

CHAPTER8　FORM　フォーム

• 投稿フォームを作成する
• 項目名をテキストボックスの上に表示する
• 投稿フォームをテーブルで表示する
• テキストボックスや送信ボタンを画像で装飾する

CHAPTER9　FOOTER　フッター

• フッターの上を罫線で区切る
• フッターをバーの形にデザインする
• フッターを画像で装飾する
• フッターを2段組みで表示する

CHAPTER10　RECIPE　レシピ

• Webページを作成する
• 基本的な2段組みのデザイン
• ページに大きな画像を表示するデザイン
• パーツを罫線で区切ったデザイン
• パーツを枠で囲んだデザイン
• 装飾した枠で囲んだデザイン
• 横幅が変わるページのデザイン
• ヘッダー画像を大きく入れたデザイン
• タブナビゲーションンを入れたデザイン