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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

2回答

5069閲覧

progate(プログラミング学習サイト)にてcssで指定したセレクターがhtmlにない

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/09/28 05:58

一番下のjQUeryの作成問題なんですが、
addClassのtext-activeがhtmlにないし、
cssで書いた.text-activeもhtmlにないと思うのですが、なぜ正解しているのかわかりません。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9</head> 10<body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 15 </div> 16 <div class="header-right"> 17 <div class="login" id="login-show">ログイン</div> 18 </div> 19 </div> 20 </header> 21 <div class="signup-modal-wrapper" id="signup-modal"> 22 <div class="modal"> 23 <div class="close-modal"> 24 <i class="fa fa-2x fa-times"></i> 25 </div> 26 <div id="signup-form"> 27 <h2>Emailで新規登録</h2> 28 <form action="#"> 29 <input class="form-control" type="text" placeholder="メールアドレス"> 30 <input class="form-control" type="password" placeholder="パスワード"> 31 <div id="submit-btn">新規登録</div> 32 </form> 33 </div> 34 </div> 35 </div> 36 <div class="login-modal-wrapper" id="login-modal"> 37 <div class="modal"> 38 <div class="close-modal"> 39 <i class="fa fa-2x fa-times"></i> 40 </div> 41 <div id="login-form"> 42 <h2>Emailログイン</h2> 43 <form action="#"> 44 <input class="form-control" type="text" placeholder="メールアドレス"> 45 <input class="form-control" type="password" placeholder="パスワード"> 46 <div id="submit-btn">ログイン</div> 47 </form> 48 </div> 49 </div> 50 </div> 51 <div class="top-wrapper"> 52 <div class="container"> 53 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 54 <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 55 <div class="btn signup signup-show">新規登録はこちら</div> 56 <p>or</p> 57 <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div> 58 <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div> 59 </div> 60 </div> 61 <div class="lesson-wrapper"> 62 <div class="container"> 63 <div class="heading"> 64 <h2>Learn Where to Get Started!</h2> 65 </div> 66 <div class="lessons"> 67 <div class="lesson lesson-hover"> 68 <div class="lesson-icon"> 69 <img src="https://prog-8.com/images/html/advanced/html.png"> 70 <p>HTML & CSS</p> 71 </div> 72 <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 73 </div> 74 <div class="lesson lesson-hover"> 75 <div class="lesson-icon"> 76 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 77 <p>jQuery</p> 78 </div> 79 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 80 </div> 81 <div class="lesson lesson-hover"> 82 <div class="lesson-icon"> 83 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 84 <p>Ruby</p> 85 </div> 86 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 87 </div> 88 <div class="lesson lesson-hover"> 89 <div class="lesson-icon"> 90 <img src="https://prog-8.com/images/html/advanced/php.png"> 91 <p>PHP</p> 92 </div> 93 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 94 </div> 95 </div> 96 </div> 97 </div> 98 <div class="faq-wrapper"> 99 <div class="container"> 100 <div class="heading"> 101 <h2>FAQ</h2> 102 </div> 103 <div class="faq"> 104 </div> 105 </div> 106 </div> 107 <div class="message-wrapper"> 108 <div class="container"> 109 <div class="heading"> 110 <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> 111 <h3 id="tagline">Let's learn to code, learn to be creative!</h3> 112 </div> 113 <div class="btn message signup-show">さっそく開発する</div> 114 </div> 115 </div> 116 <footer> 117 <div class="container"> 118 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 119 <p>Learn to Code,Learn to be Creative.</p> 120 </div> 121 </footer> 122 123 <script src="script.js"></script> 124</body> 125</html>

CSS

1body { 2 margin: 0; 3} 4 5a { 6 text-decoration: none; 7} 8 9.top-wrapper { 10 padding: 180px 0 100px 0; 11 background-image: url(https://prog-8.com/images/html/advanced/top.png); 12 background-size: cover; 13 color: white; 14 text-align: center; 15} 16 17.container { 18 width: 1170px; 19 padding: 0 15px; 20 margin: 0 auto; 21} 22 23.top-wrapper h1 { 24 opacity: 0.7; 25 font-size: 45px; 26 letter-spacing: 5px; 27} 28 29.top-wrapper p { 30 opacity: 0.7; 31 font-size: 14px; 32 margin-bottom: 35px; 33} 34 35.signup { 36 background-color: #239b76; 37} 38 39.facebook { 40 background-color: #3b5998; 41 margin-right: 10px; 42} 43 44.twitter { 45 background-color: #55acee; 46} 47 48.btn { 49 padding: 8px 24px; 50 color: white; 51 display: inline-block; 52 opacity: 0.8; 53 border-radius: 4px; 54 cursor: pointer; 55} 56 57.btn:hover { 58 opacity: 1; 59} 60 61.fa { 62 margin-right: 5px; 63} 64 65header { 66 height: 65px; 67 width: 100%; 68 background-color: rgba(34,49,52,0.9); 69 position :fixed; 70 top: 0; 71 z-index: 10; 72} 73 74.logo { 75 width: 124px; 76 margin-top: 20px; 77} 78 79.header-left { 80 float: left; 81} 82 83.header-right { 84 float: right; 85 background-color: rgba(255,255,255,0.3); 86 transition: all 0.5s; 87} 88 89.header-right:hover { 90 background-color: rgba(255,255,255,0.5); 91} 92 93.header-right .login { 94 line-height: 65px; 95 padding: 0 25px; 96 color: white; 97 cursor: pointer; 98 display: block; 99} 100 101/*モーダル*/ 102.login-modal-wrapper, .signup-modal-wrapper { 103 display: none; 104 position: fixed; 105 top: 0; 106 right: 0; 107 bottom: 0; 108 left: 0; 109 background-color: rgba(0, 0, 0, 0.6); 110 z-index: 100; 111} 112 113.modal { 114 position: absolute; 115 top: 20%; 116 left: 34%; 117 background-color: #e6ecf0; 118 padding: 20px 0 40px; 119 border-radius: 10px; 120 width: 450px; 121 height: auto; 122 text-align: center; 123} 124 125.fa-times { 126 position: absolute; 127 top: 12px; 128 right: 12px; 129 color: rgba(128, 128, 128, 0.46); 130 cursor: pointer; 131} 132 133#signup-form, #login-form { 134 width: 100%; 135} 136 137#signup-form h2, #login-form h2 { 138 color: #5f5d60; 139 letter-spacing: 1px; 140 margin-bottom: 40px; 141} 142 143#signup-form input, #login-form input { 144 width: 320px; 145 margin-bottom: 20px; 146 font-size: 12px; 147 padding: 12px 12px; 148 border: 1px solid #d0d5d8; 149 border-radius: 5px; 150} 151 152#submit-btn { 153 display: inline-block; 154 padding: 14px 140px; 155 background-color: #5dca88; 156 border: none; 157 border-radius: 3px; 158 color: white; 159 margin: 10px auto; 160 cursor: pointer; 161} 162 163.lesson-wrapper { 164 height: 500px; 165 padding-bottom: 80px; 166 background-color: #f7f7f7; 167 text-align: center; 168} 169 170.heading { 171 padding-top: 60px; 172 padding-bottom: 30px; 173 color: #5f5d60; 174} 175 176.heading h2 { 177 font-weight: normal; 178} 179 180.lesson { 181 float: left; 182 width: 25%; 183} 184 185.lesson-icon { 186 position: relative; 187 width: 70%; 188 margin: 0 auto; 189} 190 191.lesson-icon p { 192 position: absolute; 193 top: 75px; 194 width: 100%; 195 color: white; 196} 197 198.text-contents { 199 margin: 3% auto; 200 width: 80%; 201 display: none; 202 font-size: 12px; 203 color: #b3aeb5; 204} 205 206/* ここに.text-activeのCSSを追加してください */ 207.text-active{ 208 display: block; 209} 210 211 212 213/*faq wrapper*/ 214.faq-wrapper { 215 background-color: #e6ecf0; 216 text-align: center; 217 padding-bottom: 80px; 218 color: #5f5d60; 219} 220 221#faq-list { 222 width: 500px; 223 margin: 0 auto; 224 padding: 0; 225 list-style: none; 226} 227 228.message-wrapper { 229 border-bottom: 1px solid #eee; 230 padding-bottom: 80px; 231 text-align: center; 232} 233 234.message-wrapper .heading h3 { 235 font-weight: normal; 236} 237 238.message { 239 padding: 15px 40px; 240 background-color: #5dca88; 241 cursor: pointer; 242 box-shadow: 0px 7px #1a7940; 243} 244 245.message:active { 246 position: relative; 247 top: 7px; 248 box-shadow: none; 249} 250 251footer img { 252 width: 125px; 253} 254 255footer p { 256 color: #b3aeb5; 257 font-size: 12px; 258} 259 260footer { 261 padding-top: 30px; 262} 263 264.language p { 265 display: none; 266}

JQuery

1 2 $('.lesson-hover').hover( 3 function() { 4 // 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください 5 $(this).find(".text-contents").addClass("text-active"); 6 7 8 9 }, 10 function() { 11 // 子要素の「.text-contents」の要素を取得し、text-activeクラスを外してください 12 $(this).find(".text-contents").removeClass("text-active"); 13 14 15 16 } 17 ); 18}); 19

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

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

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

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

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

guest

回答2

0

.addClass() こちら確認してください。

.addClass("text-active"); これは「"text-active"というclassを追加する」という処理です。
.removeClass("text-active"); これはその逆で、「"text-active"というclassを削除する」という処理です。

.find() こちらも確認してください。

.find(".text-contents") これは「"text-contents"というclassがついている要素を探し出す」という処理です。

なので、
.find(".text-contents").addClass("text-active"); これは
「"text-contents"というclassがついている要素を探し出す」+「"text-active"というclassを追加する」
ということになっています。

$(this)が何を指しているのかはご自分でconsole.log()でも使って確認してみてください。

投稿2018/09/28 06:14

spookybird

総合スコア1803

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

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

退会済みユーザー

退会済みユーザー

2018/09/28 14:49 編集

ご説明ありがとうございます。私の質問の仕方が悪かったのですが、実はそこまではわかっていて、 なぜtext-activeなのか、わからないのです。 プレビュー上ではアイコンにカーソルが乗ると、html上のtext-contentsClassが表示されるのですが、text-activeは専用コマンドみたいなものなのでしょうか?
guest

0

ベストアンサー

lesson-hoverというクラスがある要素にマウスを合わせたときに
text-contentsというクラスがある要素にJQueryでtext-activeを追加しています。

HTMLに動的にJQueryでクラスを追加しているので、初期状態のHTMLには書いてないですよ。

投稿2018/09/28 06:03

dice142

総合スコア5158

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

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

退会済みユーザー

退会済みユーザー

2018/09/28 14:48

回答ありがとうございます。 HTMLのclassにtext-activeを追加しているのですね!なるほど! 先ほど、text-activeの最後のeを取ったらうまく作動しませんでした。 この理由も教えて頂けると嬉しいです。
dice142

2018/09/28 15:32

text-activeはcssで同じクラス名の設定があるので機能します。 他の文字列ではCSSに同じ指定がない限り意味を為しません。
退会済みユーザー

退会済みユーザー

2018/10/02 02:02

返信遅れてすみません!! 停電もろもろでパソコンが開けませんでした。すいません。 JavaScriptのセレクターはCSSに同じものがあればいいルールなんですね! ありがとうございました。
dice142

2018/10/02 02:09

正しくはHTMLの「タグ名」「クラス」「ID」がCSSで同じものを指定していれば、ですね。 今回のJavaScript部分はあくまでもHTMLのDOMにクラスを追加しているものに過ぎません。
退会済みユーザー

退会済みユーザー

2018/10/02 07:47

DOMについて調べたんですが、 今回だけ、htmlに同じセレクタがなくてもいい理由がやっぱりよくわかんなくなっちゃいました。(笑)
dice142

2018/10/02 07:52

JQueryでクラス名を追加したり削除したりしているので、HTMLにはなくても機能します。 常時必要であればHTMLに書いておく必要がありますが、ある時だけというように一時的に使用する場合はJQueryで付けたり消したりすれば良いのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問