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

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

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

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

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

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

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

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

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

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

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