CSS課題：文字の修飾とボックスモデル

自宅課題

CSS課題の続きです。

文字の修飾

【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">
<title>【CSS08】の問題</title>
<style type="text/css">
<!--
body {
  background-image: url(img/01.jpg);
  background-repeat: repeat-y;
}
h1 {
  color: #ffffff;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【CSS09】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>【CSS09】の問題</title>
<style type="text/css">
<!--
body {
  background-image: url(img/01.jpg);
  background-repeat: repeat-y;
  margin-left: 70px;
}
h1 {
  color: #990000;
  font-family: Impact,Charcoa; 
  border-bottom: 4px dashed #999999;
  padding: 10px 20px;
}
p {
  font-family: "メイリオ", "MS Pゴシック", sans-serif;
  font-weight: bold;
  line-height: 1.5em;
  padding: 10px 20px 10px 20px;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>

【CSS10】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta name="description" content="松尾芭蕉の有名な俳句｢古池や蛙飛び込む水の音｣についての考察">
<meta name="keywords" content="松尾芭蕉,俳句,蛙">
<title>【CSS10】の問題</title>
<style type="text/css">
<!--
body {
  background-image: url(img/01.gif);
  background-repeat: no-repeat;
  margin-left: 10em;
}
h1 {
  width: 400px;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  padding: 1.0em 0;
}
p {
  width:400px;
  line-height: 1.5em;
}
-->
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>

ボックスモデル

｢ボックスモデル｣の問題は続きに記述します。
【CSS11】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>CSS課題：ボックスモデル</title>
<style type="text/css">
<!--
p {
  color: #ffffff;
  font-weight: bold;
  line-height: 1.5em;
  margin: 50px;
  width: 23em;
  background-color: #3399ff; 
}
-->
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS12】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>CSS課題：ボックスモデル</title>
<style type="text/css">
<!--
p {
  color: #ffffff;
  font-weight: bold;
  line-height: 1.5em;
  margin: 0 50px;
  width: 300px;
  background-color: #3399ff;
  border: 5px solid #ffcc66;
  
}
-->
</style>
</head>
<body>
<p>BOX and margin<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS13】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>CSS課題：ボックスモデル</title>
<style type="text/css">
<!--
body{
  margin: 0;
  background-image: url(img/01.jpg);
  background-repeat: repeat-y;
}
h2 {
  color: white;
  margin: 30px 0 10px 0;
  padding-left: 5px;
  width: 2.5em;
  background-color: #cc33cc;
}
p {
  line-height: 1.5em;
  margin-left:70px;
  width: 300px;
}
-->
</style>
</head>
<body>
<h2>BOX</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p>
</body>
</html>

【CSS14】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>CSS課題：ボックスモデル</title>
<style type="text/css">
<!--
body {
  margin: 0;
}
h2 {
  color: white;
  margin-bottom: 0;
  padding: 20px;
  width: 400px;
  background-color: #336633;
}
p {
  color: white;
  line-height: 1.5em;
  margin-top: 0;
  padding: 20px;
  width: 400px;
  background-color: #99cc99;
}
-->
</style>
</head>
<body>
<h2>BOX and PADDING</h2>
<p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>

【CSS15】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>CSS課題：ボックスモデル</title>
<style type="text/css">
<!--
body {
  margin: 0;
}
p {
  color: #669999;
  font-weight: bold;
  line-height: 1.5em;
  margin: 50px;
  padding: 30px;
  width: 400px;
  border-top: 10px solid #999999;
  border-right: 5px solid #999999;
  border-bottom: 10px solid #999999;
  border-left: 5px solid #999999;
}
-->
</style>
</head>
<body>
<p>BOX and PADDING<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>