閉じる
閉じる
閉じる
  1. 新世代Web制作テクニック総特集 スマートフォン ソーシャルメディア …
  2. 本格ビジネスサイトを作りながら学ぶWordPressの教科書
  3. スマートフォンで副収入を稼ぐ本 毎日5分で毎月12万円を稼ぐ!魅惑の副…
  4. パソコン教室で受講料70万円で得た知識
  5. アフィリエイトの達人が教える! 月収別成功体験
  6. ポイントメール受信で稼ぐ わくわくメール
  7. メール受信でお金を稼ぐ GetMoney!
  8. チューニングDIYハンドブック Vol.2
  9. WordPress 3.x デザイン&カスタマイズ スタイル…
  10. Webサイト制作 最新トレンドの傾向と対策 HTML5・スマートフォン…
閉じる

TAKUMI1202.COM

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

 

関連記事

  1. Photoshopデザインメソッド

    Photoshopデザインメソッド

  2. facebookデザインブック

    facebookデザインブック

  3. ソーシャルなサイト構築のためのWeb APIコーディング

    ソーシャルなサイト構築のためのWeb APIコーディング

  4. WordPressデザインブック 3.x対応

    WordPressデザインブック 3.x対応

  5. jQueryデザインブック 仕事で絶対に使うプロのテクニック

    jQueryデザインブック 仕事で絶対に使うプロのテクニック

  6. MovableTypeレッスンブック

    Movable Typeレッスンブック MT5対応

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る