LoginSignup
7
8

More than 5 years have passed since last update.

@miku66(miku honda)

htmlのtableタグを使わずに整列させたフォーム(form)をCSSでデザインしてみる

Posted at

今日は、フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法で作ったフォームをCSSでスタイルをあててデザインしてみます(>ω<)

デフォルトのままだとシンプルすぎて手抜きな感じがするので、inputタグの枠に色をつけたり、内側に影(shadow)を入れたり、角丸にしたりしてみます。とっても簡単にformをデザインできるので、ぜひ参考にしてみてください。
前回コーディングした、この状態からスタートします！
スクリーンショット 2014-12-27 2.43.15.png

<form>
    <ul>
        <li class="name">
            <label for="name">Name<label>
            <input id="name" type="text" name="name" placeholder="miku honda" size="60">
        </li>
        <li class="email">
            <label for="email">Email</label>
            <input id="email" type="text" name="email" placeholder="info@example.com" size="60">
        </li>
        <li class="msg">
            <label for="msg">Message</label>
            <textarea id="msg" name="msg" cols="44" rows="20"></textarea>
        </li>
        <li><input id="button" type="submit" name="button" value="submit!">
        </li>
    </ul>
</form>

form
    ul
        li.name
            label for="name"
            input#name type="text" name="name" placeholder="mikuhonda"
        li.email
            label for="email" Email
            input id="name" type="text" name="name" placeholder="info@example.com" size="60"
        li.message
            label for="msg" Message
            textarea id="name" name="msg" cols="44" rows="20"       li.button
            input id="button" type="submit" name="button" value="submit!"

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
}

ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
}

入力フォームの枠線の色を変えてみる

inputタグとtextareaタグで表示された入力フォームの枠線の色をCSSを使って変えてみます。今回はピンク色に変えてみたいと思います。

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
}

input,
textarea {
    border: solid 1px #f098ee;
}

ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
}

input,
textarea {
    border: solid 1px #f098ee;
}

スクリーンショット 2014-12-28 0.25.29.png

ピンク色になりました！submitボタンの内側が灰色なのが気になりますね・・・(>o<)

submitボタンの色をCSSで変える

送信ボタンの背景色が灰色のままで変なので枠線のピンク色にしてみます。それに合わせて視認性が高まるようにsubmit!の文字も白色にします。

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
}

input,
textarea {
    border: solid 1px #f098ee;
}


ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;

}

input,
textarea {
    border: solid 1px #f098ee;
}

スクリーンショット 2014-12-28 0.25.41.png
だんだんかわいい感じに仕上がってきました！次は、inputタグやtextareaの枠を「border-radius: 5px;」で角丸にして、ピンク色の枠と合わせて柔らかな雰囲気を出してみます。

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;
}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
}


ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;

}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
}

スクリーンショット 2014-12-28 0.25.41.png

丸くなりました！なんだか枠の高さが小さくて窮屈です。inputタグとsubmitボタンはpaddingで広げて、textareaはhtmlにサイズを指定して大きくしてみます。

<form>
    <ul>
        <li class="name">
            <label for="name">Name<label>
            <input id="name" type="text" name="name" placeholder="miku honda" size="60">
        </li>
        <li class="email">
            <label for="email">Email</label>
            <input id="email" type="text" name="email" placeholder="info@example.com" size="60">
        </li>
        <li class="msg">
            <label for="msg">Message</label>
            <textarea id="msg" name="msg" cols="44" rows="20"></textarea>
        </li>
        <li><input id="button" type="submit" name="button" value="submit!">
        </li>
    </ul>
</form>

form
    ul
        li.name
            label for="name"
            input#name type="text" name="name" placeholder="mikuhonda"
        li.email
            label for="email" Email
            input id="name" type="text" name="name" placeholder="info@example.com" cols="40" rows="60"
        li.message
            label for="msg" Message
            textarea id="name" name="msg" size="60"     li.button
            input id="button" type="submit" name="button" value="submit!"

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
    padding: 5px;
}


ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
    padding: 5px;

}

スクリーンショット 2014-12-28 0.39.44.png

フォームの内側に影(shadow)をつける

テキストを入力するフォームにCSSで「box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);」を記述して、透明な黒を4pxだけ内側に表示させるようにします。
っとそのまま書きたい所だったのですが、box-shadowを記述しても反映されませんでした(>o<)
googloChromeやsafariで表示されないことがあるので、そんなときは「
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);」と記述します！これはGoogleChromeやsafari対策のコードらしいです。firefox対策としては「-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);」があります。3つセットで記述するのが良さそうですね！
ちなみに、もしもborder-radiusのスタイルが反映されなかったら、shadowをつける場合と同じようにmozやwebkitと書くことが必要となるようです。この辺はまだまだ勉強不足なので、また理解を深めてから記事にしようと思います！

ul li {
    list-style: none;
    margin-top: 10px;
}

ul li.msg {
    margin-bottom: 40px;
}

label {
    margin-right: 10px;
    width:100px;
    float: left;
}

ul {
    width: 500px;
    margin: 0 auto;
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
    padding: 5px;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}


ul li {
    list-style: none;
    margin-top: 10px;
    label {
    margin-right: 10px;
    width:100px;
    float: left;
}
}

ul {
    width: 500px;
    margin: 0 auto;
    li.msg {
    margin-bottom: 40px;
}
}


input#button {
    display: block;
    margin: 0 auto;
    background: #f098ee;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}

input,
textarea {
    border: solid 1px #f098ee;
    border-radius: 5px;
    padding: 5px;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);

}

スクリーンショット 2014-12-28 1.40.21.png

つきましたー！

会社の忘年会でお酒を少し飲んだので、もしかしたらコードの記述間違いや説明の不具合があるかもしれません(^o^;)その場合はご指摘願います。

7
8
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
7
8