カテゴリー: Uncategorized

12px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

13px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

14px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

15px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

16px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

17px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

18px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

19px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

20px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

22px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとな

24px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

28px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

32px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

36px

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）

min(),max(),clamp()について

min(),max(),clamp()はプロパティに設定する値を自動で計算してくれるCSSの数学関数です。
calc()も同じく数学関数。

min()とは

カッコの中に2種類の値を設定し、どちらか小さいほうの値が適用されます。（＝最大値を設定できる）

minなのに最大値？意味が分からないと思いますが、これまでmax-widthとwidhで設定していたものを min() の一行で書けます。

box {
  width: 50%;
  max-width: 700px;
}

box {
  width: min(50%, 700px);
}

上の場合だと、ブラウザ幅が1000pxのとき50%の幅は500pxとなり700pxより小さいため、50％の値が適用されます。
ブラウザ幅が1400px以上になると50%の幅が700px以上になるため、値の小さい700pxの方が適用されます。

max()とは

カッコの中に2種類の値を設定し、どちらか大きいほうの値が適用されます。（＝最小値を設定できる）

これはwidthとmin-widthを使っていた時と同じイメージです。

box {
  width: 50%;
  min-width: 300px;
}

box {
  width: max(50%, 300px);
}

上の場合だと、ブラウザ幅が600px以下の時は300pxが適用され、601px以上のとき50％の幅が300pxより大きくなるため、50%が適用されます。

clamp()とは

上記のmin(),max()を合わせたものです。これはカッコの中に「最小値」「推奨値」「最大値」の3つの値を入れるので、イメージしやすいと思います。

box {
  width: clamp(300px, 50%, 900px);
}

下のSAMPLEページに三種類のデモが置いてあります。ブラウザ幅を変えて確認してみてください。

つかいどころ

上記の説明では分かりやすいようwidthの値として使用しましたが、font-sizeやmargin、paddingの値としても使えます。

safariで効かないときは

safariにも対応していますが、うまく動かないときは以下の記述を追加してみてください。

* {
    min-height: 0vw;
}

設定する値に演算子が使える

上記の例で「％」で設定していた値には「vw」や演算子も使えます。ただし流動値でないといけないの固定される値は設定できません。

block {
  width: min(100vw - 50px, 700px);
}