www.wanichan.com

Chapter 3 CSSによるレイアウト

Expression Webでは洗練されたスタイルシート(CSS)を効率的に作成できます。使われなくなったCSSの削除、CSSファイルへの移動も簡単に行えます。

Contents

1. デザインビューモードで簡単スタイルの作成

  1. ツールボタンで書式設定する
  2. スタイル適用モードの切り替え
  3. 使用されなくなったスタイルの最適化
  4. スタイルの情報を素早く検索

2. CSSファイルへのエクスポート

  1. 外部CSSファイルの作成
  2. 外部CSSファイルへのリンク
  3. スタイルの外部CSSファイルへの移動
  4. 移動されたCSSスタイルの確認

3. 新しいスタイルの作成と適用

  1. 新しいスタイルの作成
  2. 作成されたスタイルの適用

4. スタイルの変更

  1. スタイルを編集する
  2. クラス名の変更

5. スタイルを活用したCSSの設定

  1. 出力されるすべてのCSSを(クラス/ルール)スタイルに設定する
  2. スタイルが設定されていないWebページの作成
  3. 見出しスタイルの設定
  4. 本文のリードのスタイルの設定
  5. 本文のコンテンツのスタイルの設定

6. ナビゲーションをデザインする

  1. ナビゲーションボックスのスタイルを設定する
  2. ナビゲーションのリストスタイルをデザインする
  3. ナビゲーション内リストの各項目のスタイルを設定する

7. 背景色、背景イメージの設定

  1. Webページの背景色の設定
  2. Webページの背景画像の設定
  3. CSSスタイルの背景色の設定
  4. 背景画像の配置のカスタマイズ
  5. 背景画像の背景色と同じ背景色に統一するには?

8. DIVの挿入

  1. ツールボックスからDIVを挿入
  2. DIVの移動

9. ナビゲーション内のリンクのスタイルを設定

  1. ナビゲーション内のリンクのスタイルを設定する
  2. マウスに触れたときの背景色を変更する
  3. ブラウザでのナビゲーションの表示がおかしい場合は?

10. 絶対・相対配置ボックスの作成

  1. 相対配置ボックスの作成
  2. マージンの設定
  3. ボックスの罫線と間隔の設定

11. 見出しや段落のデザイン設定

  1. 見出しに太さの異なる罫線をつける
  2. 見出しに背景色をつける
  3. 段落に背景画像を設定する

12. テンプレートを利用した段組レイアウト

  1. CSSレイアウトページの新規作成
  2. 本文コンテンツの間隔(padding)の設定
  3. ファイルの保存

Extra Contents

CSSレイアウトを一から作ってみよう

  1. DIVボックスをページに挿入してみよう
  2. 外部CSSファイルを作成してリンクしてみよう
  3. CSSファイルに新しいスタイルを作成してみよう
  4. DIVボックスにスタイルを適用してみよう
  5. 左の目次よりコンテンツを先に記述したい
  6. 横並びのナビゲーションリンクリストを作るには?
  7. 左サイドバーのリンクリストの先頭記号を画像にするには?
  8. 印刷エリアを制御したい
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ