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

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

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

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

SCSS

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

javascriptで入力フォームの付近に出る、テキストによる赤字のエラーの文字の位置を変更したいです。

ghtew2
ghtew2

総合スコア176

CSS3

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

SCSS

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

1クリップ

150閲覧

投稿2022/05/21 01:47

編集2022/05/21 21:39

入力フォームで、送信ボタンを押すと、アラートにエラーの他に各フォーム付近に、赤いテキスト文字のエラーメッセージが表示されるようになっていますが、(付属画像)
イメージ説明
cssコードはフォーム大きさを指定しています・
赤いテキストエラーメッセージのコードはHTML内のjavascriptとスタイルタグ内に記載しています。

表示される赤いテキスト文字の位置、特に上下の位置を変更したいのですが、上手くいきません。
スタイルタグ内の
.alert.show に
{transform: translate(0px, -20px);}を追加しても、transform: translate(0px, 0px);の位置に文字が出現してしまいます。

特に上下の位置を変更したいのですが、この場合、何とかならないでしょうか?

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>a</title> <style> /* ボタンクリック後フォーム付近に, 赤いテキストエラーの表示 */ .alert { font-size: 0.85em; font-weight: bold; color: crimson; } .alert { visibility: hidden; } .alert.show { visibility: visible; } /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ margin-top: 90px; } /* セレクトボックスの位置 */ .auto-style6 { text-align: center; /* セレクトボックス中央に配置 */ margin-top: 0px; } </style> </head> <body> <!--javaによるエラー表示のためid="form"を追加--> <form action="LPmouth1.php" method="post" id="form"> <div class="auto-style2"> <p class="tel-titile"> 選択する:※ </p> <span class="selectbox"> <select id="age" class="age" name="age"> <option value="">年代を選択する</option> <option value="60代">>60代 </option> </select> </span> <div class="alert">・年代をご選択下さい</div> </div> <div class="auto-style1"> <p class="tel-titile"> 名前:※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> <div class="alert">・お名前をご入力してください</div> </div> <div class="auto-style6"> <div class="auto-style1"> <p class="tel-titile"> フリガナ:※ </p> <input type="text" class="furigana" name="furigana" id="furigana" value="" /> <div class="alert">・フリガナをご入力してください</div> </div> <p class="tel-titile"> 商品を選択:※ </p> <span class="selectbox"> <select id="pay" class="pay" name="pay"> <option value="">商品を選択:※</option> <option value="A">>A </option> </select> </span> <div class="alert">・商品をご選択ください</div> </div> <div class="auto-style1010"> <button type="submit" id="submit" name="submit" class="auto-style40" value="submit"> <img src="image/25mouth.png" alt="確認画面へ" class="button-simple"/></button> </div> </form> <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'); 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 age = document.querySelector('#age'); const name = document.querySelector('#name'); const furigana = document.querySelector('#furigana'); const pay = document.querySelector('#pay'); form.addEventListener('submit', function(event) { let msg = ""; if (age.value == "") msg += "年代を選択して下さい。\n"; if (name.value == "") msg += "名前が入力されていません。\n"; if (furigana.value == "") msg += "フリガナが入力されていません。\n"; if (pay.value == "") msg += "商品を選択して下さい。\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); form.addEventListener('change', function() { if (age.value != "") sessionStorage.setItem('age', age.value); if (name.value != "") sessionStorage.setItem('name', name.value); if (furigana.value != "") sessionStorage.setItem('furinaga', furigana.value); if (pay.value != "") sessionStorage.setItem('pay', pay.value); }); // javaで前面遷移による、(セレクトボックスの値を保持sessionStorage let val1 = sessionStorage.getItem('age'); if(val1!== null)age.value = val1; let val2 = sessionStorage.getItem('pay'); if(val2!== null)pay.value = val2; // javaで前面遷移による、入力フォームの値を保持sessionStorage name.value = sessionStorage.getItem('name'); furigana.value = sessionStorage.getItem('furigana'); </script> </body> </html>

css

.title5 { font-size: 37px; background-color: #40ce03; color: rgb(248, 245, 245); text-align: center; font-weight: 700; vertical-align: -40px; display: inline-block; width: 100%; text-align: center; padding: 10px; margin-top: 20px; } /* 年代選択のセレクトボックスのスタイル */ #age{ vertical-align: middle; box-sizing: border-box; border: 3px solid #40ce03; /* 枠線 */ background-color: snow; /* 背景色 */ width: 27.1em; /* 横幅 */ height: 53px; /* 高さ */ font-size: 1.0em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ } /* 入力フォームのスタイル */ #name { border: 3px solid #40ce03; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 25.6em; /* 横幅 */ height: 32px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ } #furigana { border: 3px solid #40ce03; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 25.6em; /* 横幅 */ height: 32px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ } /* セレクトボックスのスタイル */ #pay{ vertical-align: middle; box-sizing: border-box; border: 3px solid #40ce03; /* 枠線 */ background-color: snow; /* 背景色 */ width: 27.1em; /* 横幅 */ height: 53px; /* 高さ */ font-size: 1.0em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ } /* ボックスからしたの余白とフォーム間の余白, */ select.age{ margin-top: 22px; margin-bottom: 21px; } /* ボックスからしたの余白とフォーム間の余白, */ select.pay{ margin-top: 22px; margin-bottom: 60px; } /* 入力フォームとフォーム間の上下の余白, */ input.name{margin:21px 0px;} input.furigana{margin:21px 0px;} input.tel{margin:21px 0px;} input.email{margin:21px 0px;} /* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/ .tel-titile{ line-height: 0px;/* 文字の行間 */ font-size: 22px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #40ce03; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/05/21 02:36

ご提示のコードを試してみましたが、 .alert.show { transform: translate(0px, -20px); } を追加したところ、問題なく上に移動しました。 (質問では全角で書かれていたので半角に直しました) おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
ghtew2

2022/05/21 12:38

すみません。きちんと表示されてました。すみませんでした。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

SCSS

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。