てがろぐで個人サイトを作るための基礎知識

CSSの基本プロパティその2(幅・高さ、余白)

今回の記事は幅と高さ、余白を指定するプロパティについてのメモです。よろしくお願いします。

幅・高さ関係のプロパティ
width
要素の幅を設定するプロパティです。
値の単位はpx,em,rem,%など。
数値かautoで指定します。
autoで指定した場合は親要素の幅いっぱいに広がります。

height
要素の高さを設定するプロパティです。
値の単位はpx,em,rem,%など。
数値かautoで指定します。
autoで指定した場合は親要素の高さいっぱいに広がります。

余白関係のプロパティ
margin
要素の周りに余白を加えるプロパティです。
値の単位はpx,em,rem,%など。
数値かautoで指定します。
autoで指定したときは関連プロパティの値によって自動的に決定します。
margin-top,margin-bottom,margin-left,margin-rightでそれぞれ1辺ずつ指定できるほか、marginプロパティで全ての辺を一斉に指定することもできます。

padding
要素の内側に余白を加えるプロパティです。
値の単位はpx,em,rem,%など。
数値かautoで指定します。
autoで指定したときは関連プロパティの値によって自動的に決定します。
padding-top,padding-bottom,padding-left,padding-rightでそれぞれ1辺ずつ指定できるほか、paddingプロパティで全ての辺を一斉に指定することもできます。

ここまでで要素の大きさや余白を決めるプロパティを解説してきました。これらのプロパティはサイトの見やすさに直結する重要なプロパティです。しっかり活用できると見やすいサイトに仕上がります。

今回の記事は短いですが、区切りの関係でここで終わりです。
それでは、また次の記事で。