【プログラミング・Web制作勉強ログ#34】4/9の積み上げ成果

2022年4月10日

今日の積み上げ 120日目成果

#今日の積み上げ 120日目成果

・ #Web制作 (デザインカンプコーディング)
⇒PC画面完成（2h37m）
・ #ドットインストール(自分の作業と関係のあるところあったら)
⇒0本
・マインド作り＆情報収集(#YouTube 、ラジオ等)
⇒ラジオ1本途中、読書(30m)
合計勉強時間：3時間07分
— おかつ🌱鬼修行中 (@o_89965328_k) April 9, 2022

累計勉強時間(2022/3/7～)：158時間49分
３月：118時間13分
４月：41時間36分

＼宣言した内容はこちらです／

本日の学び

・tableのtr（行要素）、td（列要素）を使って、お問い合わせフォームを作成するポイント
　⇒　このような画像イメージ＆コーディングでおさまりました。
　⇒　td要素の最初（ここではお名前、メールアドレス、内容欄）を指定して、幅＆高さを設定することで、入力欄の左端を合わせることができる。
　⇒　余白の設定は、「入力欄のmargin」で設定(paddingだと白い箱が広がってしまう)。

<section id="contact" class="bg-green">
            <div class="title">
                <img src="images/icon-1.svg" alt="icon">
                <h3>お問い合わせ</h3>
                <img src="images/icon-1.svg" alt="icon">
            </div>
            <p class="summary">ご予約やご質問などお気軽にお問い合わせください。<br>お問い合わせいただいてから3日以内の返信となります。</p>
            <div class="contact-form">
                <form>
                    <table>
                        <tr>
                            <td><label for="name">お名前</label></td>
                            <td><input type="text" name="name" id="name"></td>
                        </tr>
                        <tr>
                            <td><label for="mail">メールアドレス</label></td>
                            <td><input type="email" name="mail" id="mail"></td>
                        </tr>
                        <tr>
                            <td><label for="content">内　容</label></td>
                            <td><textarea name="content" id="content"></textarea></td>
                        </tr>
                    </table>
                    <div class="btn-submit">
                        <input type="submit" value="送 信">
                    </div>
                </form>
            </div>
        </section>

/* ------------
contact
-------------- */
#contact {
    padding: 0 100px 80px;
}
.summary {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.7;
    margin-bottom: 45px;
}
.contact-form table {
    width: 100%;
    margin-bottom: 50px;
}
.contact-form tr td:first-of-type {
    width: 20%;
    vertical-align: top;

}
.contact-form label {
    font-size: 2rem;
    font-weight: bold;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
    width: 100%;
    height: 40px;
    background-color: #fff;
    margin-bottom: 30px;
}
.contact-form textarea {
    width: 100%;
    height: 300px;
    resize: none;
    background-color: #fff;
}
.btn-submit {
    margin: 0 auto;
    text-align: center;
    background-color: var(--primary-color);
    width: 200px;
    height: 50px;
    border-radius: 10px;
}
.btn-submit input[type="submit"] {
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
    cursor: pointer;
    transition: .4s;
    height: 45px;
    width: 200px;
}