Sassを使って3カラムのサイトを簡単に作ろう
はてなブックマーク - Sassを使って3カラムのサイトを簡単に作ろう
Pocket

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

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

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

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