copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/12/26

CSSで使うパーセントを割り出すやり方いろいろ

INDEX

    今ではすっかり当たり前になったレスポンシブなサイトのコーディング、結構やってるつもりなのですが、まだまだ頭を悩ませる状況があります。

    その中でも「リキッドレイアウト」で作るサイトなんかだと各divなどの要素に幅を指定する時、ピクセルではなくパーセントで指定しなければならない時があります。

    この間複数の要素をポジションで組んだレイアウトを横幅を縮ませてもポジションを保ちつつ縮小をしないといけないという案件があり「うわ〜、これ全部パーセント計算しないといけないのかぁ〜…」と思ってテンション下がっておりました。

    前置き長くなりましたが、今回はパーセントの割り出し方をおさらいしていこうと思います。

    CSSで使うパーセントを計算で割り出す

    通常はピクセルでサイズを指定してレイアウトを組み上げていきますがこのピクセルを元にパーセントを計算で割り出す方法です。

    計算方法は以下の通り。

    サイズ例

    • 親要素:960px
    • 子要素:320px

    計算方法

    320px ÷ 960px × 100 = 33.3333%

    calc()を使用してパーセントを割り出す

    「calc()」とは、プロパティの値を計算式で実行してくれる便利なファンクションです。

    対応状況は以下の通り。

    calc()対応ブラウザ状況

    calc()の使い方

    例えば横幅100%の要素から50px引き算したい場合、calc()を使用するとこんな感じで求められます。

    div {
    width:calc(100% - 50px);
    }
    

    こんな感じで簡単に計算式をCSSで書くことができるので「親要素から20%引いた数値を指定したい」時や「100vh から 100px引きたい」と行った計算が面倒な時に便利です。

    calc()でパーセントを割り出す

    サイズ例

    • 親要素:960px
    • 子要素:320px

    計算方法

    div {
    width:calc(320px / 960px * 100%);
    }
    

    上記の計算で割り出す方法と同じで、親要素と子要素を割り算してから100%を掛け算してサイズに応じた数値を割り出すことができます。

    sass(@mixin)でパーセントを割り出す

    sassの@mixinを使えばさらにパーセントを割り出すのが楽になります。

    まずは変数化

    以下親要素のサイズを変数にします。

    $parent_width:960;
    

    @mixinで計算式を用意する

    サイズを割り出す計算式を@mixinで用意します。
    padding、margin、width、heightと各種用意できますがここではmarginとwidthを例に書きます。

    // margin
    @mixin margin($t, $r, $b, $l) {
    margin:($t / $parent_width) * 100% ($r / $parent_width) * 100% ($b / $parent_width) * 100% ($l / $parent_width) * 100%;
    }
    // width
    @mixin width($w) {
    width:($w / $parent_width) * 100%;
    }
    

    @includeを使って@mixinを呼び出す

    @includeを使い計算式を読み込みます。

    div {
        @include margin(10,20,30,40);
        @include width(200);
    }
    

    カッコの中に数値(ピクセル数)を入力してコンパイルすると以下の結果がcssで出力されます。

    div {
        margin:1.0416666666666665% 2.083333333333333% 3.125% 4.166666666666666%;
        width:20.833333333333336%;
    }
    

    その他

    以上のように自分で計算したりcalc()を使ったりもできますが、今はパーセントを求められる便利なサイトがあります。

    Really Quick Responsive Web Design Calculator

    使用方法

    RQRWDのスクリーンショット1

    使い方はこれも簡単で「Width Of Child Element In px」に子要素のピクセル数、「Width Of Parent Element In px」親要素のピクセル数を入力すると以下のように瞬時で答えが表示されます、

    RQRWDのスクリーンショット1

    ご参考まで。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View