• pxから倍率変換

    px単位からem単位や倍率へ変換します。

    font-size / margin / padding

    デザインカンプ上でpx単位になっている値をem単位に変換します。

    現在のfont-sizeが
    必要な値が
    設定値は

    {{ changeEmAnswer }}emです!

    line-height

    デザインカンプでpxに設定されてしまっているline-heightを倍率値に変換します。

    カンプの行間が
    カンプのfont-sizeが
    設定値は

    {{ changeCompLineHeightAnswer }}です!

    line-heightがあるときの要素間の余白

    line-heightの余白を考慮してmarginやpaddingの余白を倍率値で導きたいときに使用します。基準にする要素によって算出された値のどちらかを使用します。

    ひとつめの要素

    現在の行間が
    現在のfont-sizeが

    ふたつめの要素

    現在の行間が
    現在のfont-sizeが
    ほしい余白が
    ひとつめの要素からの設定値は

    {{ changeMarginLineHeightAnswerA }}emです!

    ふたつめの要素からの設定値は

    {{ changeMarginLineHeightAnswerB }}emです!

  • pxから割合変換

    px単位から%単位とvw単位へ変換します。

    width / 可変要素

    デザインカンプ上のpx単位の要素幅を、コーディング時の%やウィンドウ幅に合わせて可変するvw単位に変換します。

    全体の大きさが
    可変にしたい要素が
    設定値は

    {{ changeVarAnswer }}%(vw)です!

  • 割合からpx変換

    %単位からpx単位へ変換します。

    デザインカンプ作成時 など

    %からpx値を求めたいときに変換します。

    最大幅が
    そのうちの
    設定値は

    {{ changeReCalcAnswer }}pxです!

  • 縦横比を保ったまま可変

    background-image / iframe(レスポンシブ)

    background-imageやiframeのレスポンシブ対応でpadding-topで調整する際に必要な値を導きます。

    画像の高さが
    画像の横幅が
    設定値は

    {{ changeRaitoAnswer }}%です!