デイトラ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」使用後

→ 少し色が薄くなった
まとめ
今回も卒業制作課題を進めました。
苦手意識のあったフォームの作成が意外と躓かなくて良い調子です。
時間があまり取れなくて進んでいませんが、このページだけでいえばあとは完了画面だけなので、この調子でどんどん作っていきたいです!