CSSだけでフレームを作るテクニック:phpspot開発日誌

前の記事 ≪：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タグを使って実現しますが、検索クローラーに対して不利などの理由から最近ではあまり見かけなくなってしまいました。

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

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

サンプルのHTML (frame.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSSでフレーム</title>
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
html>body #wrap {
height:100%; /* 100 % height */
}
#wrap {
width:40em;
margin:0 auto;
}
#header {
width:40em;
height:5em;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #content-wrap {
height:100%; /* 100 % height */
}
html>body #content {
padding:5em 1em;
}
#footer {
width:40em;
height:5em;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10; /* Prevent certain problems with form controls */
}
h1,h2 {
margin:0.15em 0;
}
p {margin:1em 0;}
.info {
padding:0.5em;
border:2px solid #999;
background:#fff;
}
#header,
#footer {
background:#ddd;
text-align:center;
}
#content-wrap,
#content {background:#f8f8f3;}
</style>

</head>
<body>
<div id="wrap">
<div id="header">
<h1>CSSでフレーム</h1>
<h2>CSSだけでフレームを作る</h2>
</div>
<div id="content-wrap">
<div id="content">
<p class="info">This page demonstrates the technique described in the article <a href="http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/">CSS Frames v2, full-height</a>. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>This is the last line.</p>
</div>
</div>
<div id="footer">
<div id="labfooter">
<p><a href="http://www.456bereastreet.com/lab/">Copyright &#169; 2003-2006 Roger Johansson</a></p>
</div>
</div>
</div>
</body>
</html>

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

IE6用のCSSファイル (ie6.css)

CSSも本当に奥が深いですね。

サンプルのダウンロード

関連の記事検索：CSS, チュートリアル, Webデザイン