CSS(スタイルシート)のテクニックとトピックのまとめ

フッタをブラウザ下部に固定配置したい。そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。ほかには同様のテク...

昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。 ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。10 Techniques for a Fantastic Footer以下は、そのポイ...

ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。Fixed Header & Footer Layout: A Beginner's Guide demoスタイルシートはIE6をはじめとする主要ブラウザを...

『 サイトマップ。大規模サイトは、サイトマップが常にフッタにあること多し。世界中を虜にした話題のアイツのサイトもあるよ。 』

New CSS Sticky Footer - 2009 demo主な対応ブラウザは、FX6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリストNew CSS Sticky Footerは、同じくフ...

Fixed Footer Backgrounds with CSS demo, demo 2デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「f...

標準準拠でheight100%のボックス今回は標準準拠モードでheight100%のボックスをbody直下に作る方法を紹介します。過去互換モードでは何の苦もなくできることですが、標準準拠でやるにはちょっとしたテクニックが必要です。テクニック使用前サンプルテクニック使用後サンプルテクニック使用後のボ...

『 最近はフッターに凝るサイトが増えてきましたね。紹介されている中では、フッタにナビゲーションを配置するhttp://www.pixellogo.com/がおもしろかった。 』

動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラ...

デジパのベトナムオフィシャルサイトがオープンしました。さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は...

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。

フッターは画面の下にピッタリくっつけておきたいという要望は意外とあるようです。 でもテーブルもフレームも使わないとなると、なかなか難しい。 今回紹介するのは、「height100%のボックス」のテクニックを拡張したこれを実現する方法です。 テクニック使用後 サンプル ウィンドウのサイズを変えてもフ...

フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter...