閉じる
閉じる
閉じる
  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. Illustratorグラデーションメッシュらくらく操作ガイド

    Illustratorグラデーションメッシュらくらく操作ガイド

  2. 作りながら覚えるAndroidプログラミング

    作りながら覚えるAndroidプログラミング

  3. WordPress 逆引きデザイン事典 3.x対応

    WordPress 逆引きデザイン事典 3.x対応

  4. フリーフォント パーフェクトコレクション

    誰でもデザインの腕が上がる! フリーフォント パーフェクトコレク…

  5. HTML/XHTML & スタイルシート デザイン・レイアウト逆引き便利帳

    HTML/XHTML & スタイルシート デザイン・レ…

  6. Photoshop x Illustrator プロフェッショナルズ テクスチャ・背景・壁紙デザイン

    Photoshop x Illustrator プロフェッショナ…

コメント

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

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

ページ上部へ戻る