★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

テーマ１１．ページ移動ナビ１を作る

ページを移動するためにはページ移動用のナビゲーションが必要です。
今回は表を利用したページ移動ナビの作成方法を紹介します。
実際の表示はサンプルページのエをご覧下さい。

＜htmlの記述例＞

＜htmlの説明＞
tableタグにclassを指定しています。
この例ではlayout1というclassの指定です。
もちろんlayout1のスタイルはcssファイルに書かれています。

＜追加説明Ａ＞
tableは表全体を示す要素です。
trは表の行を示す要素です。
tdは表のセルデータを示す要素です。
上記の例では、tableの中にtrが一つあります。
そして、そのtrの中にtdが三つあります。
これは、三つのデータが横に並んだ一行の表だという意味です。

＜cssファイルの記述例＞

＜cssファイルの説明＞
margin-right: auto;
margin-left: auto;
　この二行で表全体が中央になる
　（これはテーマ５で出てきましたね）
layout1 { border: 1px solid #ff9933; }
　表全体の外枠の線の太さ、種類、色を指定
　（これはテーマ６で出てきましたね）
border-collapse: collapse;
　隣接するセルの枠線を重ねて表示する
　border-collapse:separate; にすると枠の間隔をあけて表示する
border-spacing: 0;
　隣接するセルの枠と枠の間隔を指定する
　border-collapse:separate; の場合のみ必要
background-color: #ffff66;
　表全体の背景色を指定
td { padding: 0.1em 0.5em; }
　セル内の余白を指定
td { border-right: 2px solid #ff9933; }
td { border-bottom: 2px solid #ff9933; }
　この二行でセルの右と下の枠線を指定
text-decoration: none;
　リンクのアンダーラインを無くす
　（これはテーマ７で出てきましたね）
left: 1px;
top: 1px;
position: relative;
　この三行でマウスオーバー時に文字が右下に動く
　標準の位置より左から1px、上から1px動かした位置に表示される

＜追加説明Ｂ＞
リンクのアンダーラインを無くした場合、リンク部分が判別しにくくなります。
そのため、上記の例ではマウスオーバー時に文字が動くようにしています。
このように、a:hoverで特別な指定をしておいた方が無難です。
アンダーラインを復活させたいなら、text-decoration:underline;
文字を太字に変えたいなら、font-weight:bold;
文字を斜体に変えたいなら、font-style:oblique;
簡単にできますので、何らかの指定をするよう心掛けて下さい。

以上のような方法で、表を利用したページ移動ナビを作成することができます。