Expression Web 4 Beginner's Guide

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

それぞれのセクションスタイルを変更するには

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

ページ全体の余白と背景色を設定したら、それぞれのセクションスタイルを変更して、ページ内のそれぞれのブロックスタイルを完成させましょう。

はじめに

これまで、とりあえずそれぞれのセクションの空のスタイルを作成し、ページ全体の余白と背景色を指定しました。しかし、それぞれのセクションのDIVの背景色を指定しない限り、ページ全体の背景色と同じになってしまいます。

ここでは、IDスタイルに白色の背景色を設定し、ヘッダーやフッター内の要素を左寄せにする方法について説明します。

ヘッダーセクションのスタイルを変更する

  1. [スタイルの適用]または[スタイルの管理]パネルから「#header]を右クリックして、ショートカットメニューより[スタイルの変更]をクリックします。
  2. [ブロック]タブを開き、[text-align]を「left」にします。
  3. [背景]タブを開き、[background-color]ボックス一覧から白を選択して[OK]ボタンをクリックします。
#header {text-align: left;background-color: #FFF;}

フッターのスタイルを変更する

  1. [スタイルの適用]または[スタイルの管理]パネルから「#footer]を右クリックして、ショートカットメニューより[スタイルの変更]をクリックします。
  2. [背景]タブを開き、[background-color]ボックス一覧から白を選択します。
  3. [レイアウト]タブを開き、[clear]ボックス一覧から[both]を選択します。
  4. [ボックス]タブを開き、[padding]の値を5pxにして[OK]ボタンをクリックします。
#footer {background-color: #FFF;clear: both;padding: 5px;}

コンテンツとサイドバーエリアのスタイルを変更する

  1. [スタイルの適用]パネルから[#page_content]または[#sidebar]を右クリックして、ショートカットメニューより[スタイルの変更]を選択します。
  2. [背景]タブを開き、背景色を白にして[OK]ボタンをクリックします。

ヘッダー内の配置を操作できるようにする

デスクトップ表示にしたときに、幅固定ボックスで全体を中央に配置されていますが、その中の要素は左寄せになっています。しかし、その中において「右上」等、パーツを相対配置したい場合は、positionプロパティをrelativeにします。ただし、基本スタイルには幅指定をする必要はありません。ここでは、container というクラススタイルを挿入し、適用する方法について説明します。

  1. headerのDIV内にDIVを挿入します。
  2. [タグプロパティ]パネルの[class]属性に「container」と入力します。
  3. [スタイルの適用]パネルの[新しいスタイル]をクリックして、[新しいスタイル]ダイアログボックスを表示します。
  4. [セレクタ]ボックスに「.container」が入力されていることを確認します。
  5. [定義先]には[既存のスタイルシート]の[style.css]を選択します。
  6. [配置]タブを開き、[position]プロパティを[relative]にします。
  7. [ボックス]タブを開き、[margin]の値を[auto]にして[OK]ボタンをクリックします。
  8. containerクラススタイルが作成、適用されました。

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

コメント

▲このページのトップへ