10/2 ☀　超初心者用課題 A

課題

CSSの記述はエンベッド

【S01】フォントcolor、size、backgroundの設定

20111002205046

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>超初心者用課題【S01】</title>

<style type="text/css">
 <!--
h1 {
	color: 	#0099CC;
	font-size: 33px;
	font-weight: bold;
}

h2 {
	color: #FFFFFF;
	font-size: 19px;
	font-weight: bold;
	background-color: #9999CC;
	width: 300px;
}

h3 {
	color: #000066;
	font-size: 16px;
	font-weight: lighter;
}
 -->
</style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<h3>HTML文書内にまとめて設定します。</h3>
</body>
</html>

【S02】

始めはcontainerにborderを設定したがうまくいかないので、
その後h1、h２、pそれぞれにborderを設定した。

20111002205229

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>超初心者用課題【S02】</title>

<style type="text/css">
<!--
#container {
	width: 450px;
	margin: 0;
	padding: 0;
}

h1 {
	color: #FFFFFF;
	font-size: 33px;
	height: 63px;
	background-color: #99CC99;
	margin: 0;
	padding: 15px 0 0 0;
	border: 7px solid #99CC99;
}

h2 {
	color: #FFFFFF;
	font-size: 19px;
	background-color: #CC9999;
	margin: 0;
	padding: 0 0 0 8px;
	border: 7px solid #99CC99;
}

p {
	font-size: 13.5px;
	line-height: 2.0;
	margin: 0;
	padding: 8px;
	border: 7px solid #99CC99;
}
-->
</style>
</head>

<body>
<!--▼container-->
<div id="container">
	
<h1>About wine</h1>
<h2>DULCAMARA</h2>
<p>
こちらは、名門マッツェイとは対照的に、建築の仕事に従事していたジュスティさんとザンザさんが、ワインに対する情熱から1995年にワイン造りを始めた新しいワイナリーです。<br>
この「DULCAMARA（ドゥルカマーラ）」の名は、ドニゼッティ作のオペラ「愛の妙薬」に登場する“いかさま薬売り”の名にちなんでいます。ドゥルカマーラは、金持ちで気ままな農場主の娘（ラベルのイラストの女性）に恋する純情な若い農夫に、“惚れ薬”と偽って安物のワインを高い値段で売り付ける男。ともすれば、安物ワインの代名詞にもなりかねないドゥルカマーラの名前を、ワイナリーの最も誇りとするワインにつけるなんて、自信にあふれて粋ではありませんか。
</p>
</div>
<!--▲container-->
</body>
</html>

【S03】width、padding、borderの設定

20111002211716

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>超初心者用課題【S0３】</title>

<style type="text/css">
<!--
p {
	font-size: 16px;
	width: 300px;
	padding: 30px;
	border: 10px solid #99FF99;
}
-->
</style>

</head>
<body>
<p>パディングと幅の関係における標準準拠モードと過去互換モードによる表示の違い</p>
</body>
</html>

【S04】backgroundに画像を横に配置

20111003000757

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>超初心者用課題【S04】</title>

<style type="text/css">
<!--
h1 {
	font-size: 26px;
	font-weight: bold;
	background: url(images/01.jpg) left bottom repeat-x;
	width: 500px;
	height: 140px;
	padding: 15px 0 0 5px;
}
-->
</style>

<body>
<h1>Web Design</h1>
</body>
</html>

【S05】backgroundに画像を縦に配置

20111003001106

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>超初心者用課題【S05】</title>

<style type="text/css">
<!--
h1 {
	color: #FFFFFF;
	font-size: 32px;
	font-weight: bold;
	background: url(images/02.jpg) repeat-y;
	width: 250px;
	height: 410px;
	margin: 0;
	padding: 20px 5px 0 8px;
}
-->
</style>
</head>

<body>
<h1>Web Design</h1>
</body>
</html>

【S06】

20111015155329

<?xml version="1.0" encoding-"UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html:charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【S06】</title>
<style type="text/css" media="screen,print">
<!--
body {
	background-color: #aaaaaa;
	margin:100px 0 0 100px;
}

h1 {	
	font-size: 25px;
	font-weight: bold;
	color: #245D72;
	width: 500px;
	height: 50px;
	background-color: #fff;	
	border: 3px solid #494421;
	padding: 10px 0 30px 0;
}

p {
	font-size: 17px;
	color: #245D72;
	width: 500px;
	height: 90px;
	background-color: #fff;	
	border: 3px solid #494421;
	padding: 10px 0 30px 0;

}

#spacer {
	background: url(images/spacer.gif) repeat-x;
	width: 1px;
	height: 500px;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/tadaima/tdftad.css" /></head>
<body>
<h1>BOX and PADDING</h1>
<p>この領域はボックスといいます。<br>
テキストなどのコンテンツ内容を表示する領域です。このボックと内容の余白をパディングといいます。</p>
</body>
</html>

【S07】

20111015155930

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE
<xml html="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Contrnt-Typr" content="text/html:charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【S07】</title>
<style type="text/css">
<!--
body {
	background-color: #fff;
	font-size; 1em;
	margin: 40px 0 0 100px;
}

p {
	padding: 15px 0 15px 10px;
}

#a h1 {
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	width: 450px;
	haight: 80px;
	background-color: #662525;
	padding: 10px 0 10px 10px;
}

.b h2{
	color: #fff;
	font-size: 20px;
	width: 450px;
	haight: 50px;
	background-color: #4046A0;
	padding: 10px 0 10px 10px;
}

.b p {
	width: 450px;
	padding: 10px 0 10px 10px;
	background-color: #D6CEC5;
}

span.haikei {
	color: #fff;
	background-color: #662525;
}

#spacer {
	background: url(images/spacer.gif) repeat-x;
	width: 1px;
	height: 300px;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/tadaima/tdftad.css" /></head>
<body>
<div id="a">
<h1>Title_A</h1>
<p>クラス指定された要素には繰り返して起用されます。<br>見出しと段落の色を指定します。</p>
</div>

<div class="b"> 
<h2>Title_B</h2>
<p>クラス指定された要素の背景色が変わります。<br>
見出しと段落とspan要素の色を指定する。</p>
</div>

<div class="b">
<h2>Title_B</h2>
<p>クラス指定された要素の背景色が変わります。<br>
見出しと段落とspan要素の色を指定する。</p>
</div>

<p>クラス指定された<span class="haikei">要素の背景色</span>が変わります。</p>
</body>
</html>