株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

04-06)  1. 画像とメニュー文字列

 

背景の画像データの上に、メニューのマークと文字列を追加して装飾する。

cssの書き方 /*-------------------------------------------------------
04-06 ナビゲーションの文字スタイル
-------------------------------------------------------- */
#navi0406 {
 margin: 0 0 10px 0;
}
#navi0406 ul{
 width: 680px;
 height: 220px;
 padding: 8px 0 0 20px;
 background-image: url("../images/head-009.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 line-height: 1.0;
}
#navi0406 li{
 display: inline;
 font-size: medium;
 list-style-type: none;
}
#navi0406 a{
 padding: 0 20px 0 15px;
 height: 60px;
 color: #000080;
 font-weight:bold;
 background-image: url("../images/park_navi_icon.gif");
 background-repeat: no-repeat;
}
#navi0406 a:link { color: #000080; }
#navi0406 a:visited { color: #000080; }
#navi0406 a:hover { color: #FF0000; }
#navi0406 a:active { color: #FF9900; text-decoration: underline;}
#navi0406 li.Home a { background-position: 0 0;}
#navi0406 li.Home a:hover { background-position: 0 -25px;}
#navi0406 li.About a { background-position: 0 -50px;}
#navi0406 li.About a:hover { background-position: 0 -75px;}
#navi0406 li.Bbq a { background-position: 0 -100px;}
#navi0406 li.Bbq a:hover { background-position: 0 -125px;}
#navi0406 li.Access a { background-position: 0 -150px;}
#navi0406 li.Access a:hover { background-position: 0 -175px;}
#navi0406 li.Blog a { background-position: 0 -200px;}
#navi0406 li.Blog a:hover { background-position: 0 -225px;}
HTMLの使用例 <div id="navi0406">
<ul>
<li><a href="../galleria1/index.html">ホーム</a></li>
<li><a href="guide.html">css勉強室メニュー</a></li>
<li><a href="index.html">cssの基本</a></li>
<li><a href="gari02-01.html">レイアウト</a></li>
<li><a href="gari03-01.html">リンクの拡張</a></li>
</ul>
</div>