練習 18

18-1-1. クラスセレクタ、汎用クラスセレクタを用いて次のようなカラーテーブルをつくれ。
18-2-1. 08-01.html, 08-02.html の「竹取物語」を次のような形で完成させよ。
解答 18-1-1. 18-01.html ---------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML Lang="ja"> <HEAD> <META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS"> <META Http-Equiv="Content-Style-Type" Content="text/css"> <TITLE>CSS 2.1 基本 16 色</TITLE> <STYLE type="text/css"> BODY {text-align: center} TABLE,TD {border: 1px solid Black} CAPTION {font: bold 1.1em/1.5em 'MS ゴシック', monospace} TR.Color {line-height: 3em} TR.Name {font: 0.9em 'Times New Roman', serif; letter-spacing: 0.1em} TD {padding: 0.1em 1em} .C01 {background-color: Maroon} .C02 {background-color: Red} .C03 {background-color: Orange} .C04 {background-color: Yellow} .C05 {background-color: Olive} .C06 {background-color: Purple} .C07 {background-color: Fuchsia} .C08 {background-color: Lime} .C09 {background-color: Green} .C10 {background-color: Navy} .C11 {background-color: Blue} .C12 {background-color: Aqua} .C13 {background-color: Teal} .C14 {background-color: Black} .C15 {background-color: Silver} .C16 {background-color: Gray} </STYLE> </HEAD> <BODY> <TABLE Summary="白を除いた CSS 2.1 基本 16 色" Border="1" Cellspacing="0" Cellpadding="3" Frame="void" Rules="none"> <CAPTION>CSS 2.1 基本 16 色 (白を除く)</CAPTION> <TR Class="Color"><TD Class="C01">&#160;<TD Class="C02">&#160;<TD Class="C03">&#160;<TD Class="C04">&#160; <TR CLass="Name"><TD>Maroon (#800000)<TD>Red (#ff0000)<TD>Orange (#ffa500)<TD>Yellow (#ffff00) <TR Class="Color"><TD Class="C05">&#160;<TD Class="C06">&#160;<TD Class="C07">&#160;<TD Class="C08">&#160; <TR CLass="Name"><TD>Olive (#808000)<TD>Purple (#800080)<TD>Fuchsia (#ff00ff)<TD>Lime (#00ff00) <TR Class="Color"><TD Class="C09">&#160;<TD Class="C10">&#160;<TD Class="C11">&#160;<TD Class="C12">&#160; <TR CLass="Name"><TD>Green (#008000)<TD>Navy (#800000)<TD>Blue (#ff0000)<TD>Aqua (#ffa500) <TR Class="Color"><TD Class="C13">&#160;<TD Class="C14">&#160;<TD Class="C15">&#160;<TD Class="C16">&#160; <TR CLass="Name"><TD>Teal (#ffff00)<TD>Black (#000000)<TD>Silver (#c0c0c0)<TD>Gray (#808080) </TABLE> </BODY> </HTML> 18-2-1. 18-02.html ---------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML Lang="ja"> <HEAD> <META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS"> <META Http-Equiv="Content-Style-Type" Content="text/css"> <TITLE>竹取物語</TITLE> <STYLE type="text/css"> BODY {background-color: Aqua; font-family: 'MS ゴシック', monospace; text-align: center} H1 {font-size: 1.2em; margin: 0.6em; letter-spacing: 0.8em} H2 {font-size: 0.9em; color: Red; margin-bottom: 0.2em; margin-left: 0.9em} DIV#Zentai {width: 42em; text-align: left} DIV.Honbun {border: 1px solid navy} P {text-indent: 1.2em; font-size: 1em; line-height: 1.2em; letter-spacing: 0.2em; margin: 0.6em} SPAN {color: Blue} DIV.Chushaku {color: Navy; font-size: 0.8em; line-height: 1.1em; margin-right: 2em} OL {margin-top: 0.2em} </STYLE> </HEAD> <BODY> <H1>竹取物語</H1> <DIV Id="Zentai"> <DIV Class="Honbun"> <P>今は昔、竹取の<SPAN Title="おきな">翁</SPAN>といふものありけり。野山に<A Href="#chu-1" Title="注1"> まじりて</A>竹を取りつつ、よろづの事に使ひけり。名をば、さかきの<SPAN Title="みやつこ">造</SPAN>となむ言ひける。 その竹の中に、もと光る竹なむ一筋ありける。あやしがりて寄りよりて見るに、筒の中光りたり。 それをみれば、三<A Href="#chu-2" Title="注2">寸</A>ばかりなる人、いと美しうてゐたり。</P> <P>翁言ふやう、「わが朝ごと夕ごとに見る竹の中におはするにて、知りぬ。<A Href="#chu-3" Title="注3">子になり給べき </A>人<A Href="#chu-4" Title="注4">なめり</A>。」とて、手にうちいれて、家に持ちて来ぬ。<SPAN Title="め">妻</SPAN> の<SPAN Title="おうな">媼</SPAN>に預けて、養はす。美しきこと限りなし。いと幼なければ、<SPAN Title="こ">籠</SPAN> に入れて養ふ。</P> <P>竹取の翁、竹を取るに、この子を見つけてのちに竹取るに、節を隔てて、<A Href="#chu-5" Title="注5">よ</A>ごとに 黄金ある竹を見つくる事重なりぬ。かくて、翁やうやう豊かになりゆく。</P> <P>この児、養うほどに、すくすくと大きになりまさる。三月ばかりになるほどに、よきほどなる人になりぬれば、髪上げなど さうして、髪上げさせ、<A Href="#chu-6" Title="注6">裳</A>着す。<A Href="#chu-7" Title="注7">帳</A>の内よりも 出さず、いつき養ふ。この児のかたち、けうらなること世になく、屋の内は暗き所なく光満ちたり。翁心地あしく、 苦しきときも、この子を見れば、苦しきこともやみぬ。腹立たしきことも慰みけり。</P> <P>翁、竹を取ること久しくなりぬ。勢ひ猛の者になりにけり。この子いと大きになりぬれば、名を、 <A Href="#chu-8" Title="注8(みむろとのいんべ)">三室戸斎部の秋田</A>を呼びてつけさす。秋田、なよ竹のかぐや姫と つけつ。</P> </DIV> <DIV Class="Chushaku"> <H2>注釈</H2> <OL> <LI Id="#chu-1" Title="注1の行">まじりて:分け入って。</LI> <LI Id="#chu-2" Title="注2の行">寸:1寸は1尺の 1/10 で、約 3.03 cm 。 <LI Id="#chu-3" Title="注3の行">子になり給べき:わが子におなりになるはずの。「子」は竹の縁語で「籠(こ)」 に掛けた洒落(しゃれ)。 <LI Id="#chu-4" Title="注4の行">なめり:「なるめり」の音便。「なんめり」の「ん」が表記されない形。 <LI Id="#chu-5" Title="注5の行">よ:竹の節と節の間。 <LI Id="#chu-6" Title="注6の行">裳(も):袴(はかま)に重ねて腰の後ろにまとうもの。女子の正装。 <LI Id="#chu-7" Title="注7の行">帳:垂れ絹。垂れ絹をめぐらした貴人の座。 <LI Id="#chu-8" Title="注8の行">三室戸(みむろと)斎部(いんべ)の秋田:三室戸(地名)の、斎部(氏)秋田(名)。 </OL> </DIV> </DIV> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </BODY> </HTML>