レッツFC2ブログ！ CSSカテゴリ一覧

カテゴリ： CSS の記事一覧

| |

CSSで横に解説が表示される縦メニューを設置してみる

　2008-02-25

　ちょっと強引な方法ですがCSSを使ってマウスを乗せたときに解説が横に表示されるメニューを設置してみます。CSSのみなので軽快に動いてくれます。

CSSで横に解説が表示される縦メニューを設置してみるの続きを読む

カテゴリ：CSS トラックバック(0) コメント(0)

CSS メニュー

スタイルシートでおしゃれな横メニューを設置

　2008-02-24

　CSSを使ったおしゃれな横メニューを紹介しているサイトを見つけたので紹介します。サンプルも提供されているので設置も簡単かと思います。

スタイルシートでおしゃれな横メニューを設置の続きを読む

カテゴリ：CSS トラックバック(1) コメント(1)

メニュー CSS 海外サイト

CSSで縦にも伸びる横メニュー

　2008-01-06

　JavaScriptを使わずCSSのみを使って設置できる下にも伸びる横メニューです。縦に伸びるのでコンテンツを増やしやすいと思います。

　で、HTMLのソースはこちら　さらにCSSはこちらになります

<STYLE type="text/css">
<!--


#navi-div{
	background-color: #ff6600;
	width:320px;
	text-align:center;
	font-size:12px;
　　　　　　　margin-top : 3px;
　　　　　　　margin-bottom : 15px;
　　　　　　　border-top-width : 3px;
　　　　　　　border-top-style : solid;
　　　　　　　border-top-color : #0000c2;
}

#menu{
	padding : 0px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
}
#menu li {
	float:left;
	list-style-type: none;
	text-align: center;
	background-color: #fff;
}

#menu .sub li {
	clear: left;
}

#menu li a {
	display: block;
	font-size:12px;
	width: 80px;
	text-decoration: none;
	padding : 1px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
　　　　　　　color : #fff;
  　　　　　　background-color : #ff6600;
}

#menu .sub a {
	border-top: none;
  background-color : #ff9900;
}

#menu a:hover {
	background-color: #0000c2;
}

.sub {
	padding : 0px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
	display: none;
}
#menu li:hover .sub {
	display: block;
	position: absolute;
}

#menu a.top:hover{
	background-color: #02b300;
}

-->
</STYLE>

【補足です】
どうやらブラウザによって表示されないケースがあるようです。

カテゴリ：CSS トラックバック(0) コメント(0)

CSS メニュー

スタイルシートによる横メニューを設置

　2008-01-06

　このブログでは使用していませんが、他のサイトではよく利用しているスタイルシートによる横メニューです。色、長さ、メニューの数はCSSで自由に変更できます。

CSSは下記のようになっています。

<STYLE type="text/css">
<!--

#navi_top{
  background-color: #ff6600;
  width:400px;
  text-align:center;
  font-size:12px;
  margin-top : 3px;
  margin-bottom : 15px;
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #0000c2;
}
#navi_top span{
  padding:3px;
  font-size:12px;
  display:block;

}
#navi_top A{
  display:block;
  width:80px;
  color: #fff;
  padding-top: 1px;
  float: left;
  text-decoration: none;
  font-size:12px;
  background-color : #ff6600;
}

#navi_top ul{
  display:inline;
  margin:0px;
  padding:0px;
}
#navi_top li{
  display:inline;
  margin:0px;
  padding:0px;
  list-style-type:none;
}

#navi_top a:hover{
  background-color:#0000c2;
}

#navi_top a.top:hover{
  background-color: #02b300;
}

#navi_top a.blog:hover{
  background-color: #990033;
  font-size:12px;
}

-->
</STYLE>

class指定するとマウスを乗せたときの色を変えられます。

カテゴリ：CSS トラックバック(0) コメント(0)

CSS メニュー

≪　トップページへ｜このページの先頭へ　≫

日	月	火	水	木	金	土
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	-	-