CSSでのサイズ【現役エンジニアが解説】
今回は、CSSでのサイズについて、基本のサイズと最小、最大に分け、簡単に解説していきます。
widthとheight(基本のサイズ)
基本のサイズはwidthとheightの2つのプロパティで指定します。
widthとheightのプロパティの値にはpxに加え、%等の単位も使用されます。
.hoge{ width:80%; height:20%; }
上記のコードでは、hogeのクラスの要素の幅を親要素の80%、高さを親要素の20%にしています。
min-widthとmin-height(最小)
最小サイズはmin-widthとmin-heightの2つのプロパティで決められます。
これらのプロパティの値の単位は様々なものがありますが、pxが最もよく使われています。
.hoge{ min-width:200px; min-height:100px; }
上記のコードでは、hogeというクラスの要素の最小の幅を200ピクセル、最小の高さを100ピクセルにしています。
max-widthとmax-heigth(最大)
max-widthとmax-heightの2つのプロパティで最大サイズを決めることが可能です。
これら2つのプロパティの値の単位もやはり、固定のものが多く、pxが最もよく使われています。
.hoge{ max-width:600px; max-height:300px; }
上記のコードでは、hogeというクラスを持つ要素の最大の幅を600ピクセル、最大の高さを300ピクセルに設定しています。