横並びメニュー
横並びメニューをつくる
真ん中寄せメニュー
<div class="yoko-menu1"><a href="#">はじめに</a> <a href="#">ギャラリー</a> <a href="#">掲示板</a> <a href="#">リンク</a></div>
.yoko-menu1 {
text-align: center;
}
.yoko-menu1 a {
font-size: 100%;
font-weight: normal;
}
text-align: center;
}
.yoko-menu1 a {
font-size: 100%;
font-weight: normal;
}
太字にもできる
<div class="yoko-menu2"><a href="#">はじめに</a> <a href="#">ギャラリー</a> <a href="#">掲示板</a> <a href="#">リンク</a></div>
.yoko-menu2 {
text-align: left;
}
.yoko-menu2 a {
font-size: 120%;
font-weight: bold;
}
text-align: left;
}
.yoko-menu2 a {
font-size: 120%;
font-weight: bold;
}
リンクの色と、マウスオーバー時の色を変えるには…
<div class="yoko-menu3"><a href="#">はじめに</a> <a href="#">ギャラリー</a> <a href="#">掲示板</a> <a href="#">リンク</a></div>
.yoko-menu3 {
text-align: left;
}
.yoko-menu3 a {
font-size: 120%;
font-weight: bold;
color: #6699CC;
}
.yoko-menu3 a:hover {
color: #00CCFF;
}
text-align: left;
}
.yoko-menu3 a {
font-size: 120%;
font-weight: bold;
color: #6699CC;
}
.yoko-menu3 a:hover {
color: #00CCFF;
}
リンクの下線を消すには…「text-decoration: none;」！
<div class="yoko-menu4"><a href="#">はじめに</a> <a href="#">ギャラリー</a> <a href="#">掲示板</a> <a href="#">リンク</a></div>
.yoko-menu4 {
text-align: left;
}
.yoko-menu4 a {
font-size: 100%;
font-weight: normal;
color: #FF3399;
text-decoration: none !important;
}
.yoko-menu4 a:hover {
color: #FFCC33;
}
text-align: left;
}
.yoko-menu4 a {
font-size: 100%;
font-weight: normal;
color: #FF3399;
text-decoration: none !important;
}
.yoko-menu4 a:hover {
color: #FFCC33;
}
※すでにaのスタイルを決めてしまっている場合、「!inportant」を入れないと、IE6以前のブラウザでは反映されない。
