2月29日(木)1コマ目
今日、やったこと
[確認テスト]HTMLの確認テスト
今日の確認テスト
正解例をあげておきます。
問１
cssファイルは<link>タグで読み込みます。
<link rel="stylesheet" type="text/css" href="style.css">
問２
画像は<img>タグで表示できます。
<img src="dog.jpg">
問３
セレクタを div で回答している方がいましたが、これだと全<div>タグの背景色が設定されます。
background : #e0ffff;
}
問４
すべての<h2>タグが対象なので、セレクタはh2です。
color : #00008b;
}
問5
問4と同じです。設定項目が増えただけです。
color : #808080;
font-size : 15pt;
}
問６
idがitem1、item2、item3の<div>タグが対象です。これらの３つのタグはitemクラスが指定されています。よって、セレクタを.itemにすると設定内容をコンパクトにできます。
font-size: 10pt;
}
問７
"ここはitem2"は<p>タグです。問５で<p>タグの背景色を#808080に設定していますので、#808080で表示されます。
問8
"ここはitem3"が含まれる<div>タグは問６で文字サイズを10ptに設定しています。
が、その<div>タグ内にある<p>タグには問5で文字サイズを15ptに設定しています。
よって、15ptで表示されます。
問9
問6と同じでitemクラスに設定すれば、item1、item2、item3の<div>タグに反映されます。
border : double 3px #00ffff;
}
問10
ここで設定する余白は枠線の外側です。よって、項目名はmarginです。
設定する余白サイズは上下が20px、左右が30pxなので、設定値2個で設定可能です。
margin: 20px 30px;
}
問11
id=item1、item2が横並び => float:left;
id=item3で横並び解消 => clear:left;
float: left;
}
#item2 {
float: left;
}
#item3 {
clear: left;
}
問12
ここで設定する余白は枠線の内側です。よって、項目名はpaddingです。
設定する余白サイズは上下左右すべて30pxなので、設定値1個で設定可能です。
padding : 30px;
}
問13
一見、<body>に背景色、余白を設定するように見えますが、背景色の外側に余白があるため、<body>ではありません。 <body>の内側にあるid=containerの<div>タグが対象です。
background: #ff7f50;
margin : 30px 20px;
}
問14
<h2>タグに下枠線を設定します。下枠線の項目名はborder-bottomです。
border-bottom: solid 5px #00ffff;
}
再試験について
HTML、CSSでWebページを作成してもらいます。
