CSSを使用してdivやその他のコンテナにスタイルを設定し、背景色を適用する方法と要素間の間隔を調整する方法を説明します。
use-css-to-style-divs_1408x792

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

CSSスタイリングによりレイアウトの外観を微調整する
CSSスタイリングによりレイアウトの外観を微調整する

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

CSSボックスモデル
CSSボックスモデル

始める前に

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

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

プロジェクトファイルをダウンロードして保存する
最初にプロジェクトファイルをダウンロードして保存する

ページセクションにカラーを追加する

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

header#main#sidebarの各セクションの背景色background-colorを#FFFFFFに設定し、footerのbackground-colorを#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 0pxheaderセクションに設定します。これで、コンテンツと要素の間に、上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;
    ...
}

ヘッダーセクションおよびフッターセクションのマージンを追加する
ヘッダーセクションおよびフッターセクションのマージンを追加する

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

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

ブラウザーでスタイル設定されたレイアウトをプレビューする
ブラウザーでスタイル設定されたレイアウトをプレビューする
04/24/2018
このページは役に立ちましたか。