前の記事 ≪:PHPで作られたオープンソースのカスタマサポートデスクシステム
次の記事 ≫:Gmailのショートカットまとめ

CSSだけでフレームを作るテクニック

2006年09月06日-はてなブックマーク

スポンサード リンク
CSS Frames v2, full-height | 456 Berea Street
Way back in August of 2003 I wrote a short article called CSS Frames, in which I described a technique to emulate the visual appearance of HTML frames with CSS.

CSSだけでフレームを作るテクニック。
通常、フレームというとframeタグを使って実現しますが、検索クローラーに対して不利などの理由から最近ではあまり見かけなくなってしまいました。



フレーム風のインタフェースをCSSだけで実現するテクニック。
常にヘッダー、フッターのナビゲーションが固定されているのでフレームの使いやすさはそのままで、かつクリーンなHTMLによってフレームを実現できます。

分かりやすいように、この機能を実現するのに不要な部分は出来るだけ省いたものを次に示します。

サンプルのHTML (frame.html)


これだけではIEではちゃんと動かないので、IE6の時だけ次のCSSを読み込みます( if IE 6 部分 )。

IE6用のCSSファイル (ie6.css)
CSSも本当に奥が深いですね。

サンプルのダウンロード

関連の記事検索:CSS, チュートリアル, Webデザイン, HTML, デザイン, Web制作
スポンサード リンク

By.KJ : 2006年09月06日 20:20 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)