はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで背景やボーダー(枠線)をページの一番下まで表示

2009/06/28 Sun [Edit]

CSS で div 要素の高さ(height)を 100% にしてブラウザ・ウィンドウの高さ一杯(ページ一杯)に背景色(background-color)やボーダー(border)を適用させるための Tips。

ページ内のコンテンツが少なく、でも背景やボーダー(枠線)はページの一番下まで表示させたい時がありますよね。

デザインにもよると思いますが、必要なモノが足りていないのは寸足らずのパンツのように格好良いモノではありません。

ビジネスマン(営業マン)のスーツが七分丈では、まとまる商談もこじれてしまう可能性だってあります。

七分丈ならまだしも、膝小僧丸出しの、わんぱくそうなビジネスマンに大きな仕事を任せられるでしょうか?

そのビジネスマンが一見わんぱくそうに見えて、実は仕事は滅茶苦茶出来る方だったとしても、ホットパンツでは出世も遅れるはずです。

外見より中身が重要なのは、人もWebページも一緒だと思うのですが、外見だって大切だと思うのです。

このページをご覧頂いている方には、どうか商談中にホットパンツの端から金の玉をチラつかせるようなわんぱく過ぎるビジネスマン、もとい寸足らずな Web ページを作らない Web 制作者であって欲しいと切に願っています。

コンテンツ量に関わらず、ブラウザ・ウィンドウの下まで、しっかりと背景や罫線を表示させたい方は続きをどうぞ。

以下、必要なソースです。(標準準拠モード用)

html , body {height:100%;}
body > #container {height:auto;}
#container {
	height:100%;/* for IE6 */
	min-height:100%;
	background-color:#fff;
	border:solid #ccc;
	border-width:0 1px;
}

簡単に解説を加えると、html 要素と body 要素の height プロパティを 100% とし、高さをブラウザ・ウィンドウの表示領域一杯と指定します。

次に背景やボーダーを指定したブロック要素、上のソースの場合は #container の min-height プロパティも 100% とし、高さの最小値を表示領域一杯と指定します。

最小値で高さを指定するのは height プロパティで指定しまうと、初期の表示領域一杯を越え、ブラウザのスクロールバーが表示されるような時に、高さが追従しない為です。

しかし上のソースで、height プロパティも 100% としてあるのは、IE6 のためです。

IE6 は初期の表示領域一杯を越え、スクロールバーが表示されるような時も、高さが追従します。

通常、内包する要素の高さに常に追従させるには height プロパティに auto を指定します。

なので IE6 以外のモダンブラウザへの指定として、IE6 非対応の子供セレクタを使い、height プロパティに auto を指定しています。

body > #container {height:auto;}

上のソースがその部分だけを取り出したソースです。

今回の方法以外にも、body 要素の background プロパティで、画像を縦方向に繰り返す(repeat-y)方法でも背景をページの下迄表示させることは可能です。

しかし、画像を使わずに済ませられるような単純なデザインでしたら、使わない方がスマートだと思えますし、多少なりとも作業スピードの向上に繋がるのではないでしょうか。

Top
はじめてのブログデザイン
Next
アップル社のカリスマCEOスティーブ・ジョブズを知る動画

Comments

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

-

管理人の承認後に表示されます

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。