2012-04-17

【CSS11】

この場合、リセットはしない

<!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>CSS11</title>
<style type="text/css">
body {
     border: solid 1px #808080;
     width: 450px;
}
p  {
   color: white;
   background-color: #ff9999;
   font-weight: bold;	
   line-height: 1.5;
   padding: 3px;
   margin: 50px;

}  
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS12】

この場合、リセットはしない
左右均等空き（上下空きは指定しない）

<!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>CSS12</title>
<style type="text/css">
body {
     border: solid 1px #808080;
     width: 450px;
}
p  {
   color: white;
   background-color: #ff9999;
   font-weight: bold;	
   line-height: 1.5;
   padding: 3px;
   border: solid 5px #666699;
   margin-right: 70px;
   margin-left: 70px;

}  
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS13】

この場合、リセットはしない

<!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>CSS13</title>
<style type="text/css">
body {
     width: 500px;
     background-image: url(../purple.jpg);
     background-repeat: repeat-y;
}
h2 {
   color: white;
   background-color: #6633cc;
   font-size: 30px;
   font-weight: bold;
   padding: 5px;
   width: 70px;
}
p  {
   color: black;
   background-color: #ffffff;	
   line-height: 1.5;
   font-weight: bold;
   margin-left: 80px; 
}  
</style>
</head>
<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS14】

この場合、リセットはしない

<!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>CSS14</title>
<style type="text/css">
body {
     width: 500px;
}
#top {
     color: white;
     background-color: #4682b4;
     font-size: 30px;
     font-weight: bold;
     padding: 1px 20px;
}
#bottom  {
   color: white;
   background-color: #6495ed;	
   line-height: 1.5;
   font-weight: bold;
   padding: 20px 20px 5px 20px;
}  
</style>
</head>
<body>
<div id="top"><p>BOX and PADDING<br></div>
<div id="bottom">
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p></div>
</body>
</html>

【CSS15】

この場合、リセットはしない
空きは、すべて50px

<!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>CSS15</title>
<style type="text/css">
body {
     width: 500px;
}
#container {
           background-color: #e6e6fa;
           padding: 1px 6px;          
}
.bp {
    font-size: 18px;
}
p {
     color: #696969;
     background-color: #ffffff;
     font-weight: bold;
     line-height: 1.5;
     padding: 50px;
}
</style>
</head>
<body>
<div id="container">
<p><span class="bp">BOX and PADDING</span><br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</div>
</body>
</html>

はれあめはれ

CSS課題11〜15