6/25 [CSS3] 確認テスト/ 入力フォーム

本日の学習課題

[CSS3] 確認テスト
入力フォーム

本日の学習内容～まとめと感想～

[CSS3] 確認テスト（演習ドリル10）

以下、昨日の確認テストで学んだ内容の復習テストです。

問題

【01】CSS3で影をつける場合のプロパティ名を書きなさい

答え：
box-shadow
text-shadow

参照：
box-shadow
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

【02】CSS3で影をつける場合、プロパティに設定する4つのパラメータのうち、1つ目のパラメータは何を設定するか書きなさい

答え：
X軸方向（横方向）のずれの距離

【03】CSS3で角を丸くする場合の、プロパティ名を書きなさい

答え：
border-radius

【04】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい

答え：
角を丸くする円の半径

【05】Chromeとサファリのベンダープレフィックスを書きなさい

答え：
-webkit-

参照：
ベンダープレフィックス
 http://www.htmq.com/csskihon/603.shtml

※クライアントがIEで閲覧したいという場合、基本CSS３は使わない

【06】CSS3で直線的なグラデーションをつける場合の、プロパティを書きなさい（ベンダープレフィックスは、記述しない）

答え：
background-image: linear-gradient()

【07】半透明の表現をするには、対象の要素に対してどの関数を設定すればよいか書きなさい

答え：
rgba()

参照：
rgba()
http://www.htmq.com/css3/rgba.shtml

フラットデザインの際は、rgba()で指定する（16進数は使わない）
※フラットデザインは、色が重なっているイメージ

【08】CSS3で要素を回転して表示する設定を書きなさい

答え：
transform:rotate

【09 】次のスタイルは、どのような設定か説明しなさい

tr:nth-of-type(even){background-color:#F3F3F3;}

答え：
偶数行の背景色に#F3F3F3の色を設定する

【10】CSS3で直線的を表すプロパティの一部はどんな単語を書けば良いか答えなさい

答え：
linear

入力フォーム

【自身　習作】
f:id:sntkk3:20140920223524p:plain

《ソース》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認テスト：フォーム</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<form action="check.php" method="post">
<table>
<tr>
<th class="rq"><label for="name">お名前&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="text" name="name" id="name" size="30" maxlength="30" class="text1" placeholder ="例：山田 太郎" autofocus required></td>
</tr>
<tr>
<th><label for="zip">郵便番号</label></th>
<td><input type="text" name="zip1" id="zip1" size="3" maxlength="3" class="text2" placeholder="100">-
<input type="text" name="zip2" id="zip2" size="4" maxlength="4" class="text2" placeholder="0001">
</td>
</tr>
<tr>
<th><label for="state">都道府県</label></th>
<td><select name="state">
<option value="" selected="selected">選択してください</option>
<optgroup label="北海道・東北">
<option value="Hokkaido">北海道</option>
<option value="Aomori">青森県</option>
<option value="Iwate">岩手県</option>
<option value="Akita">秋田県</option>
<option value="Miyagi">宮城県</option>
<option value="Yamagata">山形県</option>
<option value="Fukushima">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="Ibaraki">茨城県</option>
<option value="Tochigi">栃木県</option>
<option value="Gunma">群馬県</option>
<option value="Saitama">埼玉県</option>
<option value="Chiba">千葉県</option>
<option value="Tokyo">東京都</option>
<option value="Kanagawa">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="Niigata">新潟県</option>
<option value="Toyama">富山県</option>
<option value="Ishikawa">石川県</option>
<option value="Fukui">福井県</option>
<option value="Yamanashi">山梨県</option>
<option value="Nagano">長野都</option>
<option value="Gifu">岐阜県</option>
<option value="Shizuoka">静岡県</option>
<option value="Aichi">愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Mie">三重県</option>
<option value="Shiga">滋賀県</option>
<option value="Kyoto">京都府</option>
<option value="Osaka">大阪府</option>
<option value="Hyogo">兵庫県</option>
<option value="Nara">奈良県</option>
<option value="Wakayama">和歌山県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Tokushima">徳島県</option>
<option value="Kagawa">香川県</option>
<option value="Okayama">岡山県</option>
<option value="Hiroshima">広島県</option>
<option value="Kochi">高知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Fukuoka">福岡県</option>
<option value="Saga">佐賀県</option>
<option value="Nagasaki">長崎県</option>
<option value="Kumamoto">熊本県</option>
<option value="Oita">大分県</option>
<option value="Kagoshima">鹿児島県</option>
<option value="Okinawa">沖縄県</option>
</optgroup>
<option value="Oversea">日本国外</option>
</select>
</td>
</tr>
<tr>
<th><label for="city">市区町村</label></th>
<td><input type="text" name="city" id="city" size="90" maxlength="50" class="text3"  placeholder="例：豊島区池袋東池袋１－１－１"></td>
</tr>
<tr>
<th><label for="bldg">アパート・マンション名</label></th>
<td><input type="text" name="bldg" id="bldg" size="90" maxlength="50" class="text3" placeholder="例：パークマンション401号"></td>
</tr>
<tr>
<th class="rq"><label for="email">E-Mailアドレス&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="email" name="email" id="email" size="90" maxlength="50"  class="text3" placeholder = "例：felica@co.jp" required></td>
</tr>
<tr>
<th class="rq"><label for="category">お問い合わせの種類&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="radio" name="category" id="category" value="1" required>このサイトについてのお問い合わせ<br>
<input type="radio" name="category" id="category" value="2">弊社の業務内容についてのお問い合わせ<br>
<input type="radio" name="category" id="category" value="3">その他のお問い合わせ<br>
</td>
</tr>
<tr>
<th class="rq">お問い合わせ内容&nbsp;&nbsp;<span>（必須）</span></th>
<td><textarea name="message" id="message" cols="80" rows="40" class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td>
</tr>
</table>
<div id="btn">
<input class="btn" type="submit" value="確認画面へ">
</div>
</form>
</div>
</body>
</html>

@charset "utf-8";
/* reset */
html, body, div, table, tr, th, td, p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-family:
  "Hiragino Kaku Gothic ProN";
  Meiryo,
  sans-serif;
  font-size: 16px;
}

#container {
  margin: 20px;
  width: 900px;
}

table {
  border-collapse: collapse;  
}
th, td {
  width: 300px;
  padding: 10px;
  border-top: 1px solid #DDDDDD;
  
}
th {
  border-left: 5px solid #CCCCCC;
  background: #F3F3F3;
}
th.rq {
    border-left: 5px solid red;
}
th span {
  color: red;
  font-size: 14px;
}
#btn {
  padding: 10px 0px;
  text-align:center;
}
.btn {
  padding: 5px 20px;
  border-radius: 20px;
}

コメント：

セレクトボックス（プルダウン）でのoptgroupを習得
必須を示す文字部分にemタグを使用する

　自身では、spanタグで設定してましたが、以後うまく使っていけるようにしたい

em 見栄えの強調だけでなく、意味を付加したい場合に適している。
spanは汎用性が強すぎる傾向なうえ、見栄えだけの強調となるため、
span よりemをうまく使うと効果的。

==========================

【講師見本コーディング例】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのスタイルを設定する</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="check.php" method="post" id="inquiry">
<table>
<tr>
<th scope="row" class="must"><label for="name">お名前<em>（必須）</em></label></th>
<td><input type="text" name="name" id="name" size="30" class="text1" placeholder="例：鈴木一郎" autofocus required></td>
</tr>
<tr>
<th scope="row"><label for="postcode1">郵便番号</label></th>
<td>
<input type="text" name="postcode1" id="postcode1" size="3" maxlength="3" class="text2" placeholder="123">
-
<input type="text" name="postcode2" id="postcode2" size="4" maxlength="4" class="text2" placeholder="4567">
</td>
</tr>
<tr>
<th scope="row"><label for="prefecture">都道府県</label></th>
<td>
<select name="prefecture" id="prefecture">
<option value="" selected="selected">選択してください</option>
<optgroup label="北海道・東北地方">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国地方">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州地方">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
<option value="日本国外">日本国外</option>
</select>
</td>
</tr>
<tr>
<th scope="row"><label for="address1">市区町村・番地</label></th>
<td><input type="text" name="address1" id="address1" size="56" class="text3" placeholder="例：豊島区池袋南池袋３－７－９"></td>
</tr>
<tr>
<th scope="row"><label for="address2">アパート・マンション名</label></th>
<td><input type="text" name="address2" id="address2" size="56" class="text3" placeholder="例：スカイマンション101号"></td>
</tr>
<tr>
<th scope="row" class="must"><label for="email">E-Mailアドレス<em>（必須）</em></label></th>
<td><input type="email" name="email" id="email" size="56" class="text3" placeholder="例：xxx@xxx.com" required></td>
</tr>
<tr>
<tr>
<th scope="row" class="must">お問い合わせの種類<em>（必須）</em></th>
<td>
<input name="category" id="category1" type="radio" value="このサイトについてのお問い合わせ" required>
<label for="category1">このサイトについてのお問い合わせ</label><br>
<input name="category" id="category2" type="radio" value="弊社の業務内容についてのお問い合わせ">
<label for="category2">弊社の業務内容についてのお問い合わせ</label><br>
<input name="category" id="category3" type="radio" value="その他のお問い合わせ">
<label for="category3">その他のお問い合わせ</label>
</td>
</tr>
<tr>
<th scope="row" class="must"><label for="content">お問い合わせ内容<em>（必須）</em></label></th>
<td><textarea name="content" id="content" cols="40" rows="15" class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td>
</tr>
</table>
<div class="submit"><input type="submit" value="確認画面へ"></div>
</table>
</form>
</body>
</html>

@charset "UTF-8";

/* reset */
html, body, div, table, tr, th, td, form {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
a {
  text-decoration: none;
}
table {
  border: none;
  border-collapse: collapse;
}

/* body */
body {
  font-size: 14px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #FFF;
}

/* table */
#inquiry {
  width: 600px;
  margin: 50px auto;
}
#inquiry table {
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  font-size: 100%;
  width: 100%;
}
#inquiry td {
  border-top: none;
  border-bottom: 1px solid #CCC;
  border-left: none;
  border-right: none;
  padding: 10px;
}
#inquiry th {
  border-top: none;
  border-bottom: 1px solid #CCC;
  border-left: 6px solid #CCC;
  border-right: none;
  background-color: #F3F3F3;
  font-weight: normal;
  padding: 10px;	
  width: 200px;
}
#inquiry th.must {
  border-left-color: #D90000;
}
#inquiry th em {
  font-style: normal;
  color: #FF0000;
  padding-left: 5px;
}
.text1,.text2,.text3,.text4 {
  border: 1px solid #CCC;
  background-color: #F3F3F3;
  padding: 2px;
}
.text1 {
  width: 100px;
}
.text2 {
  width: 4em;
}
.text3 {
  width: 98%;
}
.text4 {
  width: 98%;
}
#inquiry select {
  border: 1px solid #CCC;
  background-color: #F3F3F3;
}
#inquiry .submit {
  text-align: center;
  margin-top: 30px;
}