このページはサイト運営している人向け。主にスタイルシートについてです。
フレームページの検索エンジン対策
訪れていたら、CSS「display: none」でリンク消し
フレームページへジャンプ
フレーム強制表示ジャバスクリプト
CSS2「position:fixed」で擬似フレーム
画像を両側に表示する
モニタ解像度によってJavaScriptでCSSを分岐 UP
参考書籍
このサイトではフレームページをつくったことはありませんでした。理由の一つに、Googleなどのロボット型検索エンジンから検索した場合、フレームの中のそのキーワードのあるページだけが表示され、フレームの他のページ（目次ページなど）は表示されないということがあります。なんらかの方法を講じないと、検索した人がそのページからどこへも行けなくなってしまいます。
私も、たまたま買ったパソコン専門誌で「URLの末尾を消していくと上の階層に行く」ということを知るまでは、何度も検索していたのにトップページへの行き方がわからないサイトがありました。（例えばこのページ《http://www.geocities.jp/gamersafternoon/pc/css.html》なら、「/」から下の「css.html」や「pc/css.html」を順に消していくとトップページに行きつく。）
フレーム内ページを直接表示された時のための対策としては、全てのページにリンクを張る方法、ジャバスクリプトで対応する方法、ＣＧＩで対応する方法、スタイルシートで擬似フレームをつくる方法があります。以下は詳細です。
全てのフレーム構成ページにトップページへのリンクを張るのは、「普通にフレーム全体を表示した時はトップページへのリンクが複数できてしまうので不恰好。同じ場所へのリンクが複数見えるのも使いにくい。」と思っていましたが、スタイルシートで訪れたリンクの表示を消す方法がありました。一番基本的、かつお勧めな方法。
| ||||||
こうすると、検索エンジンから直接飛んできた人にはトップページへのリンクが見えて、トップページがブラウザーのキャッシュに残っている人にはリンクが見えません。
（ただし、display: noneやvisibility: hiddenに未対応のブラウザーの場合はリンクが普通に見えます。）
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css"><!--
a:visited.no{
display: none;
}
a:visited.hi{
visibility: hidden;
}
-->
</style>
</head>
<body>
<a class="no" href="../index.html">ホームへ戻る</a>
<a class="no" href="test1.html">スタイルシートdisplay: noneのリンクテスト</a>
<a class="hi" href="test2.html">スタイルシートvisibility: hiddenのリンクテスト</a>
</body>
</html>
このサイトのトップページへのリンクは「ホームへ戻る」です。
スタイルシートのdisplay: none対応のブラウザー（IE 6、NN 7等）を使用し、このサイトのトップページからこのページに来た人には、上の「」の間のリンクが見えないはずです。トップページから来た場合でも「履歴をクリア」すれば上のリンクは表示されます。
スタイルシートdisplay: noneのリンクテスト「リンクテスト１」。
スタイルシートvisibility: hiddenのリンクテスト「リンクテスト２」。
対応ブラウザーを使用の場合、上のリンクをクリックしてからこのページに戻ってくるとリンクが消えているはずです。
スタイルシートで訪れたリンクの色を「body{background-color:white} a:visited.c{color: white;」などとして背景色と同じ色にすれば、見なくなります（ただし、反転表示すると見える）。
<BODY>タグに記述する「<body bgcolor="white" vlink="white">」の方法だと、全ての訪れたリンクが見えなくなってしまいます。そのフレーム構成ページに書くリンクがトップページへのリンクだけなら、この<BODY>タグに記述する方法も使えます。
実は、時々自分のサイトがリンクされているか調べているんですが、その時にフレームセットを強制表示する[スパイラルウェア]というページからリンクされていることを見つけました。フレームセットから呼び出され、引数で指定されたフレームにGET引数で指定されたURLを指定するという方法です。この方法はクッキーの設定に依存しないので、より着実に動作すると思われます。（Macintoshのブラウザでも動作するのかな……？）うちのサイトでは、このフレーム強制スクリプトを無線LANとノートパソコンのページにてお借りしています。(2004/04/25)
ドリームキャストのブラウザ、ドリームパスポートプレミヤだとこのジャバスクリプトは認識しませんでした。普通のフレームページを表示した時の状態になります。（2005/7/24追記）
JavaScriptでフレーム内文書のパスをクッキーに退避しておいて、フレームセット文書側でクッキーを参照する方法です。掲示板にてcedarさんより教えてもらいました。この方法なら検索したページがフレームの一部としてちゃんと表示されます。ただし、表示者側にてMacintoshを使用していたり、WindowsのIEを使用していてもクッキー表示がオフだと、ブラウザクラッシュが起こってしまうそうです。WindowsのIEでクッキー表示がオンにしてあれば有効でいい方法なのに、なかなか難しいんですね。（cedarさんのサイトにスクリプトはあったのですが、閉鎖されたため参照不能。）
OKWebにもcookieを使用したJavaScriptが載っていました。
このスクリプトは、ジャンプ先でジャンプ元のページが表示されるように指定しておかないと、検索エンジンから飛んできた人が見たいページが表示されないという問題があります。（私の場合、検索したページとは違うページに飛ばされたらそのサイトで探すことはやめて、他の検索結果を探すことがとても多いです。）
<SCRIPT language="JavaScript">
<!--
if(parent.location == location) location = "ジャンプ先に<FRAMESET>タグを記述しているファイルを指定";
//-->
</SCRIPT>
ＣＧＩを使う方法もあるらしいです。
http://www.okweb.ne.jp/kotaeru.php3?q=315500
http://okweb.jp/kotaeru.php3?q=967863
| ||||||
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css"><!--
body{
margin-left: 200;
padding: 300 0; /* わかりやすくするため、padding上下を300に設定。 */
}
.to_bottom{
position: fixed;
top: 110;
left: 10;
}
span.back{
position: fixed;
top: 160;
left: 10;
}
-->
</style>
</head>
<body>
<span class="to_bottom"><a href="#bottom">最下部へ</a></span><br>
<a name="bottom" >ここが最下部。</a>
<span class="back"><a href="../css.html">戻る</a></span>
</body>
</html>
表示例はこちら
|
| ||||||
from DFJの「grayscale」のスタイルシートみたいにスクロールしない目次をつくりたいと思い、OKWebを参考にして書いてみました。スタイルシートのoverflow:autoとposition:absoluteを使用。しかし、IE 6だとちゃんと表示されるのにNN7だとページ自体のスクロールもできなくなってしまうのでやめました。JavaScriptでスタイルシートをブラウザーごとに振り分ければいいんだろうけど、めんどくさい……。
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css"><!--
body{
overflow: hidden;
margin:0;
}
.to_bottom{
position: absolute;
top: 100;
left: 0;
}
.back{
position: absolute;
top: 200;
left: 0;
}
#o{
overflow: auto;
height: 100%;
width: 100%;
padding: 600 50; /* わかりやすくするため、padding上下を600に設定。*/
}
-->
</style>
</head>
<body>
<span class="to_bottom"><a href="#shita">下へ</a></span>
<span class="back"><a href="../css.html">戻る</a></span>
<div id="o" ><br>
<a name="shita">ここが最下辺。</a>
</div>
</body>
</html>
表示例はこちら
★ 本文 ★ ★ 本文 ★ ★ 本文 ★
こんなふうに画像を両端に表示するにはどうするのかなと思い、両端に画像を表示しているサイトを周ってみました。以下のような方法がありました。
body{
background:white url(bg.gif) repeat-y left top;
padding: 0px 0px 0px 150px;
margin: 0px;
}
div#right{
background:white url(bg.gif) repeat-y right top;
padding: 30px 150px 300px 0px;
/*画面いっぱいになるように上下空白を指定しないと右画像が切れてしまう。*/
margin: 0px;
}
<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="both.css">
</head>
<body>
<div id="right">
本文をここに書きます。
</div>
</body>
</html>
表示例はこちら
モニタサイズの幅が1024ピクセルならレイアウトがきれいなのに、幅800ピクセルだと幅が狭くなってかっこ悪くなってしまう場合があります。そこで、モニタサイズによってスタイルシートを振り分けるJavaScriptを書きました。
<html>
<head>
<script language='JavaScript'>
<!--
var w = screen.width //画面幅
var cssHTML = '<link rel="stylesheet" type="text/css" href="'
if( w <= 640 ){//画面幅が640以下なら、スタイルシートsize640.cssを呼び出す。
cssHTML += 'size640.css';
}
else if( w <= 800 ){//画面幅が640より大きく、800以下なら、size800.cssを呼び出す。
cssHTML += 'size800.css';
}
else if( w <= 1024 ){//画面幅が800より大きく、1024以下なら、size1024.cssを呼び出す。
cssHTML += 'size1024.css';
}
else{//画面幅が1024より大きいなら、size1024ov.cssを呼び出す。
cssHTML += 'size1024ov.css';
}
cssHTML += '">'
document.write(cssHTML)
//-->
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<script language='JavaScript'>
<!--
if( screen.width <= 800 ){
document.write('<meta http-equiv="content-style-type" content="text/css"><style type="text/css"><!--body{margin: 0px 150px 0px 0px;padding: 0px;}--></style>');
}
//モニタ幅が800以下なら、スタイルシートでマージンを上0px 右150px 下0px 左0px、パッディングを0pxにする。-->
</script>
</head>
<body>
</body>
</html>
（参考：「JavaScript Lab.」−「第2回 アクセスユーザーのブラウザや環境をチェックする」）
（2004/11/28作成）
『HTML + CSS Handbook』Ｃ＆Ｒ研究所 ソフトバンク パブリッシング 2002年４月５日初版発行 1800円＋税
HTMLとCSSのリファレンスはウェブ上でも読めますが、手元に一冊欲しいと思って買いました。ウェブ上のリファレンスは通読する気になれなかったんですが、本だと全部読めました。この本はフルカラーで、スクリーンショットも多いです。これを読んで、HTMLのclearやCSSのpositionや、IDの使い方を知ることができました。
ただ、巻末の索引はもっと充実させるべきです。私は索引にalign、iframe、targetなどを書き足しました。また、索引はタグ、CSS、アルファベット別に分けられていますが、総索引も欲しかったです。うろ覚えの時に索引を使うため、タグだかCSSだかアルファベットだか覚えていないので。
2002年４月発行のため、WindowsのNN7とOperaの対応状況が載っていないのはしかたないんですが、ドリームキャストやプレイステーション２などゲーム機のブラウザーの対応状況は載せてほしかったところです。
この本より詳しいウェブ上のHTMLとCSSのリファレンスはたくさんありますが、手元に置く一冊としてはよいです。