見たことがある形の記入欄ですがこれもCSS中級①とHTML中級①で学んだことを活かせば作成できます。
タグの洗い出し
contact→見出しタグ
menu→selectタグ
name→input(text)タグ
Emaile→input(emaile)タグ
Gender→input(radio)タグ
Detaile→textareaタグ
submit→button(submit)タグ
<body>
<section>
<h2>contact</h2>
<table>
<tr>
<th>Menu</th>
<td>
<select name=”menu” id=”#”>
<option value=”menu”>menu1</option>
<option value=”menu”>menu2</option>
<option value=”menu”>menu3</option>
</select>
</td>
</tr>
<tr>
<th>
<label for=”name”>Name</label>
</th>
<td>
<input class=”text” type=”text”>
</td>
</tr>
<tr>
<th>
<label for=”email”>Email</label>
</th>
<td>
<input class=”text” type=”email”>
</td>
<tr>
<th>
Gender
</th>
<td>
<label for=”radio”>
<input id=”radio” class=”radio” type=”radio”>mail
<input id=”radio” class=”radio” type=”radio”>famail
<input id=”radio” class=”radio” type=”radio”>other
</label>
</td>
</tr>
</tr>
<tr>
<th>
Detail
</th>
<td>
<textarea name=”detail” id=”” cols=”30″ rows=”10″></textarea>
</td>
</tr>
</table>
<div>
<button type=”submit”>submit</button>
</div>
</section>
</body>
CSSで色付け
section,h2タグの特徴・プロパティ
| 特徴 | タグ{プロパティ |
| 全体背景が黄緑 | section{background-color |
| 見出しのテキストが中央 | h2{text-align |
tableタグの特徴・プロパティ
Menu（selectタグ）
| 特徴 | プロパティ |
| Menu欄の角に丸みがある | border-radius |
| Menu欄が他より横幅が短い | min-width |
Name,Email(class=text)
| 特徴 | プロパティ |
| Name,Email欄がMenuより横幅が長い | min-width |
Detail(textarea)
| 特徴 | プロパティ |
| Detail欄の角に丸みがある | border-radius |
| 横幅がName,Email欄と同じ | min-width |
| 縦幅が大きめ | min-height |
divタグの特徴・プロパティ
div
| 特徴 | プロパティ |
| ボタンが中央 | text-align |
buttom
| 特徴 | プロパティ |
| 縦と横幅を指定 | width.height |
| ボタンの角に丸みがある | border-radius |
| 色が灰色 | background-color |
| 外線がない | border |
| ボタンに影がついている | box-shadow |
ボタンクリックの動作追加
ボタンにはクリックした際に影が消えるように設定してみましょう。
クリックアクションの疑似クラス（button:active）を追加しアクション後のプロパティと値を記入してbuttonクラスの中にtransition: box-shadowとアクションの秒数を入れてください。
カーソルの変更
記入欄とボタン（Menu,Name,Email,Gender,Detail,button）にカーソルを近づけた際にカーソルの種類が変わるように設定しようと思います。
クラス名は,(カンマ）か半角スペースをいれることで複数選択できます。
button,input,select,textarea{ cursor: pointer; }とすることで記入欄とボタンにカーソルを近づけたら種類が変わります。
section{
background-color: yellowgreen;
padding: 20px;
}
h2{
text-align: center;
font-size: 30px;
margin: 10px;
}
table{
margin: 0 auto;
}
select{
border-radius: 5px;
padding: 10px;
min-width: 100px;
}
input{
padding: 10px;
}
button,input,select,textarea{
cursor: pointer;
}
.text{
min-width: 500px;
}
textarea{
border-radius: 5px;
padding: 10px;
min-width: 500px;
min-height: 100px;
}
div{
text-align: center;
}
button{
width: 150px;
height: 50px;
margin: 15px;
font-size: 20px;
background-color: gray;
border: 0;
border-radius: 15px;
box-shadow: 5px 5px;
transition: box-shadow .25s;
}
button:active{
box-shadow: 0 0;
}
コメント