【お問い合わせ】No.2 必須のボタンを作ろう!
Share
こんなことを説明しています!
- 必須項目の設定方法
- display: inline-blockをうまく利用する
- 修正・管理しやすくなるようなコードを心がける
解説動画
コードの解説
HTMLの記述
<div class="inner"> <h2 class="title">お問い合わせフォーム<br>No.2 必須のボタンをつけよう!</h2> <form action="" class="form"> <div class="row"> <div class="head"><span class="must">氏名</span></div> <div class="data"><input type="text" placeholder="ヤマダ タロウ"></div> </div> <div class="row"> <div class="head"><span class="must">メールアドレス</span></div> <div class="data"><input type="email" placeholder="info@example.com"></div> </div> <div class="row ai-start"> <div class="head"><span class="must">お問い合わせ内容</span></div> <div class="data"><textarea placeholder="こちらに具体的にご入力ください"></textarea></div> </div> </form> </div>
ポイント
- 必須の部分が入らなかったのでheadとdataの幅を変更
-
それぞれの項目をspanタグ(class=must)で囲んで、inline-block要素に設定
CSSの記述
/* ===================
・以前のコードは
前回の記事を参考にしてください!
https://ryoblog.myshopify.com/blogs/study/contact1
===================== */
//======================
// 今回のテーマ
//======================
.head {
span {
position: relative;
display: inline-block;
}
span.must::after {
content: '必須';
white-space: nowrap;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% + 15px);
font-size: 16px;
padding: 4px 10px;
background: #000;
color: #fff;
border-radius: 4px;
}
}
ポイント
- 自動で幅を補正してしまうので、white-space: nowrapを指定
- 幅をwidthで指定しても良いですが、「必須」の文字が変わったときに表示崩れを起こしてしまうので、お勧めはしません😂
解説で使用したスニペット
scss.json
"after": { "prefix": "after", "body": [ "&::after {", " content: '';", " position: absolute;", "}", ], "description": "" }, "top50": { "prefix": "top-50%", "body": [ "top: 50%;", "transform: translateY(-50%);", ], "description": "" },