今回のエントリーでは、前回紹介したSassを利用して簡単に2カラムのサイトを作ってみます。SassはCSSをプログラミングのように組める言語となっていて、変数が使用できます。その変数を利用することで2カラムサイトが簡単にできてしまいます。では実際に出来上がったものを見てもらいましょう。
以下がHTMLとSassのソースとなります。
<div id="header"> <h1 class="title"></h1> </div> <div id="content" class="clearfix"> <div id="left_line"></div> <div id="right_line"></div> </div>
// パラメータ
$column_left_grid_num: 24;
$column_right_grid_num: 7;
$column_between_grid_num: 1;
$one_grid: 30px;
// 総grid数(カラム間のgrid数も足す)
$all_grid_partition_num: $column_left_grid_num + $column_right_grid_num + $column_between_grid_num;
// サイズの計算
$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;
// 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: $sub_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;
}
}
.clearfix:after {
display: block;
clear: both;
height: 0px;
visibility: hidden;
content: ".";
}
既に他のC言語やjavaScriptなどの言語を習得している方は、Sassのソースを見てだいたいは見当がつくのではないでしょうか。やっていることはすごく簡単です。「＄（ダラー）」を先頭に記述している文字列が変数となっていて、marginなどの幅に関係している要素を全て加算し、サイト全体のwidthを計算しています。
実際はmarginだけでなく、paddingやborder幅も含まれてきますが、今回のテストソースではできる限りシンプルにするため除いています。
ここまではCSSと何ら変わらないのでは？と思いになるかもしれません。しかしSassを利用したCSS作成の本当の真価は、修正時に発揮されます。では右のカラムの幅を大きくして、左のカラムの幅を小さくしてみましょう。変更するソースは以下です。
// パラメータ $column_left_grid_num: 19; $column_right_grid_num: 12; $column_between_grid_num: 1; $one_grid: 30px;
変更後のサイトデザインは以下になりました。
今までCSSで「幅を変えたからここのマージンを調整して……あ、カラムがずれた、あれどこが計算間違いしてるのかな……」なんてことに時間を取られた方はいるのではないでしょうか。というより、悩まされたのは私です；；。今回はSassを使用しましたが、変数の機能を持ったものはSassだけでなくLESSなどいろいろあります。今回のエントリのようなテンプレートを少しずつ増やしていき、簡単にデザインができるよう蓄積していくことで、より自分が楽をすることができます。ぜひ使ってみてください。