リキッドレイアウト作成方法と簡易テンプレート

liquid-layout
可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。
「レスポンシブかリキッドで悩んでいる」という意見は半分間違いですね。レスポンシブはリキッドデザインを含んだワンソースデザインの総称のような位置づけですが、リキッドデザインはまさにデザインの名称です。まず可変する時点でリキッドであり、メディアクエリでワンソース化されればレスポンシブになっていくと考えればいいでしょうか。

SPONSORED LINK

リキッドデザインのテンプレート

超簡易なテンプレですが、リキッドの注意するべき部分も織り込んでありますし、ほとんど白紙なのでカスタマイズしやすいと思います。

リキッドHTML

HTML部分は全体のボックスに、サイドバーとコンテンツ部分のボックスが入っているだけです。

<div class="wrap">
<div class="left">
        左サイドバー
    </div>
<div class="right">
        右サイドバー
    </div>
<div class="contents">
        リキッド部分
    </div>
</div>

リキッドCSS

CSSでは、全体のボックスに最小幅と最大幅を指定するのが望ましいですね。サイドバーは固定幅が多いので、コンテンツが縮小されてサイドバーより狭くなってしまう事態を避けます。最大幅は、大画面への対処で不要な余白を発生させないようにしています。

.wrap {
    width: 100%;
    overflow: hidden;
    min-width: 770px; /*最小幅*/
    max-width: 1440px; /*最大幅*/
}
.left {
    float:left;
    width: 250px;
}
.right {
    float:right;
    width: 250px;
}
.contents {
    margin-left: 260px;
    margin-right: 260px;
}

まとめ

サイドバーを削るには、そのボックスを消してwidth指定をちょこちょこ直せば簡単です。
リキッドはスマホなどの小画面への対応に捉えられがちですが、大画面をフルに使える為にも利用できますね。
ネットサーフィンしていると、サイトの決めた幅で見せられることが多いですが、27インチとかになってくるともっと表示できる情報量は多くてもいいはずですからね。

今日も知識欲は止まらない。

関連トピック

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

公開日:2011/07/17