質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

電話番号とメールアドレスのフォームの間の余白を狭めたいです。

ghtew2
cdseddkaks

総合スコア230

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2回答

0リアクション

0クリップ

226閲覧

投稿2022/09/05 02:56

概要

電話番号のフォームの下に「電話番号を正しく入力してください」といメッセージを表示するように<div class="alert2">を追加したのですが、ボタンを押すまでは、<div class="alert2">の文字は見えないようになっています。

付属画像のように
スマホ横幅300px以下になると、電話番号とメールアドレスのフォームの余白が勝手に広がるのですが、多分、HTMLにある電話番号を正しく入力してください」の文字が折り返され、広がっていると思うのですが余白を狭めたいです。
イメージ説明

<div class="alert2">のfontサイズを小さくしても、効果がないようです。 input.tel{margin:3px 0px;} input.email{margin:3px 0px;もマージンを小さくしても余白が狭くならないです。

該当コードはjavascriptも記載していますが、HTMLとcssだけだと思います。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> </style> </head> <body> <form action="LPmouth1.php" method="post" id="form"> <div class="auto-style15"> <input type="text" class="tel" name="tel" id="tel" placeholder="例)070-1234-5678" value="" /> <div class="alert2">・電話番号を正しく入力してください</div><!--赤いテキストエラーメッセージこの付近--> </div> <div class="auto-style15"> <input type="text" class="email" name="email" id="email" placeholder="例)taro@docomo.com" value="" /> </div> </form> </body> </html>

css

input.tel{margin:3px 0px;} input.email{margin:3px 0px;} /* 出現文字show2 alert2 */ .alert2 { font-size: 0.85em; font-weight: bold; color: crimson; } .alert2 { visibility: hidden; } .alert2.show2 { visibility: visible; } .alert2.show2{ transform: translate(0px, -114px);/* 右側のpx上下調節 */ font-size: 11px; font-family:' sans-serif','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','MS ゴシック','YuGothic','Yu Gothic'; /* 文字の種類 */ } #tel { border: 3px solid #40ce03; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ height: 2em; /* 高さ */ font-size: 0.84em; /* フォームの四角の内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ margin-top: 16px; } #email { border: 3px solid #40ce03; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ height: 2em; /* 高さ */ font-size: 0.84em; /* フォームの四角の内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ margin-top: 16px; }

javascript

<script> { const form = document.getElementById('form'), inputs = [...form.querySelectorAll('input[type="text"]')], Checker = (elm)=>{ const cls = elm.nextElementSibling.classList; const flag = elm.value.trim() == ""; if(flag) cls.add('show'); else cls.remove('show'); if(flag) cls.add('show2'); else cls.remove('show2');// javaでテキスト赤エラーメッセージの表示alert2 return flag; }; form.addEventListener('change', e=>{ if(inputs.indexOf(e.target) >= 0) Checker(e.target); }); form.addEventListener('submit', e=>{ if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault(); }); } </script> <script> // javaでエラーメッセージの表示 const key = 'date_key'; const form = document.querySelector('#form'); const tel = document.querySelector('#tel'); const email = document.querySelector('#email'); form.addEventListener('submit', function(event) { let msg = ""; if (msg != "") { event.preventDefault(); alert(msg); } }); </script>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。