スタイルシートマニア

ホームページカスタマイズ Tips

ナビゲーションメニュー(基本Ⅲ)

今回はナビゲーションにボタンのような効果を付けてみます。

今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。

<div id="menu03">
<ul>
<li><a href="http://source-marine.net/css-mania">ホーム</a></li>
<li><<a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch/">>ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate.html">制作料金</a></li>
</ul>
</div>
#menu03 ul {

 width: 210px;
}
#menu03 li a {
 background: #ddd;
 width: 200px;
 height: 25px;
 padding-top: 5px;
 padding-left: 10px;
 border: 2px outset #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu03 li a:hover {
 background: #fff;
 border: 2px inset #ccc;
}

どうでしょう?ちょっと押してみたくなりませんか?(笑)

ナビゲーションメニュー(基本Ⅱ)

今回は先日作ったナビゲーションをちょっとアレンジしてみます。

基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。

<div id="menu02">
<ul>
<li><a href="http://source-marine.net/css-mania"">ホーム</a></li>
<li><a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch/"">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate.html">制作料金</a></li>
</ul>
</div>

背景色を白で統一、boderを各項目の下線だけにします。そして、ロールオーバーのアクションでtext-align: right;を使ってテキストを右寄せにして、border-right: 10px solid #600;で付箋のような演出を加えるとちょっとクール!かも?最後に、padding-right: 5px;で文字位置を調整して完成です。

#menu02 ul {
 width: 210px;
}
#menu02 li a {
 background: #fff;
 width: 210px;
 height: 25px;
 padding-top: 5px;
 border-bottom: 1px solid #666;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu02 li a:hover {
 background: #fff;
 width: 195px;
 padding-right: 5px;
 text-align: right;
 border-right: 10px solid #600;
}

ナビゲーションメニュー(基本Ⅰ)

ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。

※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい。

まずは、基本的な作り方でホームページの左や右に配置する縦に並べるナビゲーションを作ってみます。
一般的にナビゲーションのマークアップにはul要素とli要素を使ってマークアップします。

<div id="menu01">
<ul>
<li><a href="http://source-marine.net/css-mania">ホーム</a></li>
<li><a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>

まず、#menu01 ulで<div id=”menu01″>の中のul要素に対して横幅を210pxに設定します。横幅は全メニューの文字列が収まる大きさに揃えます。次に、ボーダーの設定ですが、今回はそれぞれのメニューをぴったりくっつけた形のナビゲーションにしますので、ul要素にもボーダーのスタイルを入れていきます。これがもし、一つ一つのメニュー項目に、ある程度の間隔があるタイプのナビゲーションであれば、li a にborder: 1px solid #ccc;とういうような記述だけでOKなのですが、今回はulに上、右、左にボーダーを入れて、li a で各項目に下のボーダーを入れていきます。

#menu01 ul {
	width: 210px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #ccc;
}

今回のデザインにリストマーカーは邪魔なのでlist-style: none;で消しておきます。

#menu01 li {
	list-style: none;
}

次に、リストのリンク要素に対してスタイルを設定します。

まず、backgroundで背景色を指定、横幅を200pxでpadding-leftを10pxで文字位置を調整して合計210px、縦幅を25pxでpadding-topを5pxにして文字の位置を調整して合計30pxに設定します。次に、display:block;でlistをブロック要素にかえて、先ほど書いた下のボーダーを入れます。後は、お好みでtext-decoration入れたり、文字色を変えたり、背景色を変えたりして調整してください。

#menu01 li a {
	background: #ddd;
	width: 200px;
	height: 25px;
	padding-top: 5px;
	padding-left: 10px;
	border-bottom: 1px solid #ccc;
	display:block;
	text-decoration: none;
	color: #333;
}

これだけでも十分ですが、ロールオーバーしたときのアクションが欲しいので#menu01 li a:hoverで設定します。

#menu01 li a:hover {
	background: #fff;
}

 

以上で完成です。