clampのCSSの使い方(レスポンシブWebデザイン可変レイアウト)

プログラミング学習

レスポンシブWebデザインのCSSの覚書です。clamp編です。

min-widthとclampのminの違いは?

width: 30vw;
min-width: 300px;
height: 30vw;
min-height: 300px;

小さい方だけ制御したい場合は上記でもいいんですけど、今回は最小と最大を制御するclampを使います。min-widthとmax-widthだと行数が多くなります。

テストしたところ、たぶん単純に置き換えと考えて問題なさそうです。3行が1行でかけるという。

スポンサーリンク

clampのCSSの使い方

メディアクエリではなくclampを利用しています。

font-size: clamp(1rem, 1rem + 1.1vw, 2rem);

vwのみの指定だと、zoomしたときに挙動がおかしいので固定値を入れることがポイントのようです。

スマホのボタンなどがフォントサイズが大きく改行されてしまう場合は中央の値をなるべくスマホよりにしておきます。

IE以外はサポートしているようです。

.fontawesome-icon {
  display: inline-block;
  width: clamp(25px, 1rem + 1.5vw, 50px);
  height: clamp(25px, 1rem + 1.5vw, 50px);
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-size: clamp(12px, 1rem + 1.5vw, 20px);
  font-weight: 900;
  line-height: clamp(25px, 1rem + 1.5vw, 50px);
  border-radius: 36%;
}

円の中にアイコンをいれるCSSです。一部省略しています。

vwは同値じゃないとずれます。上記の例の場合、サイズ感は両脇にあるpxで調整するとよさそうです。

ぐぐってもgithubで調べても、サンプル自体がネット上にほぼ存在しませんでした(2021年現在)が、line-height:にclampはテストしたところ効いているっぽいです。

いつも目であわせてしまいますが、計算式ってありそうですね。。知りたいです。

大きめの状態を維持したい

clampをはじめて使ったとき、すぐ悩んだことですが、clampで対象物がすぐ小さくなってしまうことがあります。たとえば、iPad miniや大型のiPhoneはもう少し大きく見せたい場合があるでしょう。

clamp(MIN, VAL, MAX)

その際はminとmaxを固めたあと、真ん中のVAL値を大きくするとそうなります。

入れ子構造などの場合、この調整が厄介でスマートに調整する方法があれば知りたいところです。

clampの代替

場合によっては昔ながらの%指定した方がいい場合もあるため、使い分けでしょうか。特にwidthとか。

表示確認

chrome デベロッパーツールでdiv要素を選択すると、サイズが表示されるため、今、どのサイズかを確認しています。

注意点

clampを多用しています。

影響が及ぶ範囲でしょうか。とくに絶対値で配置している場合、topやmarginなどあらゆる場所に影響が及んで調整に時間がかかるようになります。本当にclampが必要か考えた方がいいかもしれません。

参考

最初、参考になりました。ありがとうございます。

スポンサーリンク

clampがios12で効かない!?

iPhone6(iOS12)を持っているのですが、clampが効きませんでした。対応前でしたね…。

iPad Mini5も持っているのですが、こちらはもちろん効きます。

簡単に対応できました。どちらかの固定値を用意してあげればOKです。iPhoneなので小さい方にあわせました。

.icon-img {
  position: absolute;
  top: calc(100% - 40px);
  top: clamp(calc(100% - 40px), 1rem + 3vw, calc(100% - 60px));
  left: 50%;
  z-index: 120;
  width: 80px;
  width: clamp(80px, 1rem + 3vw, 120px);
  height: 80px;
  height: clamp(80px, 1rem + 3vw, 120px);
  border: 10px solid #f2f2f2;
  border-radius: 50%;
  transform: translate(-50%, 0);
}

あとで調べたらstackoverflowにもそのような回答がありました。

スポンサーリンク

clampとbootstrap

clampで各要素を、bootstrapでflexを組めば、もうだいたいレスポンシブはOKじゃないですかね。

bootstrapのレスポンシブはこちらの記事にまとめました。

スポンサーリンク

レスポンシブWebデザイン可変レイアウト動作確認

開発時にスマホの最小端末はどこまで動作確認をとりサポートするか?

clampを使うとき、じゃあminはいくつにしよう?ってなる気がします。

価格コムなどを調べたら以下の端末がでてきました。

iPhone SE 4インチ
Rakuten Mini 3.6インチ

Googleデバロッパーツールは、ギャラクシーfoldの280pxが最小幅みたいですね(デフォルトで入っているもののみで確認)。

iPhone SEあたりでかなり綺麗なレイアウトであり、最小端末でもギリ崩れていないぐらいがいいアンバイですかね。

余談ですけど、Googleデバロッパーツールはデバイスを切り替えたのち、サイドバーが表示されることがあります。再読み込みしないと正しい表示にならないようですね。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました