それぞれのセクションスタイルを変更するには
Section 3 トップページと基本スタイルの作成
最終更新日時:
2020/07/20 13:38:01
ページ全体の余白と背景色を設定したら、それぞれのセクションスタイルを変更して、ページ内のそれぞれのブロックスタイルを完成させましょう。
はじめに
これまで、とりあえずそれぞれのセクションの空のスタイルを作成し、ページ全体の余白と背景色を指定しました。しかし、それぞれのセクションのDIVの背景色を指定しない限り、ページ全体の背景色と同じになってしまいます。
ここでは、IDスタイルに白色の背景色を設定し、ヘッダーやフッター内の要素を左寄せにする方法について説明します。
ヘッダーセクションのスタイルを変更する
-
[スタイルの適用]または[スタイルの管理]パネルから「#header]を右クリックして、ショートカットメニューより[スタイルの変更]をクリックします。
- [ブロック]タブを開き、[text-align]を「left」にします。
- [背景]タブを開き、[background-color]ボックス一覧から白を選択して[OK]ボタンをクリックします。
#header {text-align: left;background-color: #FFF;}
フッターのスタイルを変更する
- [スタイルの適用]または[スタイルの管理]パネルから「#footer]を右クリックして、ショートカットメニューより[スタイルの変更]をクリックします。
- [背景]タブを開き、[background-color]ボックス一覧から白を選択します。
- [レイアウト]タブを開き、[clear]ボックス一覧から[both]を選択します。
- [ボックス]タブを開き、[padding]の値を5pxにして[OK]ボタンをクリックします。
#footer {background-color: #FFF;clear: both;padding: 5px;}
コンテンツとサイドバーエリアのスタイルを変更する
- [スタイルの適用]パネルから[#page_content]または[#sidebar]を右クリックして、ショートカットメニューより[スタイルの変更]を選択します。
- [背景]タブを開き、背景色を白にして[OK]ボタンをクリックします。
ヘッダー内の配置を操作できるようにする
デスクトップ表示にしたときに、幅固定ボックスで全体を中央に配置されていますが、その中の要素は左寄せになっています。しかし、その中において「右上」等、パーツを相対配置したい場合は、positionプロパティをrelativeにします。ただし、基本スタイルには幅指定をする必要はありません。ここでは、container というクラススタイルを挿入し、適用する方法について説明します。
- headerのDIV内にDIVを挿入します。
- [タグプロパティ]パネルの[class]属性に「container」と入力します。
- [スタイルの適用]パネルの[新しいスタイル]をクリックして、[新しいスタイル]ダイアログボックスを表示します。
- [セレクタ]ボックスに「.container」が入力されていることを確認します。
- [定義先]には[既存のスタイルシート]の[style.css]を選択します。
- [配置]タブを開き、[position]プロパティを[relative]にします。
- [ボックス]タブを開き、[margin]の値を[auto]にして[OK]ボタンをクリックします。
- containerクラススタイルが作成、適用されました。