講義7日目

講義内容

講義7日目の受講内容と課題の解答です。

Illustrator

Web素材に使用するマークおよび背面の作成
  1. 形状を作成
  2. グラデーションツールなどを使って色を塗る
  3. 変形ツールで必要な大きさにリサイズ
  4. ピクセルプレビューでアンチエイリアスを直す
  5. 必要な部分を四角で囲んで、アートボードに変換
  6. Webおよびデバイス用に保存
複合パスとクリッピングマスク

複合パスとは、複数のパスをひとつの複合パスにまとめ、重なり合う部分を透明にすることで、抜けて見えるようになること。
クリッピングマスクはその逆で、重なり合う部分のみが見えるようになる。画像を切り抜く時に使われることが多い。

CSSの記述

Illustratorにて作成したマークおよび背面を使って縦メニューを作成


つづいてCSS18〜21の解答です。
【CSS18】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>横ナビ</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0; 
}
.menu {
  width: 755px;
  margin: 50px 0 0 50px;
}
.menu ul {
  list-style-type: none;
  width: 755px;
  border: 1px solid #fff;
  overflow: auto;
}
.menu li {
  font-size: 1.0em;
  text-align: center;
  float: left;
  display: inline;
  width: 150px;
  line-height:40px;
}

.menu li a {
  display: block;
  padding: 0 10px;
  border-right: 1px solid #ccc;
}
.menu li.first a {
  border-left: 1px solid #ccc;
}
.menu li a:link, .menu li a:visited {
  color: #000;
  text-decoration: none;
} 
.menu li a:hover {
  color: #FBB82B;
}
-->
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

【CSS19】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>横ナビ</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0; 
}
.menu {
  width: 755px;
  margin: 50px 0 0 50px;
}
.menu ul {
  list-style-type: none;
  width: 755px;
  border-left: 1px solid #ccc;
  overflow: auto;
}
.menu li {
  font-size: 1.0em;
  text-align: center;
  float: left;
  display: inline;
  width: 150px;
  line-height:40px;
  border-right: 1px solid #ccc;
}
.menu li a {
  display: block;
  padding: 0 10px;
}
.menu li a:link, .menu li a:visited {
  color: #000;
  text-decoration: none;
} 
.menu li a:hover {
  background-color: #EDEAB5;
}
-->
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

【CSS20】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>横ナビ</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0; 
}
.menu {
  width: auto;
  margin: 50px 0 0 50px;
}
.menu ul {
  list-style-type: none;
  width: auto;
  background-color: #22952D;
  overflow: auto;
}
.menu li {
  font-size: 1.0em;
  text-align: center;
  float: left;
  display: inline;
  width: 150px;
  line-height:40px;
  border-right: 1px solid #fff;
}
.menu li a {
  display: block;
  padding: 0 10px;
}
.menu li a:link, .menu li a:visited {
  color: #fff;
  text-decoration: none;
} 
.menu li a:hover {
  background-color: #02C55F;
}
-->
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>

【CSS21】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>横ナビ</title>
<style type="text/css" media="screen,print">
<!--
* {
  margin: 0;
  padding: 0; 
}
.menu {
  width: 755px;
  margin: 50px 0 0 50px;
}
.menu ul {
  list-style-type: none;
  width: 755px;
  border: 1px solid #BABABA;
  overflow: auto;
}
.menu li {
  font-size: 1.0em;
  text-align: center;
  float: left;
  display: inline;
  width: 150px;
  line-height:40px;
  border-right: 1px solid #BABABA;
}
.menu li a {
  display: block;
  padding: 0 10px;
}
.menu li a:link, .menu li a:visited {
  color: #000;
  text-decoration: none;
  background: #DEDEDE url(images/btn.jpg) repeat-x;
} 
.menu li a:hover {
  background: #DBDFA4 url(images/btn_o.jpg) repeat-x;
}
-->
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</body>
</html>