デイトラweb制作上級編  DAY31~44⑪

卒業制作課題 11日目

PC版

スマホ版

資料ダウンロード完了画面はまたあとで

→ 中級編最終課題や中級編総復習を参考にする

苦戦したところ

プレイスホルダーの色を変更

HTML

<dd class="page-download__main-input"><input name="" type="text" placeholder="例)○○株式会社"></dd>

SCSS

.page-download__main-input {

    [type="text"] {
        box-shadow: none;
        border: 1px solid #DDDDDD;
        background: #fff;
        padding: 10px 16px;
        appearance: none;
        border-radius: 5px;
        font-family: inherit;
        font-size: 16px;
        width: 100%;

    &::placeholder {
        color: #CCCCCC;
    }
}

&::placeholder使用前

&::placeholder使用後

→ 少し色が薄くなった

まとめ

今回も卒業制作課題を進めました。

苦手意識のあったフォームの作成が意外と躓かなくて良い調子です。

時間があまり取れなくて進んでいませんが、このページだけでいえばあとは完了画面だけなので、この調子でどんどん作っていきたいです!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です