準備課題CSS　9 ,10

CSS

【CSS09】 背景画像と枠線

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta equiv="Content-Style-Type" content="text/css"/>
<title>背景画像と枠線</title>
<style type="text/css">
<!--
body{ 
	width:430px;
	background-image:url("image/white.jpg")
	background-repeat:repeat-y;
	background-position:left;
}
h1{
	font-size:30px;
	font-weight:bold;
	color:#850000;
	border-bottom:5px dashed;
	border-color:#aaaaaa;
}
p{
	font-size:18px;
	color:#000000;
}
-->
</style>
	
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向および繰り返しをしていしています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試して見ましょう。</p>
</body>
</head>
</html>


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

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>古池や蛙飛び込む水の音</title>
<style type="text/css">
<!--
body{
	width:350px;
	background-image:url("image/flog.jpg");
	background-repeat:no-repeat;
	background-position:left top;
	line-height:1.4;
}
h1{
	font-size:30px;
	font-weight: bold;
	font-family:serif;
}
p{
	font-size:18px:
	font-family:sans-serif;
}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遥かに余情があるでしょう。<br>
明治以降、近代化された俳句が盛んになると共に、連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。
</p>
</body>
</html>