Webデザイン学習9月28日(水)　復習 - Webデザイン学習

Webデザイン学習は反復して覚える

一度やった課題なので、出来るであろうと思っていましたが、
大間違いでした。

川崎アゼリア・オープン懸賞

今回学んだ部分は「はい」「いいえ」の扱い

<!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>川崎アゼリア・オープン懸賞</title>
<style type="text/css">
p{
	float: left;
	display: inline;
	text-align: center;
	}
p.iie{
	padding-left: 15px;
	}
</style>
</head>

<body>
<p>
<img src="images/b_yes.gif" width="72" height="31" alt="はい" />
</p>
<p class="iie">
<img src="images/b_no.gif" width="72" height="31" alt="いいえ" />
</p>
</body>

</html>

「いや違う！もっと細かく指定するはずだ」と思って回答を確認すると全然違っていました。

<!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>川崎アゼリア・オープン懸賞</title>
<style type="text/css">
form{
	text-align: center;
}
form label.iie{
	padding-left: 15px;
}
</style>
</head>

<body>
<form action="" method="post">
<label>
<input src="images/b_yes.gif" type="image" name="button" width="72" height="31" alt="はい" />
</label>
<label class="iie">
<input src="images/b_no.gif" type="image" name="button"  width="72" height="31" alt="いいえ" />
</label>
</form>
</body>

</html>

form要素とlabel要素、input要素

form要素とlabel要素、input要素を使うのを忘れていました。
実際に入力データの処理をするには、CGIやJavaScript等が必要なので、
今回の課題としては、「p要素」の中に「img要素」が入っている状態でもOK。
前回自分がやった課題が忍者ツールズに残っていたので、確認してみると、「はい」「いいえ」の部分は何も解らぬまま正解の丸写しでした。

リストの頭が一文字分前に出る

p {
	margin: 0 28px 0 42px;
}
ul {
	text-indent: -1em;
	margin: 0 28px 0 42px;
}

p要素とul要素を１文字分全体左にマージンを多く取り、下げる。
ul要素だけ、text-indentを-1em指定して一文字分左に戻す。
すると、丸だけが飛び出る。
ここも前回理解していませんでした。

丸写しは脳みそになんの刺激も与えない