先日仕事でいつものようにホームページを作っていたら、とある画像が、スマートフォンで小さくならなくて、困ってしまいました。
レスポンシブデザインで、@media（メディアクエリ）を使って、スマートフォンの時に、
widthを100%にセットしていたはずなのに・・・何故？！
原因は、直前の設定で、min-width:800pxというpcで見た時に最小のサイズ設定を入れていたため、サイズが小さくなっても、
min-widthの設定が残っていて、
400pxほどのサイズをwidth:100%とセットしても、min-widthの効力で800pxの表示がされていたという事なんですね。
min-widthやmax-widthは、通常のwidthよりも強くないと、設定する意味がないですからね、こりゃあ当然といえば
当然の凡ミスでした。
でも、毎回、以下のように３パターンのセットをするのがめんどくさいな〜。数行書くのって何となく無駄に感じるな〜と思っていたところ、
clamp()という命令があることを知り、
もはやサイズ指定ってこの命令だけ使うだけでいいじゃない！とまで思うようになりました。
（特に画像データなどのメディア表示はこの指定必須かも）
clamp()の使い方
通常の書き方
通常の画像表示とそこに書くスタイルシートサンプル
<meta name="viewport" content="width=device-width,initial-scale=1">
<img class='sample' src='child.jpg'/>
<style>
img.sample{
width:100%;
max-width:400px;
min-width:300px;
}
</style>
パソコンで見ている場合であれば、ブラウザのサイズを変えると、画像のminとmaxが確認できます。
clump()での書き方
上記のコードをclamp()記述すると、次のように書けるんですね。
<style>
img.sample{
width: clamp(300px, 100%, 600px);
}
</style>
width : clamp(min , normal , max)
この書き方１行で適応できるようになります。
こりゃ便利だ！
リファレンスサイトなどの情報
参考 :
https://developer.mozilla.org/ja/docs/Web/CSS/clamp
使えるブラウザ情報
案の定、IEは使えませんが、もう気にしなくてもいいですよね？
あと、opera miniが使えないんですが、これも除外してもいいかもですね。
主要ブラウザで見てください的な記述をすれば、事足りるでしょう。
どうしても未対応ブラウザへの対応も必要であれば、
ハック記述してご対応ください。
参考 :
ブラウザやOSごとにCSSを適応させるCSSハックいろいろ
余談
今回紹介したclamp()という機能、なんとfont-sizeなど、サイズ指定できる箇所のどこでも使えてしまう優れものなんです。
サイズ記述の定番として下記慣れておくといいかもしれませんね。
ちなみに、Javascriptでのスタイル記述は以下のように書けば適用できます。
document.querySelector('img.sample').style.setProperty('width', 'clamp(300px, 100%, 600px)' , null);
あ、そうそう、minと、maxの矛盾記述には、くれぐれも気をつけてくださいね。
お試しあれ！
