REDLINE MAGAZINE | [B]RLMの作り方・その３-２

[B]RLMの作り方・その３-２

前回のメニュー部分の続き記事です。
>>前回の「[B]RLMの作り方・その３-１」はこちら

メニュー部分のXHTMLソースの巻

さっそくその部分のソースです。

<p id="naviskip"><a href="#main" title="メニューをスキップ">メニューをスキップして本文へ</a></p>
<div id="navi">
<h2 id="recent">最近のエントリ</h2>
<div class="navibox">
<ul class="reclist"> 
<li><a href="#">テキストリンク</a></li> 
<li><a href="#">テキストリンク</a></li> 
･･･略･･･
</ul>
<!--/navibox --></div>
<h2 id="category">カテゴリー別アーカイブ</h2>
<div class="navibox">
<h3><a href="http://redline.hippy.jp/lab/laboratory.php">実験ネタカテゴリ一覧</a></h3>
<ul class="catelist">
<li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li> 
･･･略･･･
</ul>
ここにもh3タグ、ulタグなどでリンクテキストが続きます。
･･･略･･･
<!--/navibox --></div>
<!--/navi --></div>

上に書いたソースを図にすると左図のようになります。(大枠)まずメニュー全体部分はdiv id="navi"で括ってあります(左図・一番外側の赤い枠)。<h2 id="recent">･･･</h2>の部分は後で説明するとして、その下のdiv class="navibox"(左図・青い枠)で「最近のエントリ」や「カテゴリアーカイブ」のそれぞれのテキストリンクを括っています。

重なり順は先のエントリに書いたとおり、青い枠は一番下、その上にオレンジ色の斜線のかかったレイヤー、h2、h3でマークアップされた部分とulでマークアップされた 部分などはテキストリンクをちゃんとクリックできるように一番上に来るようにCSSで指定しています。

オレンジ斜線の部分は何だろうと思われるかもしれないですが、下で説明します。それぞれの場所ごとにXHTMLとCSSを見ていきます。

p id="naviskip"部分は何？の巻

まず一行目の<p id="naviskip">･･･</p>の部分ですが、これは普通のブラウザで見る分にはそのリンクは表示されません。音声ブラウザ等一部の閲覧環境でのみメニューをスキップしてエントリ部分へジャンプするためのリンクです。普段サイトを作るときに置くことが多いので癖で入れてました。

先のエントリで書いた花や枝の入った絵のレイヤーですが、実はこのp id="naviskip"の背景画像として表示しています。その部分のCSSソースはこんな感じです。

#naviskip{
	position:absolute;
	top:313px;
	left:0px;
	width:459px;
	height:461px;
	background:url(xxx.gif) no-repeat;
	text-indent:-9999px;
	z-index:4;･･･別に要らなかった(汗)
	}

灰色と白色の四角が見えてる部分が透過されてる部分です。1つ上の図で言うとオレンジの斜線部分に当たります。

まず先の記事でも書いた通り、ここはレイヤーとして下のテキストリンクを囲ってる枠とテキストリンク部分の間に挟みたい部分です。ですので、position:absolute;でコンテンツ本体から孤立したレイヤー的な存在にしてtopとleftで位置を合わせます。その後、幅と高さを指定し背景画像の指定。ここでは左の画像を指定しています。上からのグラデーションが伸びてる部分と花、枝の絵部分以外は透過して下に置く予定のテキストリンク回りの薄い水色の枠付きボックスが透けて見えるようにしています。また、そのpタグに入っているテキストリンクはtext-indentで画面外に飛ばしています。

「z-index:4;」の部分ですが、別に値は「4」じゃなくてもいいです。確か最初にコーディングしてた時に別の場所に違うz-indexを指定しててその数字が４以下だったので、その名残で「4」のままになってるだけで特に意味はありません。違うーー。今見直してみると、別にここにz-indexは必要ないですね。すいません。当初はここにz-indexが必要な組み方をしていたのですが、最終的に要らなくなったものの削除し忘れてるだけでした。ごめんなさい。

div id="navi"部分の巻

上の方の図で言うと赤い線の枠です。メニュー部分をすっぽり囲っています。この#naviに指定しているcssソースはこんな感じです。

#navi{
	width:459px;
	padding:57px 0px 0px 0px;
	}
#navi a{
	color:#09668e;
	text-decoration:none;
	}
#navi a:hover{
	color:#09668e;
	text-decoration:underline;
	}	

まず幅の指定をしています。その後paddingで余白指定。ここでは上部分に57pxのpaddingを入れて、「Recent Entry」と書かれている部分がその位置に置かれるようにしました。「#navi a」や「#navi a:hover」はこの#naviボックスの中でのリンクに対しての色などの指定です。通常時は下線なし、hover時に下線が出るようにしました。(visitも指定した方がいいですね･･･。)

そんで･･･また続きは次回に続きます･･･。

2007年04月16日 21:30 | Red | パーマリンク