仮想ナビゲーションメニューバー実験と解説のページ

ホーム

実行すると以下ようになります。

解説

「BOφWY時代の布袋寅泰さんは神様です!」で各ページの上のほうでサイト内移動のために 使っている一見画像っぽくも見えるけど、実はただのテキストリンクを横に並べただけのWeb部品です。

外部スタイルシート(css)で定義しています。

実験

実験方法がわからない場合は、次のような手順で実施してください。

  1. 適当な名前で「空のウェブサイトを作成」でウェブサイトを新規作成します。
  2. 作成したウェブサイトフォルダーを右クリックし「新しい項目の追加」でCSS(名前:hiroshi1986.css)を作成し、下のhiroshi1986.cssをコピー&ペーストします。
  3. 作成したウェブサイトフォルダーを右クリックし「新しい項目の追加」でHTML(名前:virtual_navigation_menubar.html)を作成し、下のvirtual_navigation_menubar.htmlをコピー&ペーストします。
CSS(hiroshi1986.css)は以下のようになっています。
.nav_top_button
{
/* ボタンの中の背景色 */
background-color: #FFFFFF;
/* ボタンの枠のスタイルと色 */
border: medium groove #CC9900;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.25em;
padding-top: 0.25em;
}
.nav_top_frame
{
margin: 0em 0em 0em;
text-align: center;
padding-right: 0em;
padding-left: 0em;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
.nav_top_frame a:hover
{
background-color: #e6e6fa;
font-weight: bold;
color: blue;
text-decoration: none;
}
HTML(virtual_navigation_menubar.html)は以下のようになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<title>仮想ナビゲーションメニューバーのページ</title>
</head>
<body>
<div class="nav_top_frame">
<a href="http://www.hiroshi1986.net/index.html" target="_self" class="nav_top_button" title="ホームへ戻ります">ホーム</a>
<a href="http://www.hiroshi1986.net/web_forum/wforum.cgi" target="_self" class="nav_top_button" title="掲示板へ移動します">掲示板</a>
<a href="http://www.hiroshi1986.net/contents/material/material.html" target="_self" class="nav_top_button" title="資料ページへ移動します">資料</a>
<a href="http://www.hiroshi1986.net/contents/equipments/equipment.html" target="_self" class="nav_top_button" title="機材ページへ移動します">機材</a>
<a href="http://www.hiroshi1986.net/contents/setting/setting_index.html" target="_self" class="nav_top_button" title="音作りページへ移動します">音作り</a>
<a href="http://www.hiroshi1986.net/contents/sound/login-safe_room.html" target="_self" class="nav_top_button" title="音源ページへ移動します">音源</a>
<a href="http://www.hiroshi1986.net/contents/edit/sound-source_rec.html" target="_self" class="nav_top_button" title="録音ページへ移動します">録音</a>
</div>
</body>
</html>