レスポンシブWebデザインのCSSの覚書です。clamp編です。
Contents
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の話を。
— 歩くCSS設計完全ガイド (@assialiholic) December 25, 2019
まず前提として、記事を批判する意図はなく、記事中で語られている「大事なのは本人が原理原則を理解した上で納得いく選択をすること」には完全に同意です。https://t.co/CLFS11BWXk
stackoverflowのエンジニアの多くはpx推薦ですね。
個人的な結論としては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にもそのような回答がありました。
clampとbootstrap
clampで各要素を、bootstrapでflexを組めば、もうだいたいレスポンシブはOKじゃないですかね。
bootstrapのレスポンシブはこちらの記事にまとめました。
レスポンシブWebデザイン可変レイアウト動作確認
開発時にスマホの最小端末はどこまで動作確認をとりサポートするか？
clampを使うとき、じゃあminはいくつにしよう？ってなる気がします。
価格コムなどを調べたら以下の端末がでてきました。
iPhone SE 4インチ
Rakuten Mini 3.6インチ
Googleデバロッパーツールは、ギャラクシーfoldの280pxが最小幅みたいですね(デフォルトで入っているもののみで確認)。
iPhone SEあたりでかなり綺麗なレイアウトであり、最小端末でもギリ崩れていないぐらいがいいアンバイですかね。
余談ですけど、Googleデバロッパーツールはデバイスを切り替えたのち、サイドバーが表示されることがあります。再読み込みしないと正しい表示にならないようですね。
ご参考になれば幸いです。
コメント