用途
新着
履歴
分類

CSS3 数値を演算で演算して指定する

CSS3 数値を演算で演算して指定する
widthやleftなど100%で書きたいもののそこから10ピクセル引いた値を使いたいときなど、意外とコーディングするときに発生します。

そんなときは以下のように指定することができます。

width : calc(100% - 10px) ;

こう指定するとこで100%の幅から固定で10px差し引いた横幅になります。

その機能を応用したサンプルが以下です。

100%の幅から40px引いたwidthのサンプル

これは100%から左右20pxを引いて、margin左右に20pxをセットしてます。

.demo_wrap{
    background-color:#F00;
    margin:20px 0;
    text-align:center;
}
.demo_wrap .demo_item{
    background-color:#FF0;
    width : -webkit-calc(100% - 20px * 2) ;
    width : calc(100% - 20px * 2) ;
    margin:0 20px;
    height:20px; 
}
<div class="demo_wrap clearfix">
    <div class="demo_item">100%の幅から40px引いたwidthのサンプル</div>
</div>

次のサンプルは100%を3で割った時のサンプルです。

100%の幅を3で割ったときのサンプル
100%の幅を3で割ったときのサンプル
100%の幅を3で割ったときのサンプル

33.333....%なので固定値で書くと微妙に余ってしまいますが、それを防げます。

.demo_wrap .demo_item2{
    background-color:#00F;color:#FFF;
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
    float:left;
    box-sizing:border-box;
    border:solid 1px #222;
}
<div class="demo_wrap clearfix">
    <div class="demo_item2">100%の幅を3で割ったときのサンプル</div>
    <div class="demo_item2">100%の幅を3で割ったときのサンプル</div>
    <div class="demo_item2">100%の幅を3で割ったときのサンプル</div>
</div>

最後に上記二つを組み合わせたレイアウト例です。

←20px余白
←3%余白3%→
20px余白→

左右のマージンは固定で撮りたい、並んだ要素の隙間はパーセントでとりたい、そんなわがままレイアウトのサンプルです。

.demo_wrap .demo_item3{
    background-color:#00F; color:#FFF;
    width : -webkit-calc(100% / 3) ;
    width : calc(94% / 3) ;
    margin-right:3%;
    float:left;
}
.demo_wrap .demo_item3:last-child{
    margin-right:0;
}
<div class="demo_wrap clearfix">
    <div class="demo_item">
        <div class="demo_item3">←20px余白</div>
        <div class="demo_item3">←3%余白3%→</div>
        <div class="demo_item3">20px余白→</div>
    </div>
</div>

calcの指定はIE8以下とAndroid4.3以下は無効になるのでwidthをあらかじめセットする必要があります。

公開 2019-08-07 20:59:19
更新 2022-01-31 01:46:00
このページの二次元コード
CSS3 数値を演算で演算して指定する

人気のサンプル

search -  category -  about
© 2024 kipure
Top