講義6日目

講義内容

講義6日目と課題CSS12〜15の解答です。

CSSの記述

list-styleのプロパティ
  • list-style-type

リストのマーカーを指定するプロパティ
ulやolに指定する（※liに指定は間違いではないが避けた方が良い）
[値]　none : マーカーを消す
　　　disc : 黒丸　●
　　　circle : 白丸　○
　　　square : 黒四角　■

  • list-style-image

リストに表示するイメージ画像を表示する
[値]　url(ファイル名）

  • list-style-position

リストの先頭に表示するマーカーの表示位置を指定する
[値]　outside : リストの領域外に表示
　　　inside : リストの領域内に表示

※上記の３つを省略して記述することが可能
半角スペースをはさんで、順不同で並べて記述する
[例] list-style: square url(images/mark.jpg) outside;
この例のように画像とマークが重なる場合は画像を優先する

background(背景）のプロパティ
  • background-attachment

背景画像の位置を固定するか、しないかの指定
[値]　fixed : 固定。スクロールしても背景は変わらない
　　　scroll : 可変。スクロールしていくと一緒に動く

  • background-position

背景の開始位置。値は横方向　縦方向の順番に記述し、間は半角スペースで開ける。
またはpx表示や％表示などでも記述も可能
[値]　横方向　right center left
　　　縦方向　top center bottom

displayのプロパティ

displayプロパティは、ブロック要素、インライン要素の表示形式を指定
たとえば　a要素のようにインライン要素であってもブロック指定することでブロックレベルでとして領域を指定できるようになる
[値] block : ブロックレベルで表示。アンカーに指定すると、マウスのクリック可能部分をブロックで指定できる。
　　inline : インラインレベルで表示
　　none : ボックスが表示されない

Illustrator

グラデーションツールとブレンドツール

受講内容のまとめは以上です。
続いてCSS課題です。
CSS12

<!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>擬似クラス（1）</title>
<style type="text/css">
<!--
.nav ul {
  color: #FF1700;
}
.nav li a:link, .nav li a:visited {
  text-decoration: none;
}
.nav li a:hover {
  color: #F98605;
  text-decoration: underline;
}
-->
</style>
</head>
<body>
<div class="nav">
<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>

CSS13

<!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>擬似クラス（1）</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
.nav ul {
  list-style-type: none;
  width: 170px;
  height: auto;
  margin: 20px;;
  border-top: 1px solid #000;
 
}
.nav li a {
  display: block;
  text-decoration: none; 
  color: #000000;
  width: auto;
  height: auto;
  padding: 10px;
  background-color: #F3F3F3;
  border-bottom: 1px solid #000;
}
.nav li a:hover {
  color: #F98605;
}
-->
</style>
</head>
<body>
<div class="nav">
<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>

CSS14

<!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>擬似クラス（1）</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
.nav {
  font-weight: bold;
}
.nav ul {
  list-style-type: none;
  width: 170px;
  height: auto;
  margin: 20px;
 
}
.nav li a {
  display: block;
  text-decoration: none; 
  color: #fff;
  width: auto;
  height: auto;
  margin: 1px;
  padding: 10px;
  background-color: #22952D;
}
.nav li a:hover {
  background-color: #FF9801;
}
-->
</style>
</head>
<body>
<div class="nav">
<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>

CSS15

<!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>擬似クラス（1）</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
.nav {
  font-size: 0.8em;
  font-weight: bold;
}
.nav ul {
  list-style-type: none;
  width: 170px;
  height: auto;
  margin: 20px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
 
}
.nav li a {
  display: block;
  text-decoration: none; 
  color: #000;
  width: auto;
  height: auto;
  padding: 5px 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.nav li a:link {
  border-left: 10px solid #D5EAEF;
}
.nav li a:visited {
  border-left: 10px solid #0176AB;
}
.nav li a:hover {
  border-left: 10px solid #00B9F2;
}
-->
</style>
</head>
<body>
<div class="nav">
<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>