HTML・レイアウトの操作：
clampをスクロールバーがある状態で実行
CSS標準のclamp()と似た機能を、PCブラウザのスクロールバーがある状態で実行する。
主に、onloadとonresize内で実行する。この関数で変更されたCSSを初期値に戻す $clampReset() もある。
CSS標準のclamp()では、スクロールバーが表示されるPCブラウザでは、ブラウザ幅いっぱいとなる100vwを指定するとスクロールバーの幅分の誤差で表示サイズにズレが生じることから、常に横スクロールバーが出るなどの想定外の表示になる場合があるため、そうした問題に対処するための関数。
記述例
$clamp()
$clamp(575)
(例) <div kclamp="FS_20_2%_30"> ※種類指定
(例) <div kclamp="H_250_25%_375 PT_100_10%_150"> ※半角スペース区切りで複数指定
(例) <div kclamp="H_250_25%+50_375"> ※演算指定あり
W=width ・ H=height ・ BGW=backgroundSize(width) ・ BGH=backgroundSize(height) ・ FS=fontSize ・ LS=letterSpacing ・ BR=borderRadius ・ PT=paddingTop ・ PB=paddingBottom ・ PL=paddingLeft ・ PR=paddingRight ・ MT=marginTop ・ MB=marginBottom ・ ML=marginLeft ・ MR=marginRight ・ T=top ・ B=bottom ・ L=left ・ R=right
※大文字・小文字で指定可能
※Nodeの『幅』以外を操作する場合でもブラウザ幅を100%としてこれを基準に算出する。(vwベースの考え方)
※最大pxを「0」に設定すると自動的に「9999」になる。(事実上、制限ナシということ)
(例)「100%-40」「100%/2」「100%/2-20」など。
※この演算は基本の算出処理の後に実行する点に注意して使用する。
注意点
スマホでは、CSS標準のclamp()の方が指定しやすいのでそれを利用すること。
この関数は「cellPhone」がtrueの場合には機能しない仕様になっている。
kclamp属性部分のコードを生成するツール『kclamp属性コード生成』も利用可能。
動作サンプル
このページの onresize には $clamp() が設定されているので、ブラウザサイズを変更して以下で動作確認をする。
HTML :
<body onload="$clamp()" onresize="$clamp()">
<div id="sample1" kclamp="FS_20_2%_0 LS_3_0.3%_0">───</div>
<div id="sample2" kclamp="H_50_5%_75 PT_30_3%_45">───</div>
<div id="sample3">
<div>
<div id="sample3a" kclamp="W_300_30%_450">───</div>
<div id="sample3b" kclamp="W_400_40%_600 BR_6_0.6%_0">───</div>
</div>
</div>
<div id="sample4" kclamp="BGW_50_5%*2_0">───</div>
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
kclamp属性コード生成
$clamp()用にkclamp属性のコードを生成するための補助ツール。
使用したい項目に数値を入力するだけでkclamp属性コードを自動生成します。
※使用しない項目は「0」に設定する。
※各項目のチェックボックスは拡張上限幅を適用するかどうか。適用しない場合にはブラウザ幅に対して無制限に拡大。