CSS課題01〜10 - はれあめはれ

【CSS01】

文字色と背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS01</title>
<style type="text/css">
h1 {
   color: #483d8b;
}
h3 {
   color: #fffafa;
   background-color: #556b2f;
}
p  {
   color: #2e8b57;
}
</style>
</head>
<body>
<h1>style要素</h1>
<h3>style element</h3>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

【CSS02】

文字色と背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS02</title>
<style type="text/css">
#container {
            background-color: #e35e55;
            width: 500px;
            padding: 10px;
}
h1 {
   font-size: 40px;
   color: white;
   padding-left: 5px;
}
h2 {
   font-size: 20px;
   color: white;
   background-color: #45001a;
   padding: 3px 20px;
}
p  {
   color: black;
   background-color: #fffbab;
   padding: 10px;
   line-height: 2;
}
</style>
</head>
<body>
<div id="container">
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</div>
</body>
</html>

【CSS03】

リンクの文字色（擬似クラス）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS03</title>
<style type="text/css">
a:link {
	color: coral;
}
a:visited {
          color: turquoise;
}
a:hover {
        color: skyblue;
}
a:active {
	 color: lawngreen; 
}
ul {
   list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
</html>

【CSS04】

リンクの背景色（擬似クラス）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS04</title>
<style type="text/css">
.menu  {
        font-weight: bold;
        list-style: none;
        line-height: 1.8;
        width: 200px;
}
.menu a {
        text-decoration: none;
        display: block;
        padding: 3px;
        border-bottom: solid 2px white;
}
.menu a:link {
	color: white;
        background-color: coral;
}
.menu a:visited {
          background-color: turquoise;
}
.menu a:hover {
        background-color: skyblue;
}
.menu a:active {
	 background-color: lawngreen;
}

</style>
</head>
<body>
<ul class="menu">
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
</html>

【CSS05】

背景色と余白

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS05</title>
<style type="text/css">
#container {
           width: 500px;
}
h2 {
   color: white;
   background-color: #008080;
   margin: 10px 10px 0 10px;
   padding: 1em;

}
p {
  color: black;
  background-color: #99cccc;
  margin: 0 10px 10px 10px;
  padding: 1em;
  line-height: 1.5;
}
</style>
</head>
<body>
<div id="container">
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</div>
</body>
</html>

【CSS06】

背景画像を設定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS06</title>
<style type="text/css">
body {
     background-image: url(bee.jpg);
}
</style>
</head>
<body>
</body>
</html>

【CSS07】

背景画像を設定（水平方向に繰り返し）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS07</title>
<style type="text/css">
body {
     background-image: url(border.jpg);
     background-repeat: repeat-x;
}
h1  {
    color: #003333;
    font-size: 40px;
    font-family: Georgia, sans-serif;
}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【CSS08】

背景画像を設定（垂直方向に繰り返し）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS08</title>
<style type="text/css">
body {
     background-image: url(border2.jpg);
     background-repeat: repeat-y;
}
h1  {
    color: #fff0f5;
    font-size: 30px;
    font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【CSS09】

背景画像と枠線

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS09</title>
<style type="text/css">
body {
     background-color: #f8f8ff;
     background-image: url(wbg.jpg);
     background-repeat: repeat-y;
}
#container {
           width: 400px;
           padding-left: 90px;
}
h1  {
    color: #9933cc;
    font-size: 35px;
    font-family: Arial, sans-serif;
    border-bottom: dotted 5px #ccccff;
    padding-bottom: 10px;
}
p  {
   border-bottom: dotted 5px #ccccff;
   padding-bottom: 15px;
   line-height: 1.5;
}  
</style>
</head>
<body>
<div id="container">
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</div>
</body>
</html>

【CSS10】

背景画像（繰り返さない）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSS10</title>
<style type="text/css">
body {
     background-image: url(frog.gif);
     background-repeat: no-repeat;
     background-position: left top;
}
#container {
           width: 350px;
           margin-top: 50px;
           padding-left: 170px;
}
h1  {
    color: black;
    font-size: 30px;
    font-family: "MS P明朝", "MS P Mincho", serif;

}
p  {
   font-size: 18px;
   padding-top: 20px;
   line-height: 1.5;
}  
</style>
</head>
<body>
<div id="container">
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</div>
</body>
</html>