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

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

galleria

04-05)　　1. メニュー文字列の装飾

　

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

ｃｓｓの書き方 /*-------------------------------------------------------
04-05 ナビゲーションの文字スタイル
-------------------------------------------------------- */
#navi0405 {
margin: 0 0 10px 0;
}
#navi0405 ul{
 width: 680px;
 height: 240px;
 padding: 8px 0 0 20px;
 background-image: url("../images/head-006.jpg");
 background-repeat: no-repeat;
 background-position: left top;
}
#navi0405 li{
 width: 100px;
 height: 60px;
 display: inline;
 font-size: 18px;
 list-style-type: none;
}
#navi0405 a{
 padding: 0 20px 0 15px;
 color: #000080;
 font-weight:bold;
 background-repeat: no-repeat;
}
#navi0405 a:hover {
 color: #FF0000;
 text-decoration: underline;
}
#navi0405 a:active {
 color: #FF9900;
 text-decoration: underline;
}
HTMLの使用例 <div id="navi0405">
<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>