masayan-webの日記

CSS14　ボックスモデル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ボックスモデル(14)</title>
<style type="text/css">
<!--
*{
margin:10px;
}
h2 {
background-color: #629665;
}
p {
background-color: #95C998;
line-height:1.6em;
font-weight: bold;
}
h2,p {
color: #FFF;
padding:15px;
font-family:sans-serif;
width: 400px;
margin: 0px;
}
-->
</style>
</head>
<body>
<h2>BOX and PADDING</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>

CSS13　ボックスモデル

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ボックスモデル(13)</title>
<style type="text/css">
<!--
* {
margin: 0;
}
body {
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120417/20120417094230.jpg");
background-repeat: repeat-y;
}
h2 {
color: #FFF;
background-color: #c3c;
font-family:sans-serif;
width:70px;
margin: 50px 0 20px;
padding: 5px:
}
p {
font-family:sans-serif;
line-height:1.6em;
font-weight: bold;
margin-top: px;
margin-left: 70px;
width: 340px;
}
-->
</style>
</head>
<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

CSS12　ボックスモデル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ボックスモデル(12)</title>
<style type="text/css">
<!--
p {
color:#fff;
font-family:sans-serif;
line-height:1.6em;
font-weight: bold;
background-color:#00bfff ;
margin-top: 50px;
margin-left: 50px;
width: 300px;
padding: 5px;
border:solid 5px #fc0;
}
-->
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

CSS11 　ボックスモデル

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ボックスモデル(11)</title>
<style type="text/css">
<!--
p {
color:#fff;
font-family:sans-serif;
line-height:1.6em;
font-weight: bold;
background-color:#00bfff ;
margin-top: 50px;
margin-left: 50px;
width: 340px;
padding:5px;
}
-->
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

CSS08 背景画像

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景画像（垂直方向に繰り返し)</title>
<style type="text/css">
<!--
body {
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415205600.jpg");
background-repeat: repeat-y;
}
h1 {
color: white;
font-family: sans-serif;
font-weight: bolder;
}
-->
</style>
</head>

<body>
<h1>Page Design</h1>
</body>
</html>

CSS07 背景画像

<title>背景画像（水平方向に繰り返し)</title>
<style type="text/css">
<!--
body {
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415205559.jpg");
background-repeat: repeat-x;
}
h1 {
color: #30647a;
font-family: serif;
font-weight: bolder;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

宿題をやりました。　実際にA4サイズで書いてみて自分なりに気づくことがありました。

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景画像（繰り返さない）</title>
<style type="text/css">

body {
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415210656.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
font-size: 2em;
font-family: serif;
}
p {
	width:320px;
}
h1,p {
margin: 40px 0 0 160px;
}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>