基金訓練に行ってきました。(53日目その１)

本日の内容は下記のとおりです。

１．メニューいろいろ

リスト形式のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※uliタグのブラウザデフォルトの値が、
  　IE7から前のバージョンは、
  　{magin-left: 40px; padding-left: 0}　で、
  　IE8、Firefox、Sfariは、
  　{magin-left: 0; padding-left: 40px}　なので、
  　ブラウザの違いによる見え方の違いをなくすため、margin-leftとpadding-leftを
  　指定する。

リスト形式(リストマークが画像)のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}
.menu li {
list-style-type: none;
background-image: url(icon.gif);
background-repeat: no-repeat;
background-position: 0 3px;
padding-left: 25px;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※以前の記事「基金訓練に行ってきました。(40日目) (07/27)」も参考にしてください。
• ※このブログの左上にある「最近の記事」もこのやり方です。

階層構造のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}
.menu li {
list-style-type: none;
}
li.submenu {
padding-left: 20px;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li class=”submenu”><a href=”menu1_1.html>メニュー１-１</a></li>
<li class=”submenu”><a href=”menu1_2.html>メニュー１-１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li class=”submenu”><a href=”menu2_1.html>メニュー２-１</a></li>
<li class=”submenu”><a href=”menu2_2.html>メニュー２-１</a></li>
</ul>
</div>

• ※リストの入れ子構造で階層化する方法もありますが、上のほうが、頭が混乱しなくてわかりやすいと思います。

備考

まだまだ、メニューのやり方がありますので、残りは次回にします。