GridCalc

合計幅とカラム数から、割り切れるカラム幅と溝の幅を算出するだけのアレ。 ※溝幅の最大値 = (合計幅 / カラム数) * 0.25 ※左右端のマージンは計算に入れません。

by mach3ss

HTML

<!-- #container -->
<div id="container">
    <h1>GridCalc</h1>
    <p class="description">
        合計幅とカラム数から、割り切れるカラム幅と溝の幅を算出するだけのアレ。<br />
        ※溝幅の最大値 = (合計幅 / カラム数) * 0.25<br />
        ※左右端のマージンは計算に入れません。
    </p>
    <form action="" id="js-input">
        <ul>
            <li>
                <label>
                    合計幅 : 
                    <input type="text" name="total-width" value="950">
                </label>
            </li>
            <li>
                <label>
                    カラム数 : 
                    <input type="text" name="columns" value="12">
                </label>
            </li>
            <li>
                <input type="submit" value="CALC">
            </li>
        </ul>
    </form>
    <table>    
        <thead>
            <tr>
                <th>Column</th>
                <th>Gutter</th>
            </tr>
        </thead>
        <tbody id="result">
        </tbody>
    </table>
</div>
<!-- /#container -->

<!-- templates -->
<script type="text/html" id="template-result-row">
<tr>
    <td>{{column}}</td>
    <td>{{gutter}}</td>
</tr>
</script>
<script type="text/html" id="template-result-row-error">
<tr>
    <td colspan="2"><p class="caution">{{message}}</p></td>
</tr>
</script>
<!-- /templates -->

CSS

body {
        font-size:81%;
        font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
    }
    h1 {
        font-size:3em;
        color:#246;
        margin:1em 0;
    }
    p.description {
        line-height:1.6em;
        color:#333;
        margin:1em 0;
    }

    #container {
        width:640px;
        margin:0 auto;
    }
    form {
        margin:1em 0;
    }
    ul {
        overflow:hidden;
        padding:1em;
        background-color:#eee;
        border-radius:5px;
        box-shadow:inset 0px 0px 5px #666;

    }
    li {
        display:block;
        float:left;
        margin:0;
        padding:0;
        margin-right:1em;
    }
    input {
        font-size:1.2em;
        font-family:Arial, Helvetica, sans-serif;
    }
    input[type=text] {
        width:3em;
        border:1px solid #999;
        border-radius:3px;
        padding:0.5em;
        text-align:center;
    }
    input[type=submit] {
        padding:0.5em;
    }
    table {
        border-collapse:collapse;
        width:100%;
    }

    th, td {
        padding:0.5em;
        border:1px solid #ccc;
        text-align:center;
    }
    th {
        background-color:#eee;
    }
    td {
        font-size:1.5em;
    }

JavaScript

(function($,undefined){

    var tmpl = function(id, values){
        return $("script#" + id).html().replace(
            /{{(.+?)}}/g,
            function(){
                return values[arguments[1]];
            }
        );
    };

    $("#js-input").on("submit", function(e){
        var o, totalWidth, columns, gutterRange, columnWidth, result, count;

        if( e.preventDefault ){
            e.preventDefault();
        } else {
            e.returnValue = false;
        }

        o = $(this);
        totalWidth = parseInt(o.find("input[name=total-width]").val());
        columns = parseInt(o.find("input[name=columns]").val());
        gutterRange = {
            min : 3,
            max : parseInt( totalWidth / columns * 0.25 )
        };

        result  = $("#result").html("");
        count = 0;

        try {
            result.hide();
            if(columns < 2){
                throw new Error("カラムは2以上の数値を入力してください。");
            }
            for( var i = gutterRange.min; i < gutterRange.max; i ++ ){
                columnWidth = (totalWidth + i) / columns - i;
                if( columnWidth % 1.0 == 0 ){
                    count ++ ;
                    $(tmpl( "template-result-row", {
                        column : columnWidth,
                        gutter : i
                    })).appendTo( result );
                }
            }
            if( !count ){
                throw new Error("該当する結果がありませんでした。");
            }
        } catch( e ){
            $(tmpl("template-result-row-error",{
                message : e.message
            })).appendTo(result);
        }
        result.fadeIn();
    }).trigger("submit");
})(jQuery);