リフォーム失敗、もったいないＣＳＳ達

このページのテクはJavaScriptやフレームを使いません。せっかくがんばって考えたのに、没になったテクニックです。cssだけでフレームを作ることを疑似フレームといいます。疑似フレームを一ひねりしてみました。が、問題アリのテクニックです。

CSSのみで
お月様ナビゲーション

正式に何ていうのか私は知りません。便宜的に「月ナビ」と呼ぶことにします。このページのナビに使っているものです。何故、月かは「上に浮いてる。いつも見守ってくれる。」イメージなので。今上にあるメニューナビに注目しながらスクロールしていただければ意味がわかると思います。

参考にしたページは、
http://desperadoes.biz/style/p_frame.php
です。
CSSによる疑似フレームについて、詳しく解説。説明を見ながら自分で組みたい方や、下のコードの意味を調べたい方にお薦め。CSSのことやテンプレなど、きちっとした説明をされています。他のページではCSSの使い方をセンスのいい例を沢山挙げながら説明されてますので、罫線の色を少し変えられるのがＣＳＳの人も、見て損はないです。

月ナビの作り方

１．まず、普通にデザインします。

既にページが在る方はナビゲーション（メニュー）部分と本文を明確に分けられるようにします。月ナビだけを浮かせるので、完全に分離する必要があります。分離さえできれば、テーブルレイアウトでもかまいません。


<html>
ナビゲーション
本文
</html>

２．互換モードを宣言し、ナビゲーションと本文に名前を付けます。

モードを間違えると、月ナビできません。名前はclassでもかまいません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<div id="navi">ナビゲーション</div>
<div id="honbun">本文</div>
</html>

上では <div id="navi"> と書いてますが、無理に <div> にする必要はありません。リストを使ったメニューを作っている場合は <ul id="navi">、テーブルの場合は <table id="navi"> とブロック要素にnaviと名前をつけて下さい。

他のモードでないと困る方は、標準モード・strict も使える擬似フレームをご用意しました。マウスの操作性が悪くなります。こっちのモードは２枚重ね式擬似フレームの考え方で紹介していますが、かなり単純です。

３．CSS はこんなかんじ。

ここで変えていいのは●のみ。骨組みのみですので、減らすと何かがおかしくなります。項目を増やす時は、いろんなブラウザで検証してみてください。

*{
	margin:0;		/*お約束*/
	padding:0;
	}

body {	_overflow:hidden;	/*●ページ全体にbackgroundの場合はbodyに*/
	}
#honbun {			/*本文　　（ナビ以外全部を大囲い。）*/
	_overflow:auto; 	/*触るな危険*/
	height:100%;		/*触るな危険IEでスクロールバーが消える*/
	z-index:2;		/*触るな危険（２番目）に線画する*/
	}

#navi {    
	position:fixed;		/*触るな危険IE以外スクロールバー*/
	_position:absolute;  	/*触るな危険IEスクロールバー*/
	z-index:3; 		/*触るな危険一番上（３番目）に線画する*/
	top:20px;  		/*●ナビ位置　お好きな数字をどうぞ*/
	right:0px; 		/*●ナビ位置　お好きな数字をどうぞ*/
	left:0px; 		/*●width外す。autoにするとオペラ変*/
	}

最後に高さを調節したら、完成です

上で完成したのは、枠組みだけです。ナビゲーションの高さとぶつからないように本文を調整します。実際の本文の一番上に来るもののマージンで調整してください。上の#honbunにマージンを挿入すると、height:100%;の影響で崩れます。勿論、わざと重ねたり、透過gifなどで別の効果を狙うのも面白いですね。また、画面固定の動かない、ヘッダ・フッタなど、応用範囲は広いと思います。

欠陥・問題点

この「月ナビ」、少し問題があります。問題が判明したので没なのですが。
１．検索のキャッシュにひどく嫌われる。（ヤフー・グーグル・MSNで確認）
２．検索のキャッシュがかなり見にくく表示される。
３．フリーのレンタルサーバーで表示が崩れる。規約違反になる可能性が高い。
です。

もう少し詳しく書きます。
１．２．キャッシュされる時もありますが、キャッシュの説明文の上に「月ナビ」が乗り、説明が読めなくなったり、スクロールが出来なくなったりしました。
1.キャッシュがまったく表示されなくなり、その旨の表示が出る。
2.検索エンジン八分状態に。
3.広告が自動で挿入されるタイプのレンタルサーバーで、自動挿入の機能とぶつかり、表示が崩れる。最悪の場合、広告が表示されない。フリーのレンタルサーバーの場合、これは重大な規約違反です。コンテンツまるごと削除されても仕方が無い。

まず、下の様にキャッシュの説明とナビ部分が重なります(Yahooも)。放置したら、２週間後、上位にヒットはするのですが、キャッシュしていませんと表示されました。また、URL検索がまったく効かなくなりました。更に放置したら、八分状態になります。違う原因かもしれませんが、このやり方はあきらめ、月ナビでなく同じデザインをページの上下に入れることにしました。まもなくキャッシュされるようになりました。レイヤーがいけないのかも。アリゴリズムの変更の時期と実験した時期が重なりますし、企業によるグーグル八分サイトにリンクを貼り始めた時期とも重なりますので、何が悪いかは一概に言えません。リンクは増やしてますが、月ナビを使わなくしたら、ＵＲＬ検索も出来、キャッシュも表示されるようになりました。

2006年７月には、かなり上位に表示されていた（Yahoo・Googleとも）。
８月にはキャッシュ外されていた（YahooはURL検索もできなかった・Googleも低い評価）。
９月にはまた、信じられない程上位に表示されている（両エンジンとも）。
2007年７月追記１年を通して、上位にいったり、キャッシュ表示できませんと表示されたり色々です。上位下位は他のサイトとの兼ね合いもあるのでこの問題とはあまり関係ないのですが、キャッシュの問題は謎としかいえないです。