【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!⑩

今回、模写する部分はこちらになります!
コーディングも掲載しているのでぜひ参考にしてみて下さい。

お手本

今回、取り組むのはお問い合わせフォームですね!
ウェブサイトには必ず含まれているので、しっかり作らないといけません。
main-19と命名しています。

模写コーディングの様子を最初から見たい方はこちらの記事からどうぞ!

目次

この画面のポイント

① テキストエリアの中に文字!

テキストエリアの中に薄い文字があることが分かります。
これはplaceholderを記述することで対応可能です。

具体的には以下のコードのようにhtmlに記述します。
色や文字を変更したい場合はcssに::placeholder {} を記述することで変更することができます。

<input type="text" placeholder="姓">
::placeholder {
   color: black;
}

② 文字の間隔

送信』の文字の間隔が広いことが分かります。
今まで、文字の間隔を変更したことがなかったので、文字間隔を変更するプロパティを調べました。

letter-spacingというプロパティを使用すれば、文字の間隔を変更できるらしいです!

ぶーた

新しいプロパティを覚えて成長したのだ!

実際に挑戦してみよう!

デスクトップデザイン(main-19)

ぶーた作

お問い合わせフォームを作るのは久しぶりだったので、いろいろ調べながら作成しました。

htmlではinputタグやtextareaタグといった特殊なタグを使用するのが特徴的ですね!

<div class="main-19">
   <h2>資料請求フォーム</h2>
   <h3>まずは無料で資料請求からどうぞ。</h3>
   <form>
      <input type="text" placeholder="姓">
      <input type="text" placeholder="名">
      <input type="text" placeholder="メールアドレス">
      <textarea placeholder="質問などはこちら(空欄でもOKです)"></textarea>
      <input type="submit" value="送信">
   </form>
</div>
.main-19 {
    background-color: rgb(235, 185, 77);
}

.main-19 h2 {
    font-size: 2.5rem;
    padding: 63px 0 33px 0;
}

.main-19 h3 {
    font-size: 1.3rem;
    padding-bottom: 20px;
}

input[type="text"],
input[type="submit"] {
    height: 6vh;
    width: 58%;
    margin: 12px 0;
    border-radius: 5px;
    border: none;
    font-size: 1.2rem;
    padding-left: 1vw;
}

textarea {
    height: 14vh;
    width: 58%;
    margin: 35px 0;
    border: none;
    font-size: 1.1rem;
    border-radius: 5px;
}

input[type="submit"] {
    border-radius: 50px;
    color: white;
    background-color: rgb(218, 107, 100);
    font-size: 1.9rem;
    font-weight: bold;
    border: none;
    margin-bottom: 5vh;
    letter-spacing: 30px;
}

input[type="submit"]:hover {
    cursor: pointer;
}

これで完成ですが、実際にお問い合わせを受け取るためにはPHPでメールの送受信を設定しないといけません。

そのため、お問い合わせフォームの見た目だけってことになりますね。

レスポンシブデザイン(main-19)

ぶーた作

レスポンシブ対応で難しい部分はあまりなかったですね。

@media screen and (max-width:800px) {
    .main-19 h2 {
        font-size: 1.5rem;
    }
    .main-19 h3 {
        font-size: 1.2rem;
    }
    input[type="text"],
    input[type="submit"] {
        width: 90%;
    }
    textarea {
        width: 90%;
    }
}

これでお問い合わせフォームは完成です!

次はよくある質問ですね!
jqueryが必要なので大変そうです…。

↓続きはこちらの記事からどうぞ

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる