Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 必須項目の設定方法
- 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": ""
},
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog