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

はじめに

これまで、とりあえずそれぞれのセクションの空のスタイルを作成し、ページ全体の余白と背景色を指定しました。しかし、それぞれのセクションの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クラススタイルが作成、適用されました。
   

問題は解決しましたか？

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

▲このページのトップへ