- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

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


基金訓練(Webデザイン・プログラミング科)の53日目に行ってまいりました。
53日目は、HTML&CSSプログラミングの実習です。

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

1.メニューいろいろ

リスト形式のメニュー

↑こんな感じです。↑

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>メニュー1</a></li>
<li><a href=”menu2.html>メニュー2</a></li>
<li><a href=”menu3.html>メニュー3</a></li>
<li><a href=”menu4.html>メニュー4</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>メニュー1</a></li>
<li><a href=”menu2.html>メニュー2</a></li>
<li><a href=”menu3.html>メニュー3</a></li>
<li><a href=”menu4.html>メニュー4</a></li>
</ul>
</div>

階層構造のメニュー

↑こんな感じです。↑

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>メニュー1</a></li>
<li class=”submenu”><a href=”menu1_1.html>メニュー1-1</a></li>
<li class=”submenu”><a href=”menu1_2.html>メニュー1-1</a></li>
<li><a href=”menu2.html>メニュー2</a></li>
<li class=”submenu”><a href=”menu2_1.html>メニュー2-1</a></li>
<li class=”submenu”><a href=”menu2_2.html>メニュー2-1</a></li>
</ul>
</div>
  • ※リストの入れ子構造で階層化する方法もありますが、上のほうが、頭が混乱しなくてわかりやすいと思います。

備考

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



実習で使用している教本