CSS training
【S01】Style element
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1- transitional.dtd"> <html xlmns="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>超初心者用課題 A【S01】</title> <style type="text/css" media="screen, print"> <!-- body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; line-heighe: 1.5; } #container { margin :200px; auto; } h1 { color: #5997A5; font-size: 2em; } h2 { color: #FFFFFF; font-size: 1.4em; width: 400px; background-color: #BA4632; padding: 5px 0 0 0; } h3 { color: #77A0A3; font-size: 1.2em; } --> </style> </head> <body> <div id="container"> <h1>style要素</h1> <h2>style element</h2> <h3>HTML文書内にまとめて設定します。</h3> </div> </body> </html>
【S02】About wine
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1- transitional.dtd"> <html xlmns="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>超初心者用課題 A【S02】</title> <style type="text/css" media="screen, print" /> <!-- body { line-height: 2em; } #container { width: 630px; height: auto; margin: 50px auto; padding: 12px; background-color: #0D3868; } #content { } h1 { color: #FFFFFF; font-size: 3em; font-weight: bold; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; margin: 50px 0; } h2 { color: #FFFFFF; font-size: 1.6em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; padding: 10px 0 8px 15px; background-color :#BC8492; } p { color: #000000; background-color: #F7F4D2; font-size: 1em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; height: auto; padding: 15px; } --> </style> </head> <body> <div id="container"> <div id="content"> <h1>About wine</h1> <h2>DULCAMARA</h2> <p> こちらは、名門マッツェイとは対照的に、建築の仕事に従事していたジュ スティさんとザンザさんが、ワインに対する情熱から1995年にワイン造り を始めた新しいワイナリーです。<br> この「DULCAMARA(ドゥルカマーラ)」の名は、ドニゼッティ作のオペラ 「愛の妙薬」に登場する“いかさま薬売り”の名にちなんでいます。ドゥ ルカマーラは、金持ちで気ままな農場主の娘(ラベルのイラストの女性) に恋する純情な若い農夫に、“惚れ薬”と偽って安物のワインを高い値段 で売り付ける男。ともすれば、安物ワインの代名詞にもなりかねないドゥ ルカマーラの名前を、ワイナリーの最も誇りとするワインにつけるなん て、自信にあふれて粋ではありませんか。 </p> </div> </div> </body> </html>
【S03】About padding
<?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>超初心者用課題 A【S03】</title> <style type="text/css" media="screen, print"> <!-- p { font-size: 1.5em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro w3", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; color: #706C69; background-color: #E8E6DA; border: 15px solid #D67335; width: 570px; padding: 50px; margin: 200px auto; } --> </style> </head> <body> <p>パディングと幅の関係における標準準拠<br> モードと過去互換モードによる表示の違い</p> </body> </html>
【S04】Web Design1
<?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>超初心者用課題 A【S04】</title> <style type="text/css" media="screen, print"> <!-- #box { background: url(images/176.jpg); padding:20px 5px 120px 5px; } h1 { font-size: 2em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro w3", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; color: #FFFFFF; } --> </style> </head> <body> <div id="box"> <h1>Web Design</h1> </div> </body> </html>
【S05】Web design2
<?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>超初心者用課題 A【S05】</title> <style type="text/css" media="screen, print"> <!-- #box { width: 240px; height:650px; background: url(images/178.jpg); margin: 0 auto; padding: 15px 0 0 6px; } h1 { font-size: 1.8em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro w3", Meiryo, "メイリオ", Osaka, "MS PGothic", "MS Pゴシック", sans-serif; color: #FFFFFF; } --> </style> </head> <body> <div id="box"> <h1>Web Design</h1> </div> </body> </html>