トップページ作成　～ コンテナに背景色 ～

ページの背景に画像や色を設定したが、body 要素に設定した背景画像がその子要素のレイアウトコンテナにもその背景が表示されます。これはレイアウトコンテナの背景色の初期値が 透明 transparent となっているためです。

ページ（body 要素）に背景を設定した後で、レイアウトコンテナ内に記述した内容が読みづらいときには、レイアウトコンテナの背景色を読みやすい色に変えておきましょう。

レイアウトコンテナに背景色を設定する

全体を含むレイアウトコンテナのスタイルを編集する

• 包括レイアウトコンテナ main のスタイルを編集する
  • 
  • ➊ページ top.html を開き、文字または画像がある箇所をクリックする。➋［スタイルエクスプレス］ビューの［カーソル位置］タブで、全体を囲むレイアウトコンテナ div id="main" を右クリックする。既にスタイルが設定されているので、［ID（#main）のスタイルを編集］を選択する。［スタイルの設定］ダイアログが表示される。

➊ ページtop.htmlを開き、文字または画像がある箇所をクリックし、［スタイルエクスプレス］ビューの［カーソル位置］パネルを表示します。

➋ 全体を囲むレイアウトコンテナ div id="main" を右クリックします。

➌［ID（#main）のスタイルを編集］をクリックします。

• ▶［スタイルの設定］ダイアログが表示されます。

背景色に使用する色を設定する

➍［スタイルの設定］ダイアログで［色と背景］タブを選択します。

• ［スタイルの設定］ダイアログの［色と背景］タブで背景色の選択
  • 
  • ［スタイルの設定］ダイアログで、❹［色と背景］タブを選択する。❺［背景色］の▼をクリックする。❻［白］を選択する。

➎［背景色］の▼をクリックします。

➏［白］をクリックする。

• 背景色には、選択した白色が表示されます。
  • 
  • 背景色は、選択した［白］が表示される。❼［OK］ボタンをクリックする。設定したスタイルが反映され、レイアウトボックスに背景が設定される。

➐［OK］ボタンをクリックします。

• ▶設定されたスタイルが反映され、背景が設定されます。

設定したスタイルが反映されます

• 背景を確認する
  • 
  • ［ページ編集］で表示すると、背景が設定され、包括レイアウトコンテナの背景が白となる。

➑［上書き保存］します。

スタイルエクスプレスビューで確認

• 設定されたスタイルを、［スタイルエクスプレス］ビューで確認してみる。
  • 
  • div id="main" に、背景色 background-color に白色 white の値が設定されているのが分かる。その場所は styles01.css ファイルであることも確認できる。

設定された HTML/CSS

• HTML/CSS を表示してスタイルの設定を確認する。

• 解説
  • ID #main に、background-color プロパティで白色を指定している。
  • 詳細は background-color を参照

次にコンテナに余白に進みます。