2021/02/13

CSSでのサイズ【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルに設定しています。

• facebook
• Tweet
• Read Later