使い方 - How to Use

  1. 親要素の横幅、列の横幅、余白の3つを入力すると自動的に計算されます。「%」のボタンを押すと%の数値が表示されるので、既にCSSがある場合は値を書き換えていきます。(下の計算機は3列になっていますが、計算に列数は関係ないので大丈夫です)
  2. 計算機の下に計算結果の一覧が出るので、そちらの値をコピーしてもOKです。念のため桁数を増やして表示しています。
  3. 一番下でサンプルになるpxと%でのソースコードを吐き出すので、そちらをコピーして使う方法もあります。
  4. 計算機の右上にある簡易チェックに列数を入力すると、列が親要素内に収まるか計算します。また、ここのチェックが通ると一番下のソースコードのHTMLにも反映されます。

計算機 - Calculator

列数を入力すると要素が収まるかチェックします ?px >= (?px * ?) + (? * ?)
    • px

      px

    • width: 0px

      margin:

      0px

    • width: 0px

      margin:

      0px

    margin:

    -0px

    結果 - Result

    Parent width:
    0px
    Column width:
    0px
    Margin:
    0px
    Negative margin:
    -0px
  • max-width: 0px

    • width: 0%

      margin:

      0%

    • width: 0%

      margin:

      0%

    • width: 0%

      margin:

      0%

    margin:

    -0%

    結果 - Result

    Parent max-width:
    0px
    Column width:
    0%
    Margin:
    0%
    Negative margin:
    -0%

ソースコード - Source Code

px: Sample

HTML
<div class="list-box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
  • .list-box {
        width: 0px;
    }
    
    .list-box ul {
        margin-right: -0px;
        *zoom: 1;
    }
    
    .list-box ul:before,
    .list-box ul:after {
        display: block;
        overflow: hidden;
        content: "";
    }
    
    .list-box ul:after {
        clear: both;
    }
    
    .list-box li {
        float: left;
        margin-right: 0px;
        width: 0px;
        height: 100px;
        background: #ababab;
        list-style: none;
    }
    
  • .list-box {
        width: 0px;
        ul {
            margin-right: -0px;
            @include clearfix;
        }
    
        li {
            @include float-left;
            margin-right: 0px;
            width: 0px;
            height: 100px;
            background: #ababab;
            list-style: none;
        }
    }
    

%: Sample

HTML
<div class="list-box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
  • .list-box {
        max-width: 0px;
    }
    
    .list-box ul {
        margin-right: -0%;
        *zoom: 1;
    }
    
    .list-box ul:before,
    .list-box ul:after {
        display: block;
        overflow: hidden;
        content: "";
    }
    
    .list-box ul:after {
        clear: both;
    }
    
    .list-box li {
        float: left;
        margin-right: 0%;
        width: 0%;
        height: 100px;
        background: #ababab;
        list-style: none;
    }
    
  • .list-box {
        max-width: 0px;
        ul {
            margin-right: -0%;
            @include clearfix;
        }
    
        li {
            @include float-left;
            margin-right: 0%;
            width: 0%;
            height: 100px;
            background: #ababab;
            list-style: none;
        }
    }