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

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

1 min-widthとclampのminの違いは?
2 clampのCSSの使い方
3 clampがios12で効かない!?
4 clampとbootstrap
5 レスポンシブWebデザイン可変レイアウト動作確認
- 5.1 開発時にスマホの最小端末はどこまで動作確認をとりサポートするか？

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を使うならpx、em、rem?(追記)

clampがあるなら、pxでいいんじゃないの？とこの方のようになっていきました。

clampを使うようになって処理の面からmarginもfont -sizeもpx で制作するように変えちゃいました。そもそもremにこだわる必要もないかなぁと。 https://t.co/oEn7Fpqi5G
— 中田デザイン事務所です。 (@nakata_design) November 22, 2022

ただし、われています。

まわりまわってWebサイトのfont-size指定はpxが良いのかな？

メインにどの値使ってますか？
理由も聞けると嬉しい🥺
— ささはる (@ssharu_design) July 17, 2020

なぜか気になるサイトはem使っている人、意外と多いんですけどね。

WordPressのテーマcocoon:px
WordPressのテーマswell:em
WordPressのテーマsango:em
zenn:em
Webクリエイターボックスrem(ただし、paddingはpx)
photoshopvip:px
mdn:rem
GAFA:px

remのメリットはルートで一括変更可能らしいですけど、ルールで一括変更したことが今まで一度もありません。

ちょっとこの記事を読んで、久しぶりにCSSの話を。
まず前提として、記事を批判する意図はなく、記事中で語られている「大事なのは本人が原理原則を理解した上で納得いく選択をすること」には完全に同意です。https://t.co/CLFS11BWXk
— 歩くCSS設計完全ガイド (@assialiholic) December 25, 2019

stackoverflowのエンジニアの多くはpx推薦ですね。

Should I use px or rem value units in my CSS?

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am

個人的な結論としてはpxでいいですかね。ブログの記事はわりとざっくりなので、remのところあってすいません。

参考

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

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にもそのような回答がありました。

iOS CSS Clamp and Transforms broken

On a little frontend I developed in Vue ^3.0.0 for an API, I ran across the issue where after I deployed it I started ge