Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

ページ全体の背景と余白を指定するには

Section 3 トップページと基本スタイルの作成
最終更新日時: 2020/07/20 13:38:01
  • このエントリーをはてなブックマークに追加

既定では、ページ全体に余白が設定されています。独自に背景を設定したりするには、まず、余白をゼロにして、それぞれのセクション内に余白を設定するとよいでしょう。ここでは、ページ全体の背景色と余白を設定する方法について説明します。

はじめに

既定では、ページ全体に余白が設定されています。ブラウザーによって若干既定の余白の値は異なります。個々のページの余白を設定するには、[ファイル]メニューの[プロパティ]をクリックし、[ページのプロパティ]の[詳細設定]タブで設定が行えます。

ページのプロパティ

一方、ページ全体の背景を設定するには[ページのプロパティ]の[書式設定]タブで行えます。

ただし、それをすべてのページに設定するのは大変ですよね。

ページ全体のスタイルを定義するには、bodyタグを指定し、スタイルを作成します。

ここでは、ページ全体の余白をゼロにし、背景色を指定する方法について説明します。

bodyタグにスタイルを定義する

  1. [スタイルの適用]パネルの[新しいスタイル]をクリックするか、[書式設定]メニューの[新規スタイル]をクリックします。
  2. [セレクタ]ボックス一覧から[body]を選択します。
  3. [定義先]を[既存のスタイルシート]にし、一覧から「style.css」を選択します。
  4. [背景]タブを開きます。
  5. [background-color]ボックスの升目をクリックします。
  6. 背景色を選択して[OK]ボタンをクリックします。
  7. 背景色が設定されたことを確認したら[ボックス]タブを開きます。
  8. 下の図のように、margin と padding の値を 0px と設定します。
  9. 最後に、全体的に中央に配置させるために[ブロック]カテゴリーを開き、[text-align]の値を「center」にして、[OK]ボタンをクリックします。

[スタイルの管理]パネルで確認する

タグに定義されたスタイルは、[スタイルの管理]パネルにのみ表示されます。一覧から「body」に触れてみると、そのスタイルの定義内容が確認できます。

  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ