TAテーマ001 サイドバーの長さをメインに揃える

TAテーマ001 サイドバーの長さをメインに揃える

テーマ001情報
TAテーマ001 サイドバーの長さをメインに揃える

 

最近の流行りのホームページデザインにサイドバーを強調するものがあります。

例えば、堀江貴文さんの人気サイトホリエモンドットコムなどがそうです。

horiemon1

お分りでしょうか?

左側のサイドバーの背景を黒にしてメニューや広告などを目立つように配置しています。メインコンテンツよりも先ずそちらに目が行くデザインです。

そしてこのサイトの最下部(フッター)あたりをご覧ください。(下図)

horiemon2

サイドバーのコンテンツが終了していますが背景色(黒)はメインコンテンツの終わりと揃っています。

今回はホリエモンドットコム(堀江さんゴメンナサイ)ではなく、サイドバーの長さをメインに揃える機能についての説明です。

 

このサイドバーの長さをメインに揃える機能は背景色を付ける場合には必須になります。

サイドバーがコンテンツと共に途中で切れているように見えてみっともないからです。

地味ですが非常に有益な機能です。

もちろん、TAテーマ001はチェックボックスにチェックを入れるだけで簡単にメインコンテンツとサイドバー(とサブサイドバー)の長さが揃います。

機能の話はここで終わりなのですが、今回わざわざ話題にしたことには理由があります。

それは揃える手法についてお話ししたいからです。

 

サイドバーをメインに揃える方法は大きく分けて3つあります。

1、CSSだけで行う

2、背景画像や他のフレームの背景色を使用する

3、JavaScriptで必要な高さを測定してCSSに書き込む

 

1、CSSだけで行う

簡易的に使用される方法ですが、サイドバーのCSSにpadding-bottom: 大きな数字px; margin-bottom: -大きな数字px;を書いてメインとサイドを含む要素のCSSにoverflow: hidden;を書きます。(大きな数字は同じ数字:例えば10000とか)

こうするとあっさりと簡単にメインとサイドバーが揃います。大きく引き伸ばして超えた部分は隠してしまえ!ってことです。

しかし、この方法には大きな欠点があります。

ページ内の特定の位置に飛ばす(頭出しのリンク)ときにidを指定してリンクを張ります。(頭出しリンクの説明はこちらをご覧ください)

上記にあるようなCSSで揃えたページでこの頭出しリンクを行うとリンク先idから上のコンテンツがすべて消えるという重大な欠陥があります。

ですからこの手法は簡単ですが、汎用的なテーマでは使用できません。

※ もしこの方法で揃えている方は頭出しリンクを試してください。

 

2、背景画像や他のフレームの背景色を使用する

先ほど紹介したホリエモンドットコムさんはこの方法で実現しています。

結果として揃っているように見えれば良いわけですから、如何様にでもなりますし堅実な方法です。

ただ、フレーム構造の自由度が高いTAテーマ001では汎用的にこの手法を用いるのは煩雑すぎます。

作り込みが可能なサイトのカスタマイズに適した方法ですね。

 

3、JavaScriptで必要な高さを測定してCSSに書き込む

最後がまじめに測定、計算して高さを揃える手法です。

JavaScriptを用いてフレームの長さを実測してメイン、サイドバー、サブサイドバーの全てが揃うようにそれぞれの長さを調整します。

 

TAテーマ001は最後の方式(JavaScriptで必要な高さを測定してCSSに書き込む)を採用しています。

フレーム構造や位置を自由に変えられるTAテーマ001にとっては最適な方法と言えます。

どんなに複雑なフレーム構造を設定しても安定して揃えることができます。

 

TAテーマ001のサイドバーとメインの長さを揃える際の説明は『TAテーマ001』の取扱い説明(サブ)サイドバー設定(背景色・画像)をご覧ください。

 

お役に立てれば幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing