XHTML/HTML + CSS SUPER RECIPE BOOK


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段組みのデザイン
  • ページに大きな画像を表示するデザイン
  • パーツを罫線で区切ったデザイン
  • パーツを枠で囲んだデザイン
  • 装飾した枠で囲んだデザイン
  • 横幅が変わるページのデザイン
  • ヘッダー画像を大きく入れたデザイン
  • タブナビゲーションンを入れたデザイン

 


« »