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

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


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

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

1.メニューいろいろ(その2)

罫線で仕切られたメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
width: 100px;
}
.menu ul {
border-top: solid 1px #999966;
list-style-type:none;
}
.menu li {
border-bottom: solid 1px #999966;
padding: 5px 0;

}
.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>

ボックス表示のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:95px;
padding-left:5px;
background-color:#0c907c;
color:#ffffff;
border-top:solid 1px #999966;

}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-color:#0ce0c0;
color: #999966;
}
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>
  • ※a要素をブロック要素にした時、ボックスサイズはa要素で指定しないと、IE6では、リンクが文字だけになってしまいます。
  • ※IE6では、メニュー4の下のボーダーが、表示されません。

画像が変化するメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:80px;
padding-left:20px;
background-image:url(menu.gif);
background-repeat:no-repeat;

color:#ffffff;
border-top:solid 1px #999966;
}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-position:0 -30px;
color: #999966;
}
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>
  • ※IE6では、メニュー4の下のボーダーが、表示されません。

罫線区切り横長メニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
display:inline;
border-right:solid 1px #aaaaaa
padding:0 10px
;

}
.menu li a {
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
color: #999966;
}
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>
  • ※IE6では、メニュー4の右のボーダーが、残ります。

罫線区切り横長メニュー(背景部分もクリック可)

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
float:left;

}
.menu li a {
display:block;
width:100px;
line-height:30px;
text-align:center;

border-right:solid 1px #aaaaaa;
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
background-color:#bbfdb5;
}
.clear {
clear:both;
}
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 class="clear"></div>
</div>
  • ※IE6では、メニュー4の右のボーダーが、残ります。




実習で使用している教本