CSS入門

3章.CSSで表示枠の設定をする

この記事では、CSSにおける表示領域の設定について説明していきます。

marginについて

HTML上で何かオブジェクトを配置した場合そこには見えない長方形でオブジェクトが囲まれていると思ってください。

上記(青色の部分)のようにオブジェクトは見えない長方形に囲まれている

その長方形の中で、オブジェクトの周りを囲う長方形とほかのオブジェクトの周りを囲う長方形の間のスペースをどれくらい確保するのか、その空間の設定をmarginというプロパティを調整することで実現できます。

つまりオブジェクトの外側の領域確保の設定が可能になります。

.test {
  margin: 30px;
}

表示領域の最大値と最小値の設定

max-width,win-widthを使用することで表示領域の最大値と最小値を設定することが可能です。

.test {
  max-width: 100px;
  width: 50px;
}

オブジェクトの非表示

visibilityをhiddenに設定することで、サイト構造を変えることなく対象のオブジェクトのみを非表示にすることができます。


.test{
  visibility: hidden;
}