CSSによるページ要素のスタイル設定

CSSを使用すると、HTML要素にカラーを追加し、位置を調整するなど、様々なスタイルを設定できます。CSSを追加して要素ごとに外観を詳細に調整し、体系的に整ったレイアウトにすることで、ページ全体のビジュアルデザインを改善します。

マージンとパディングの意味については、次のCSSボックスモデルの図をご覧ください。この標準モデルでは、CSSのレイアウトプロパティにより各HTML要素がどのようにスタイル設定されるかを示しています。

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでstyle_containers_practice.htmlを開きます。

ワークスペースの上部にあるstyle_containers_practice.cssをクリックして、分割ビューに切り替えます。

headerセレクターに移動します。この要素のカラーを変更するには、background-colorプロパティを追加します。background-colorプロパティにコロンを入力すると、コンテキストメニューが表示されます。メニューからカラーピッカーを選択します。カラーピッカーでセレクターを動かして目的のカラーを見つけるか、直接16進数を入力します。

header、#main、#sidebarの各セクションの背景色を#FFFFFFに設定し、footerの背景色を#2F4666に設定します。

CSS

header {
    background-color:#FFFFFF;
    ...
}
#main {
    background-color:#FFFFFF;
    ...
}
#sidebar {
    background-color:#FFFFFF;
    ...
}
footer {
    background-color:#2F4666;
    ...
} 

セクションの高さを指定するには、heightプロパティを追加します。#mainと#sidebarセレクターで、高さを250pxに設定します。

CSS

#main {
    ...
    height:250px;
    ...
}
#sidebar {
    ...
    height:250px;
    ...
} 

paddingプロパティを追加すると、コンテンツの周囲と要素の境界の間に余白ができます。#mainと#sidebarセクションの余白を25pxに設定します。すると、コンテンツの全周に25pxの余白が追加されます。

CSS

#main {
    ...
    padding:25px;
    ...
}
#sidebar {
    ...
    padding:25px;
    ...
} 

上下左右のパディングを個別に変更することもできます。paddingプロパティとして1px 0px 1px 0pxをheaderセクションに設定します。これで、コンテンツと要素の間に、上1px、右0px、下1px、左0pxの余白が追加されます。

footerセクションのpaddingプロパティには15px 0px 15px 0pxを設定します。

CSS

header {
    ...
    padding:1px 0px 1px 0px;
    ...
}
footer {
    ...
    padding:15px 0px 15px 0px;
    ...
}

marginプロパティを追加すると、要素の境界の周囲に透明の空間ができます。#mainセクションのマージンを10px 50px 20px 0pxに設定します。これで、要素の周囲に、上10px、右50px、下20px、左0pxのマージンが追加されます。

#sidebarセクションのマージンを10px 0px 20px 50pxに設定します。

CSS

#main {
    ...
    margin:10px 50px 20px 0px;
    ...
}
#sidebar {
    ...
    margin:10px 0px 20px 50px;
    ...
}

marginプロパティを残りの要素にも追加して、レイアウトを仕上げます。

headerセクションのマージンを10px 50px 20px 50pxに、footerセクションのマージンを0px 50px 0px 50pxに設定します。

CSS

header {
    ...
    margin:10px 50px 20px 50px;
    ...
}
footer {
    ...
    margin:0px 50px 0px 50px;
    ...
}

「ブラウザーでプレビュー」をクリックしてブラウザーを選択し、スタイル設定されたレイアウトを確認します。

ファイルを保存してから、変更の反映を確認します。