Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ko0821(コウヤ)

フォームのデザイン（ラベルデザイン・テキストボックス・テキストエリア・ボタン）

Last updated at Posted at 2023-09-09

お世話になっております。コウヤです。

ウェブサイトを作成するにあたって、フォームのデザインをする機会は多いと思います。
ここではフォームのデザインのうち、テキストボックスとテキストエリアについてデザインする方法について述べていきたいと思います。
（他の、チェックボックスやラジオボタンのデザインは別の記事で取り上げます）

※スマートフォン向けで作成していきます。
※今回、バリデーションチェックについてはここでは述べません（別の記事で記載する予定です）
※今回、フォームの送信ボタンを押した際の動作についてはここでは述べません（PHP習得した後にでもまた記載したいと思います）

フォームの作成

まずはフォームの作成をしていきたいと思います。前述の通り、まずはスマートフォンでのデザイン（モバイルファースト）をしていきます。
まずは本格デザイン化していく前のコードを記載します。
今回CSSはheadタグ内のstyleタグ内に記載していきます。

同時にラベルのデザインも行います。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
  

    <title>フォームデザイン（ラベル・テキスト・テキストエリア）</title>
    <style type="text/css">
        .ly__wrapper {
            margin: 0 auto;
            max-width: 375px;
        }
        .EntryForm__area {
        padding-top: 98px;
        background-color: white;
        border-radius: 15px;
        max-width: 1140px;
        height: 2500px;
        margin: 0 auto;
        padding-left: 10px;
        padding-right: 10px;
        }
        .EntryForm__area .EntryForm__title {
        color: #333;
        font-family: Noto Sans JP;
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
        margin-bottom: 48px;
        }

        .Form__Q {
        display: flex;
        flex-direction: column;
        margin-bottom: 61px;
        }

        .Form__Q p {
        margin-bottom: 10px;
        }

        .Form__Q label {
        font-size: 20px;
}
    </style>

</head>
<body>

   
<main>
    <div class="ly__wrapper">
        <div class="EntryForm__area">
            <h1 class="EntryForm__title">フォームデザイン（ラベル・テキスト・テキストエリア）</h1>
            <form  class="FormArea" action="#"method="post" target="_self">
                <div class="Form__Q">
                    <p><label for="name"class="required">お名前</label></p>
                    <div class="Form__input_area">
                        <input type="text" id="name" name="name" placeholder="例）田中太郎">
                    </div>
                </div>   
                
                <div class="Form__Q">
                    <p><label for="age"class="required">ご年齢</label></p>
                    <div class="Form__input_area">
                        <input type="number" id="age" name="age" placeholder="例）26">
                    </div>
                </div> 
    
                <div class="Form__Q">
                    <p><label for="tel">電話番号</label></p>
                    <div class="Form__input_area">
                        <input type="tel" id="tel" name="tel" placeholder="例）090-xxxx-xxxx">
                    </div>
                </div>
                <div class="Form__Q">
                    <p><label for="email" class="required">メールアドレス</label></p>
                    <div class="Form__input_area">
                        <input type="mail" id="email" name="email" placeholder="例）example@example.com">
                    </div>
                </div>
    
    
                <div class="Form__Q">
                    <p><label for="comment">なにか一言お願いします</label></p>
                    <div class="Form__input_area">
                        <textarea id="comment" name="comment" class="not_required_form"></textarea>
                    </div>
    
                <div class="Form__btn">
                        <a href="#" >
                        <input type="submit" value="エントリーする" class="btn">
                        </a>
                </div>
    
                    
            </form>
        </div>
    </div>
</main>


</body>
</html>

結果としては、以下の通りになります。
image.png

しかし、このままではフォーム枠も狭いので、こちらをCSSを使って少しデザインしていきたいと思います。（今はこのままフォームとして公表することはなく、何かしらデザインすることがほとんどです）
なお、内容を説明すると、「お名前」「ご年齢」「電話番号」「メールアドレス」はテキストボックス、「なにか一言お願いします」はテキストエリアとなっています。

「必須」の設定

フォームでは入力内容として、必須の項目が必ずあります。今回は、「お名前」「ご年齢」「メールアドレス」を必須として考えてみましょう。
実際に上記のHTMLコードではlabelタグの箇所に class="required" と記載している箇所が必須箇所とします。

以下のCSSをstyleタグに追加をしてください。

.css
    /*必須に関するデザイン*/
    .required::before {
        content: "必須";
        margin-right: 15px;
        color: #FFF;
        font-family: Noto Sans JP;
        font-weight: 400;
        line-height: 100%; /* 14px */
        background: #339999;
        width: 46px;
        height: 27px;
        padding-top: 7px;
        padding-right: 9px;
        padding-bottom: 6px;
        padding-left: 9px;
    }

すると以下のようにクラスにrequireと設定した箇所に必須が現れます。
image.png

::beforeの疑似要素を使うことで、labelタグの要素である、.requireクラスの文字（今回でいうと「必須」という文字）が「お名前」の前にくるようになります。

<p><label for="name"class="required">お名前</label></p>

もしこの疑似要素を ::after にすると、以下のように「必須」が後ろにくることになります。
image.png

今回は前に来るように指定していきます。

「お名前」「電話番号」「メールアドレス」のフォームエリアの設定

次にフォームエリアの設定をしていきます。CSSとして以下を追記していきます。

.css
    .FormArea input[type=text],
    .FormArea input[type=mail],
    .FormArea input[type=tel] {
        padding-left: 14px;/*左ぴったりくっつかないように*/
        border-radius: 4px;/*フォーム枠を丸くする*/
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 40px;
        width: 95%;/*枠の幅*/
        max-width: 300px;/*ただし幅は最大でも300px*/
        font-family: Noto Sans JP;
        font-size: 16px;
        font-weight: 400;
        line-height: 100%; 
    }

CSSで input[type="text"] などというように指定すると、その範囲をセレクタとして指定されます。今回はtext、mail、telを指定しています。
以下はメールアドレスなので、 type="mail" ということでメールアドレスをさすようにしています。

<input type="mail" id="email" name="email" placeholder="例）example@example.com">

image.png

「年齢」のフォームエリアの設定

次に年齢のフォームエリアの設定です。なぜ年齢だけテキストボックスの指定を分けたかというと、年齢は数値だからです。
これは絶対的な決まりはないのですが、数値の場合、フォームの枠の幅を先ほど指定したものより、半分程度に指定することが多いためです。そのため、CSSの指定が分かれるため、そのようにしております。

.css
    .FormArea input[type=number]{
        padding-left: 14px;/*左ぴったりくっつかないように*/
        border-radius: 4px;/*フォーム枠を丸くする*/
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 40px;/*枠の縦幅*/
        width: 95%;/*枠の横幅*/
        max-width: 150px;/*ただし幅は最大でも150px*/
        font-family: Noto Sans JP;
        font-size: 16px;
        font-weight: 400;
        line-height: 100%;
    }

以下のようになっているかと思います。
image.png

テキストエリアの設定

次にテキストエリアの設定を行います。基本的にテキストエリアは必須にしないことが多く、最後の一言や質問事項で使用することが多いです。
このテキストエリアもデザイン設定します。

.css
    textarea {
        padding-left: 14px;
        padding-top:14px;
        border-radius: 4px;
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 100px;
        width: 95%;
        min-width: 300px;
        font-family: Noto Sans JP;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; 
        }

以下のようにテキストエリアが変わっていることを確認できます。
image.png

ボタンのデザイン

最後にボタンのデザインも行います。

.css
    .Form__btn{
        text-align: center;
    }
    .btn {
        margin-top:50px;
        cursor: pointer;
        background-color: #005eb8;
        width: 330px;
        height: 84px;
        border-radius: 42px;
        border: 0;
        color: white;
        font-family: Noto Sans JP;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .btn:hover {
        margin-top:50px;
        cursor: pointer;
        background-color: white;
        border:2px solid #005eb8;
        width: 330px;
        height: 84px;
        border-radius: 42px;
        color: #005eb8;
        font-size: 18px;
        font-weight: 700;
    }

image.png

また、ボタンの上にマウスを乗せると、色が変わるように :hoverで指定しています。
image.png

PCで閲覧したときのフォームデザイン

次にPCで閲覧した際のデザインを考えていきます。

.css
    /*PCでのデザイン*/
    @media screen and  (min-width:768px) {
    .ly__wrapper {
        margin: 0 auto;
        max-width: 768px;
    }

    .Form__Q label {
        font-size: 20px;
        }
    .FormArea input[type=text],
    .FormArea input[type=mail],
    .FormArea input[type=tel] {
        max-width: 700px;/*ただし幅は最大でも300px*/
    }
    .FormArea input[type=number]{
        max-width: 350px;/*ただし幅は最大でも300px*/
    }
    textarea {
        height: 100px;
        min-width: 700px;
    }
    }

幅が768px以上のときに、フォームの幅を広げております。
同様にラベルの文字の大きさも変えました。
image.png

コードまとめ

.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
  

    <title>フォームデザイン（ラベル・テキスト・テキストエリア）</title>
    <style type="text/css">
        .ly__wrapper {
            margin: 0 auto;
            max-width: 375px;
        }


        .EntryForm__area {
        padding-top: 98px;
        background-color: white;
        border-radius: 15px;
        max-width: 1140px;
        height: 2500px;
        margin: 0 auto;
        padding-left: 10px;
        padding-right: 10px;
        }
        .EntryForm__area .EntryForm__title {
        color: #333;
        font-family: Noto Sans JP;
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
        margin-bottom: 48px;
        }

        .Form__Q {
        display: flex;
        flex-direction: column;
        margin-bottom: 61px;
        }

        .Form__Q p {
        margin-bottom: 10px;
        }

        .Form__Q label {
        font-size: 16px;
        }

    /*必須に関するデザイン*/
    .required::before {
        content: "必須";
        margin-right: 15px;
        color: #FFF;
        font-family: Noto Sans JP;
        font-weight: 400;
        line-height: 100%; 
        background: #339999;
        width: auto;
        height: 27px;
        flex-shrink: 0;
        padding-top: 4px;
        padding-right: 5px;
        padding-bottom: 4px;
        padding-left: 5px;
    }

    .FormArea input[type=text],
    .FormArea input[type=mail],
    .FormArea input[type=tel] {
        padding-left: 14px;/*左ぴったりくっつかないように*/
        border-radius: 4px;/*フォーム枠を丸くする*/
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 40px;
        width: 95%;/*枠の幅*/
        max-width: 300px;/*ただし幅は最大でも300px*/
        font-family: Noto Sans JP;
        font-size: 16px;
        font-weight: 400;
        line-height: 100%; 
    }

    .FormArea input[type=number]{
        padding-left: 14px;/*左ぴったりくっつかないように*/
        border-radius: 4px;/*フォーム枠を丸くする*/
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 40px;/*枠の縦幅*/
        width: 95%;/*枠の横幅*/
        max-width: 150px;/*ただし幅は最大でも150px*/
        font-family: Noto Sans JP;
        font-size: 16px;
        font-weight: 400;
        line-height: 100%; 
    }

    textarea {
        padding-left: 14px;
        padding-top:14px;
        border-radius: 4px;
        border: 1px solid #666;
        background: rgba(217, 217, 217, 0);
        height: 100px;
        width: 95%;
        min-width: 300px;
        font-family: Noto Sans JP;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; 
        }
    .Form__btn{
        text-align: center;
    }
    .btn {
        margin-top:50px;
        cursor: pointer;
        background-color: #005eb8;
        border:2px solid #005eb8;
        width: 330px;
        height: 84px;
        border-radius: 42px;
        color: white;
        font-size: 18px;
        font-weight: 700;
    }
    .btn:hover {
        margin-top:50px;
        cursor: pointer;
        background-color: white;
        border:2px solid #005eb8;
        width: 330px;
        height: 84px;
        border-radius: 42px;
        color: #005eb8;
        font-size: 18px;
        font-weight: 700;
    }
    /*PCでのデザイン*/
    @media screen and  (min-width:768px) {
        .ly__wrapper {
            margin: 0 auto;
            max-width: 768px;
        }

        .Form__Q label {
            font-size: 20px;
            }
        .FormArea input[type=text],
        .FormArea input[type=mail],
        .FormArea input[type=tel] {
            max-width: 700px;/*ただし幅は最大でも300px*/
        }
        .FormArea input[type=number]{
            max-width: 350px;/*ただし幅は最大でも300px*/
        }
        textarea {
            height: 100px;
            min-width: 700px;
        }
    }
    </style>

</head>
<body>

   
<main>
    <div class="ly__wrapper">
        <div class="EntryForm__area">
            <h1 class="EntryForm__title">フォームデザイン（ラベル・テキスト・テキストエリア）</h1>
            <form  class="FormArea" action="#"method="post" target="_self">
                <div class="Form__Q">
                    <p><label for="name"class="required">お名前</label></p>
                    <div class="Form__input_area">
                        <input type="text" id="name" name="name" placeholder="例）田中太郎">
                    </div>
                </div>   
                
                <div class="Form__Q">
                    <p><label for="age"class="required">ご年齢</label></p>
                    <div class="Form__input_area">
                        <input type="number" id="age" name="age" placeholder="例）26">
                    </div>
                </div> 
    
                <div class="Form__Q">
                    <p><label for="tel">電話番号</label></p>
                    <div class="Form__input_area">
                        <input type="tel" id="tel" name="tel" placeholder="例）090-xxxx-xxxx">
                    </div>
                </div>
                <div class="Form__Q">
                    <p><label for="email" class="required">メールアドレス</label></p>
                    <div class="Form__input_area">
                        <input type="mail" id="email" name="email" placeholder="例）example@example.com">
                    </div>
                </div>
    
    
                <div class="Form__Q">
                    <p><label for="comment">なにか一言お願いします</label></p>
                    <div class="Form__input_area">
                        <textarea id="comment" name="comment" class="not_required_form"></textarea>
                    </div>
    
                <div class="Form__btn">
                        <a href="#" >
                        <input type="submit" value="エントリーする" class="btn">
                        </a>
                </div>
    
                    
            </form>
        </div>
    </div>
</main>


</body>
</html>

前述のとおり、フォーム自体の機能はしていないですが、これでフォームのデザインは一通り終えられたかと思います。
チェックボックス、ラジオボタンの設定は次回記載していきたいと思います。

※チェックボックスについては記事を書きました。
https://qiita.com/ko0821/items/d600bbe372e8146effda

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?