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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

Q&A

解決済

1回答

1243閲覧

AOS.jsを用いたフェードにてお問い合わせフォームのみ要素の下部までいかないとなぜかフェードが適用されない

mitrasi

総合スコア49

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

0グッド

0クリップ

投稿2021/07/01 06:22

前提・実現したいこと

掲題の通り、お問い合わせフォームの要素のみ下部までいかないとなぜかフェードが適用されません。
どなたかご教授ください。
AOS.jsのオプションとして発火位置を変えるなどがあるのは知っていますが、
(あと、お問い合わせフォーム以外のものは特にデフォルト変えずにやっていて、それと同じようにしたいだけなので)

該当のソースコード

HTML

1<section class="section-wrapper gradetion" id="contact"> 2 <div class="contact-inner" > 3 <div id="form-wrapper" > 4 <h2 class="title">お問い合わせ</h2> 5 <h3 class="en-title">CONTACT</h3> 6 <p class="sub-title">コーディングの人出が足りないとき、 あなたの力になります</p> 7 <script>var sendFlag = true;</script> 8 <form data-aos="zoom-in" name="myForm" method="post" target="dummyIframe" onsubmit="submitted=true;" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf5PFdHtdtM-kPqJ5l14R7G0Hd5t8C3b0AmruFl3QJnvvASGg/formResponse" id="contact"> 9 <dl id="textSectionname"> 10 <dt>お名前</dt> 11 <input type="text" class="contact-form inputname" name="entry.2005620554" id="textname" placeholder="佐藤 太郎"> 12 <p class="alert">※お名前が入力されていません</p> 13 14 </dl> 15 <dl id="textSectionmail"> 16 <dt>メールアドレス</dt> 17 <input type="email" class="contact-form inputmail" name="emailAddress" value="" pattern="^(([-\w\d]+)(.[-\w\d]+)*@([-\w\d]+)(.[-\w\d]+)*(.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" id="textmail"  placeholder="abcd.e@hoo.com"> 18 <p class="alert" >※メールアドレスが入力されていません</p> 19 20 </dl> 21 <dl id="textareaSection"> 22 <dt>お問い合わせ内容</dt> 23 <textarea class="contact-form" name="entry.839337160" id="textarea" placeholder="見積をお願いしたい"></textarea> 24 <p class="alert">※お問い合わせ内容が入力されていません</p> 25 26 </dl> 27 28 <label class="check" id="privacyCheck"> 29 <input type="checkbox" for="privacyCheck" class="privacyCheck" name="myForm" class="pri">プライバシーポリシーに同意する 30 <p class="alert">※プライバシーポリシーを必読の上、同意にチェックをしてください</p> 31 </label> 32 33 <button class="btn submitbtn" type="submit" value="送信する" id="js-submit" disabled>送信する</button> 34 35 </form> 36<script>var submitted = false;</script> 37 <iframe name="dummyIframe" id="dummyIframe" style="display:none;" onload="if(submitted){window.location='./contact.html';}"></iframe> <!-- 回答送信後にグーグルフォーム画面に遷移させない --> 38 39 40 </div> 41</div> 42 <!-- <p id="thxMessage">お問い合わせありがとうございました。</p> 43 <p class="false-message">送信に失敗しました</p> --> 44</section> 45 46

該当のソースコード

sCSS

1共通 2 a{ 3text-decoration: none; 4color:$black; 5} 6img{ 7max-width:100%; 8vertical-align: bottom; 9} 10.noscroll { 11 overflow: hidden; 12 } 13/* #contact{ 14 scroll-margin-top: 3em;//スムーススクロール位置を調整する場合はこれをつける 15} */ 16 17.content-wrapper{ 18 max-width:1062px; 19 padding:17.2vw 21.4vw; 20 margin:0 auto; 21 text-align: center; 22 padding:8%; 23 color:$black; 24 //heightではなくpaddingをとることではみ出さなくなる 25 @include mq('sp'){ 26 27 max-width:90vw; 28 29 } 30} 31 32 33 34/*max-widthなしverのcontent-wrapper*/ 35.inner-wrapper{ 36 37//padding:17.2vw 21.4vw; 38padding-bottom:17.2vw; 39 margin:0 auto; 40 text-align: center; 41 // padding:8%; 42 width:100%; 43 overflow-x: hidden; 44 //heightではなくpaddingをとることではみ出さなくなる 45} 46.title-wrapper{ 47 margin:0 auto; 48 text-align: center; 49 padding-top:8%; 50 51} 52/* h1{ 53 font-size:2.4rem; 54 55 @include mq('tab'){ 56 width:300%; 57 58 59 60 } 61 @include mq('sp'){ 62 63 margin:0; 64 65 66 67 } 68} 69 */ 70 h1{ 71 font-size: 2.3rem; 72 } 73h1 a { 74 75 font-weight: bold; 76 display: flex; 77 align-items: center; 78 display: block; 79 margin:0; 80 81} 82h2{ 83 font-size:3.2rem; 84 font-weight:bold; 85 margin-bottom:11px; 86 @include mq('sp'){ 87 font-size:2.3rem; 88 89 } 90 91} 92h3{ 93 color:$copy-color; 94 padding-bottom:3vw; 95} 96h5{ 97 font-size:2.4rem; 98 font-weight:bold; 99 line-height: 2.4; 100 margin-bottom:54px; 101 102} 103 104h6{ 105 font-weight:bold; 106 padding: 18px; 107} 108 109tr{ 110 border:1px solid $line-glay; 111} 112table{ 113 background-color: $white; 114 margin:0 auto; 115} 116.btn{ 117 padding-top:6px; 118 @include btn; 119 @include mq('sp'){ 120 padding-top:15px; 121 122 } 123 124} 125 126/*オプション*/ 127.bg-sky{ 128 background-color: $bg-sky; 129} 130.flex-box{ 131 display: flex; 132 justify-content: space-between; 133 align-items: center; 134} 135.reverce{ 136 flex-direction: row-reverse; 137} 138 139.flex{ 140 display: flex; 141 justify-content: center; 142 align-items: center; 143} 144 145.gradetion{ 146 background: -moz-linear-gradient(left,$gra-blu,$gra-green); 147 background: -webkit-linear-gradient(left, $gra-blu,$gra-green); 148 //background: linear-gradient(to right, #FFC7, #FFF); 149 /*グラデーション以外は省略*/ 150} 151.responsive-br{ 152display:none; 153@include mq('tab'){ 154 display: inline; 155 156 } 157} 158 159お問い合わせフォーム 160 161/*contact*/ 162 163 164#contact{ 165 166 /*pcやタブレットの時はこの幅の白い部分で*/ 167 padding: 5vw 62px ; 168 @include mq('tab'){ 169 170 /*タブレッ以下は白いfoamの外側の余白を縮めてfoamの中身を書きやすく広くト*/ 171 padding: 63px 4% 70px; 172 173 } 174 .contact-inner{ 175 176 177 margin:0 auto; 178 text-align: center; 179 180 181 } 182 } 183 184 185 form{ 186 input,textarea{ 187 background-color:$bg-sky; 188 border:none; 189 padding:0;//ここでpadding:0を設置することではみだしをふせぐ 190 191 resize:none; 192 193 appearance:none; 194 195 } 196 197 } 198 199

試したこと

このお問い合わせフォームを一部修正する前はきちんと動作していたので、その時のコードと比べる

正解者の方のコードと見比べる

(一応)AOS.jsオプションの発火位置を調整するものを付与する
→お問い合わせフォームそのものが見えなくなった

補足情報(FW/ツールのバージョンなど)

OS:Windows
エディタ:VScode
ブラウザ:クローム

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こんにちは。
いつも回答に時間がかかってしまいすみません。

今回の件に関しては自己解決致しました。

原因はcontactエリアのひとつ前の、workエリアという箇所でした。

そちらでid等の範囲内でもなく、汎用的なdiv{width:320px}などといった指定をしていたのですが、修正後はそちらを削除したためにcontactのdivの幅がなくなり、結果として上記が以降で反映されてしまっていたものと思われます。
対処法は、固有classを振って必要な個所のdivは確保しつつ、不要なdivは消しました。

以上です。

事象が起こっていたのがcontactエリアだったため、contactエリアか共有部分の似たくしかないと思っていましたので、回答者の皆様には情報提供が不足しておりご迷惑お掛け致しました。

投稿2021/07/06 07:48

mitrasi

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問