デイトラweb制作上級編 DAY31~44⑫
nakano
卒業制作課題 12日目
前回の続き（左：PC版、右：スマホ版）
お問い合わせページ（左：PC版、右：スマホ版）
お問い合わせ完了ページ（左：PC版、右：スマホ版）
苦戦したところ
コンタクトフォームの作成
共通のSCSS
.page-contact__main-item {
&:not(:first-child) {
margin-top: 38px;
@include mq('sp') {
margin-top: 19px;
}
}
}
.page-contact__main-label {
display: inline-block;
font-size: 18px;
font-weight: 700;
margin-bottom: 13px;
line-height: 1;
@include mq('sp') {
font-size: inherit;
}
}
.page-contact__main-required {
position: relative;
margin-left: 9px;
@include mq('sp') {
margin-left: 14px;
}
&::after {
position: absolute;
content: "必須";
top: 50%;
left: 0;
transform: translateY(-50%);
color: #fff;
background: #E61264;
width: 40px;
height: 20px;
font-size: 12px;
font-weight: 700;
text-align: center;
vertical-align: middle;
@include mq('sp') {
width: 37px;
height: 20px;
}
}
}① type="text"
<div class="page-contact__main-item">
<dt class="page-contact__main-label"><label for="">会社名</label>
</dt>
<dd class="page-contact__main-input"><input name="" type="text" placeholder="例）○○株式会社"
required>
</dd>
</div>.page-contact__main-input {
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s !important;
}
[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%;
@include mq('sp') {
font-size: inherit;
padding: 10px 12px;
}
&::placeholder {
color: #CCCCCC;
}
}
}② type="email"
<div class="page-contact__main-item">
<dt class="page-contact__main-label"><label for="">メールアドレス</label></dt>
<span class="page-contact__main-required"></span>
<dd class="page-contact__main-input"><input name="" type="email"
placeholder="例）info@example.com"></dd>
</div>.page-contact__main-input {
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s !important;
}
[type="email"] {
box-shadow: none;
border: 1px solid #DDDDDD;
background: #fff;
padding: 10px 16px;
appearance: none;
border-radius: 5px;
font-family: inherit;
font-size: 16px;
font-weight: inherit;
width: 100%;
@include mq('sp') {
font-size: inherit;
padding: 10px 12px;
}
&::placeholder {
color: #CCCCCC;
}
}
}③ ラジオボタン
<div class="page-contact__main-item">
<dt class="page-contact__main-label"><label for="">ご用件</label></dt>
<span class="page-contact__main-required"></span>
<dd class="page-contact__main-kind">
<select name="entry.775613421">
<option value="">ご選択ください</option>
<option value="">選択肢 1</option>
<option value="">選択肢 2</option>
</select>
</dd>
</div>.page-contact__main-kind {
position: relative;
@include mq('sp') {
width: 100%;
}
select {
appearance: none;
border-radius: 5px;
box-shadow: none;
border: 1px solid #DDDDDD;
background: #fff;
padding: 10px 16px;
color: inherit;
font-family: inherit;
font-size: 16px;
width: 100%;
cursor: pointer;
color: #CCCCCC;
@include mq('sp') {
font-size: inherit;
padding: 10px 12px;
}
}
&::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
border-left: 2px solid #3E3E3E;
border-bottom: 2px solid #3E3E3E;
width: 8px;
height: 8px;
@include mq('sp') {
right: 17px;
}
}
}④ textarea
<div class="page-contact__main-item">
<dt class="page-contact__main-label"><label for="">ご用件の詳細</label>
</dt>
<span class="page-contact__main-required"></span>
<dd class="page-contact__main-textarea">
<textarea name="" id="" cols="30" rows="10" placeholder="ご自由にご記入ください。"></textarea>
</dd>
</div>.page-contact__main-textarea {
textarea {
height: 240px;
box-shadow: none;
border: 1px solid #DDDDDD;
background: #fff;
padding: 10px 16px;
appearance: none;
border-radius: 5px;
color: inherit;
font-family: inherit;
font-size: 16px;
width: 100%;
@include mq('sp') {
height: 140px;
}
&::placeholder {
color: #CCCCCC;
}
}
}まとめ
今回も卒業制作課題を進めました。
ひとまず資料ダウンロードページとお問い合わせページは見た目だけなら作り終わりました。
あとはそれぞれの完了ページと結びつけるだけですが、今回はグーグルフォームを通さずに行うのでそのあたりも調べてからコーディングしたいと思います！
