記入欄作成(実践中級➀)

webサイト作成

見たことがある形の記入欄ですがこれもCSS中級①とHTML中級①で学んだことを活かせば作成できます。

タグの洗い出し

contact→見出しタグ

menu→selectタグ

name→input(text)タグ

Emaile→input(emaile)タグ

Gender→input(radio)タグ

Detaile→textareaタグ

submit→button(submit)タグ

HTMLコード

<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; }とすることで記入欄とボタンにカーソルを近づけたら種類が変わります。

CSSコード

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;

}

コメント

タイトルとURLをコピーしました