CDP用メニューCSS

CSS

rowList_004のスタイルシート

@charset "Shift_JIS;
@media screen{

#MENU ul
{
	margin: 0;
	padding: 0;
}

#MENU01,
#MENU02,
#MENU03,
#MENU04
{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #FFF;
}

#MENU li.menu-on a,
#MENU01 a:link,
#MENU02 a:link,
#MENU03 a:link,
#MENU04 a:link
{
	/* メニューリンク（該当ページリンクも） */
	display: block;
	padding: 0.25em 20px 0.25em 22px;
	background: #000000 url(img/rowList_004_1.png) no-repeat 8px 50%;
	color: #CCCCCC;
	text-decoration: none;
}

#MENU01 a:visited,
#MENU02 a:visited,
#MENU03 a:visited,
#MENU04 a:visited
{
	/* 訪問済みリンク */
	color: #CCCCCC;
}

#MENU01 a:hover, #MENU01 a:focus,
#MENU02 a:hover, #MENU02 a:focus,
#MENU03 a:hover, #MENU03 a:focus,
#MENU04 a:hover, #MENU04 a:focus
{
	/* オンマウス時とフォーカス時のリンク */
	background-color: #555555;
	background-position: 11px 50%;
	color: #FFFFFF;
}

#MENU li.menu-on a
{
	/* 該当ページリンク */
	text-decoration: underline;
}
}

使用画像（わかりやすいよう、実際の画像とサイズや色味が異なって表示されている場合があります）

： rowList_004_1.png

使いかた

テキストエリア内のスタイルシートをコピーする（JavaScript有効下では、テキストエリア内クリックか、ラベル（テキストエリア上部のrowList_004のスタイルシート）をクリックする等テキストエリアをフォーカス状態にすると内容が「すべて選択」された状態になる）
テキスト編集ソフトを開いてコピーした内容をはりつけ、style.cssとして保存
style.cssを上書き保存する

CSS着せ替えテンプレート企画 > ベースCSS > rowList_004

CDP用メニューCSS

実サンプル

CSS

使いかた