Sassを使って3カラムのサイトを簡単に作ろう

前回、「Sassを使って2カラムのサイトを簡単に作ろう」で作成したソースをForkし、3カラムのサイトを作ります。では実際に作成したものを見てみましょう。前回から新たに追加した処理部分はハイライトしています。

<div id="container">
	<div id="header">
		<h1 class="title"></h1>
	</div>
	<div id="content" class="clearfix">
		<div id="left_line"></div>
		<div id="center_line"></div>
		<div id="right_line"></div>
	</div>
</div>

// パラメータ
$column_left_grid_num:    7;
$column_right_grid_num:   7;
$column_center_grid_num:  17;
$column_between_grid_num:  1;
$one_grid:                30px;

// 総grid数(カラム間のgrid数も足す)
$all_grid_partition_num: $column_left_grid_num + $column_right_grid_num + $column_center_grid_num +
                         ($column_between_grid_num*2);

// サイズの計算
$container_width:        $all_grid_partition_num * $one_grid;
$column_left_width:      $column_left_grid_num   * $one_grid;
$column_right_width:     $column_right_grid_num  * $one_grid;
$column_center_width:    $column_center_grid_num * $one_grid;

// design
$main_color:         #B7EA99;
$sub_color:          #ECFCE2;
$menu_color:         #83D361;


/*--------------------------------------------
 サイト全体
--------------------------------------------*/
body {
    background-color: $main_color;
}
div#container {
    background-color: $main_color;
    width: $container_width;
    margin: auto;
    margin-top: $one_grid;
}

/*--------------------------------------------
 ヘッダー
--------------------------------------------*/
div#header {
    h1.title {
        background-color: $sub_color;
        width:            $container_width;
        margin:           0px 0px $one_grid 0px;

        // 内容が無いため高さ設定
        height:           $one_grid*2;
    }
}

/*--------------------------------------------
 コンテンツ
--------------------------------------------*/
div#content {
    width: $container_width;

    div#left_line {
        background-color: $menu_color;
        width:            $column_left_width;
        float:            left;
        margin-right:     $one_grid;

        // 内容が無いため高さ設定
        height:           $one_grid*15;
    }

    div#right_line {
        background-color: $menu_color;
        width:            $column_right_width;
        float:            left;

        // 内容が無いため高さ設定
        height:           $one_grid*10;
    }

    div#center_line {
        background-color: $sub_color;
        width:            $column_center_width;
        float:            left;
        margin-right:     $one_grid;

        // 内容が無いため高さ設定
        height:           $one_grid*15;
    }
}
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: ".";
}

追加した処理を見ていただければお分かりになるかと思いますが、簡単に3カラムに対応させることができました。カラム落ちを発生させないよう、カラムの幅を合計したものをコンテンツ全体の幅としているだけでこんなにも強力なテンプレートとなります。では前回同様にカラムの幅を変えてみましょう。変更するSassのソースコードは以下となります。

// パラメータ
$column_left_grid_num:    10;
$column_right_grid_num:   10;
$column_center_grid_num:  11;
$column_between_grid_num:  1;
$one_grid:                30px;

変更後は以下のような見た目になります。

簡単にカラムの幅を調整することができました。汎用的に作っていけば、当エントリ以上に微調整だけでテンプレートが仕上がります。HTMLも同様にテンプレート化できますので、パラメータ調整だけでサイトが作れるようにしたいですね。