【備忘録】新しい値の指定方法

2025年11月13日

値を動的に算出するための便利な関数

min()

画面幅に応じて動的に変化する値に対してあらかじめ最大値を設定できます

/*親要素の幅５０％かつ６００px以内で伸縮*/
width: min(50%,600px);

/*以下と同じことです*/
width: 50%;
max-width: 600px;

max-marginやmin-paddingといった最大値・最小値を指定するプロパティはありませんが、これならmarginやpaddingにも最大値・最小値が指定できます。

min()と同様に、画面幅に応じて動的に変化する値に対してあらかじめ最小値を設定できます

/*親要素の幅５０％かつ６００px以上で伸縮*/
width: max(50%,600px);

/*以下と同じことです*/
width: 50%;
min-width: 600px;

画面幅に応じて動的に変化する値に最大値と最小値を設定できます

/*親要素の幅５０％かつ３００px以上１０００px以下で伸縮*/
width: clamp(300px,50%,1000px);

/*以下と同じことです*/
width: 50%;
min-width: 300px;
max-width: 1000px;

画面サイズに合わせて変動するvwを使いつつ、最大値と最小値を指定してレイアウトを保つなどの使い方が可能です。

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

事業で使うサイトを企業に依頼し作成したものの、全く機能せず自分で作り直したのがきっかけでウェブの世界に飛び込む。
Wordpress、コーディング、マーケティングなどウェブlogにアウトプットすることで誰かの問題解決につながれば嬉しいです。