ページ全体の背景と余白を指定するには
Section 3 トップページと基本スタイルの作成
最終更新日時:
2020/07/20 13:38:01
既定では、ページ全体に余白が設定されています。独自に背景を設定したりするには、まず、余白をゼロにして、それぞれのセクション内に余白を設定するとよいでしょう。ここでは、ページ全体の背景色と余白を設定する方法について説明します。
はじめに
既定では、ページ全体に余白が設定されています。ブラウザーによって若干既定の余白の値は異なります。個々のページの余白を設定するには、[ファイル]メニューの[プロパティ]をクリックし、[ページのプロパティ]の[詳細設定]タブで設定が行えます。
一方、ページ全体の背景を設定するには[ページのプロパティ]の[書式設定]タブで行えます。
ただし、それをすべてのページに設定するのは大変ですよね。
ページ全体のスタイルを定義するには、bodyタグを指定し、スタイルを作成します。
ここでは、ページ全体の余白をゼロにし、背景色を指定する方法について説明します。
bodyタグにスタイルを定義する
- [スタイルの適用]パネルの[新しいスタイル]をクリックするか、[書式設定]メニューの[新規スタイル]をクリックします。
- [セレクタ]ボックス一覧から[body]を選択します。
- [定義先]を[既存のスタイルシート]にし、一覧から「style.css」を選択します。
- [背景]タブを開きます。
- [background-color]ボックスの升目をクリックします。
- 背景色を選択して[OK]ボタンをクリックします。
- 背景色が設定されたことを確認したら[ボックス]タブを開きます。
- 下の図のように、margin と padding の値を 0px と設定します。
-
最後に、全体的に中央に配置させるために[ブロック]カテゴリーを開き、[text-align]の値を「center」にして、[OK]ボタンをクリックします。
[スタイルの管理]パネルで確認する
タグに定義されたスタイルは、[スタイルの管理]パネルにのみ表示されます。一覧から「body」に触れてみると、そのスタイルの定義内容が確認できます。