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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

1318閲覧

トップ画像の上に余白が空く、アコーディオン機能について

Taka_takatak

総合スコア8

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/08/29 07:46

勉強がてらWEBページを作成しておりますが、以下の課題を抱えており、解決方法をご教示いただきたいです。
HTML,CSS,JSファイルの該当部分を載せます。

■課題
1.トップ画像(img/photo1.jpg)の上に余白が空いてしまう。

2.アコーディング機能について、以下のような仕様にしたいのですが、「+」を押下すると、答え(.ansew)部分が一瞬表示されるが、直ぐに戻ってしまう。
①「+」を押下する
②答え部分が表示されると同時に「+」が「−」に変わる
③「-」を押下する
④「−」が「+」に変わり、質問のみ表示される

情報の不足等ございましたらおしらせください。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charaset="UTF-8"> 5 <title>MeeTech</title> 6 <link rel="stylesheet" href="stylesheet.css" >  7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9 <script src="script.js"></script> 10 </head> 11 12 <body> 13 14(中略)ーーーーーーーーーーーーーーー 15トップ画像表示部分↓ 16 17 <div class="top-wrapper"> 18 <div class="contaner"> 19 <h1>あああ</h1> 20 <div class="contaner-btn"> 21 <a href="#" class="btn new register-show" ><i class="fas fa-user-alt"></i>新規登録</a> 22 <a href="#" class="btn login login-show"><i class="fas fa-sign-in-alt"></i>ログイン</a> 23 </div> 24 </div> 25 </div> 26 27(中略)ーーーーーーーーーーーーーーー 28アコーディング機能部分↓ 29 30 31 <div id="faq"> 32 <div class="faq-wrapper"> 33 <div class="container"> 34 <div class="heading"> 35 <h1>FAQ</h1> 36 </div> 37 38 <div class="faq"> 39 <ul id="faq-list"> 40 <li class="faq-list-item"> 41 <h3 class="question">?????????????????</h3> 42 <span>+</span> 43 <div class="answer"> 44 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 45 </div> 46 </li> 47 48 <li class="faq-list-item"> 49 <h3 class="question">?????????????????</h3> 50 <span>+</span> 51 <div class="answer"> 52 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 53 </div> 54 </li> 55 56 <li class="faq-list-item"> 57 <h3 class="question">?????????????????</h3> 58 <span>+</span> 59 <div class="answer"> 60 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 61 </div> 62 </li> 63 </ul> 64 </div> 65 </div> 66 </div> 67</div> 68 69(中略)ーーーーーーーーーーーーーーー 70 71 </body> 72</html> 73

CSS

1 2トップ画像表示部分↓ 3 4.top-wrapper{ 5 height: 600px; 6 background-image: url(img/photo1.jpg); 7 background-size: cover; 8 background-repeat : no-repeat; 9 width:100%; 10 padding:1px; 11} 12 13.top-wrapper h1{ 14 margin: 0; 15 opacity: 0.7; 16 text-align: center; 17 padding-top: 200px; 18} 19 20(中略)----- 21アコーディング機能部分↓ 22 23.faq-wrapper { 24 height:300px; 25 background-color:#bce7d2; 26 padding-top:60px; 27 padding-bottom : 50px; 28 text-align: center; 29} 30 31.faq-wrapper li{ 32 list-style: none; 33} 34 35.faq-ul{ 36 width: 400px; 37 padding-left: 500px; 38} 39 40#faq-list{ 41 width: 35%; 42 padding-left: 400px; 43} 44 45#faq-list li{ 46 margin:10px; 47 border-bottom:1px solid #708090; 48 position:relative; 49 cursor:pointer; 50 text-align: center; 51} 52 53#faq-list h3 { 54 font-size: 20px; 55 color:#808080; 56 margin:10px; 57} 58 59#faq-list p{ 60 margin: 0; 61 color:#808080; 62 margin:10px; 63} 64 65#faq-list span { 66 position:absolute; 67 top:0; 68 right:10px; 69 color:#708090; 70 font-size:17px; 71} 72 73.answer { 74 font-size: 15px; 75 padding: 0; 76 margin-bottom: 15px; 77 display:none; 78}

JS

1アコーディング機能部分↓ 2 3 4 $(".faq-list-item").click(function(){ 5 var $answer = $(this).find(".answer"); 6 if($answer.hasClass("open")){ 7 $answer.removeClass("open"); 8 $answer.slideUp(); 9 $(this).find("span").text("+"); 10 11 }else { 12 $answer.addClass("open"); 13 $answer.slideDown(); 14 $(this).find("span").text("-"); 15 }; 16 });

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

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

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

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

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

guest

回答2

0

ベストアンサー

トップ画像(img/photo1.jpg)の上に余白が空いてしまう。

stylesheetの読み込みのタグに全角の空白が入っています。タグの外の後ろ。これを消してください。

html

1 <head> 2 <meta charaset="UTF-8"> 3 <title>MeeTech</title> 4 <link rel="stylesheet" href="stylesheet.css" >_ //ココ 5 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script src="script.js"></script> 8 </head>

アコーディング機能について、以下のような仕様にしたいのですが、「+」を押下すると、答え(.ansew)部分が一瞬表示されるが、直ぐに戻ってしまう。

こちらの環境では正常に動いています。提示されたコード外に問題があると思います。
どこかでscript.jsを2回読んでいて、2重にイベントが登録されている可能性が高いです。

投稿2019/08/29 09:15

zushi0905

総合スコア683

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

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

Taka_takatak

2019/08/29 09:26

ありがとうございます。解決しました。 アコーディング機能については、2回読み込んでおり、片方を消したら正常に動きました!
guest

0

トップの余白が空いてしまう現象は、css記述の基本にそって

CSS

1*{ 2 margin: 0; 3 padding: 0; 4} 5

で解決するはずです。

もう一つの表示の制御はDOM読込後でないときちんと動かない可能性があります。ですので、

html

1<!-- コンテンツの最後に持ってくる --> 2<script src="script.js"></script>

としてみてどうでしょうか?ちなみに、こちらのテストだと問題なく動いています。

投稿2019/08/29 09:14

FKM

総合スコア3608

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

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

Taka_takatak

2019/08/29 09:26

ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問