webプログラミング講座 9日目

cssの続きで、リスト、ボックスなどをcssで指定した作り方を学ぶ

前半は、珍しく理解出来ていると思っていたが、練習問題で理解不能

文章を理解出来なかった。

ボックスはよく使用することなのでしっかり理解しておきたい。

<ul><li>タグを使いリストを制作、リストは理解出来ました。

 

HTMLファイル

<!DOCTYPE html>
<html lang”ja”>
<head>
<meta charset”=”utf-8″>
<title></title>
<meta name=”author”content”">
<meta name=”description” content=”">
<meta name=”keywords”content”">
<link rel=”stylesheet” href=”02_list.css”>
<style></style>
</head>
<body>
<h1>リスト</h1>
<h2>果物</h2>
<ul>
<li>リンゴ</li>
<li>ラ・フランス</li>
<li>ミカン</li>
<li>なし</li>
<li>ぶどう</li>
<li>いちじく</li>
<li></li>
</ul>
<h2>果物</h2>
<ol>
<li>リンゴ</li>
<li>ラ・フランス</li>
<li>ミカン</li>
<li>なし</li>
<li>ぶどう</li>
<li>いちじく</li>
</ol>
<ol>
<li>秋田県</li>
<li>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
<ol>
<li>秋田県</li>
<li>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
<ol>
<li value=”2″>秋田県</li>
<li value=”2″>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
</body>
</html>

 

CSSファイル

@charset “utf-8″;
h1{
color:red;
}
ul{
list-style-type:
lower-greek;
}
.mark{
list-style-image:
url(./image/listmark.gif);
}
.mark2{
list-style-image:
url(./image/listmark2.gif);
}
.mark3{
list-style-image:
url(./image/listmark2.gif);
}