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

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

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

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

HTML5

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

jQuery

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

Q&A

0回答

718閲覧

クリック後の表示(下線)

yuta_bsn

総合スコア7

CSS3

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

HTML5

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

jQuery

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

0グッド

0クリップ

投稿2020/07/05 09:05

編集2022/01/12 10:55

ホバー時だけでなく、flow-itemTopをクリックした後もflow-itemTtlに下線を表示し続けたいのですが、良い案はありますか?
あればよろしくお願いします。

コードは以下の通りです。

html

1 <!-- flow --> 2 <section class="flow"> 3 <div class="flow-inner"> 4 <h2 class="flow-ttl"><i class="fas fa-laptop"></i>受講の流れ</h2> 5 <div class="flow-box"> 6 <ul class="flow-list"> 7 <li class="flow-item"> 8 <div class="flow-itemTop"> 9 <img src="assets/img/skypeconsulting.png" alt=""> 10 <h3 class="flow-itemTtl">Skypeで事前コンサル</h3> <!--ここです。--> 11 </div> 12 <div class="flow-itemBottom"> 13 <p class="flow-itemBold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p> 14 <p class="flow-itemBold">簡単なテストあり</p> 15 <p class="flow-itemTxt"> 16 iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。 17 (テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。) 18 </p> 19 </div> 20 </li> 21 <li class="flow-item"> 22 <div class="flow-itemTop"> 23 <img src="assets/img/preworks.png" alt=""> 24 <h3 class="flow-itemTtl">事前課題の提出</h3> 25 </div> 26 <div class="flow-itemBottom"> 27 <p class="flow-itemBold">出発前の1ヶ月前に事前課題を送ります。</p> 28 <p class="flow-itemTxt">0から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP 29 / Mysqlの事前講座</p> 30 <p class="flow-itemBold">課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。 31 回数無制限のチャットサポート付きですので、最初は努力してください。<br> 32 また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</p> 33 </div> 34 </li> 35 <li class="flow-item"> 36 <div class="flow-itemTop"> 37 <img src="assets/img/flight.png" alt=""> 38 <h3 class="flow-itemTtl">現地に渡航</h3> 39 </div> 40 <div class="flow-itemBottom"> 41 <p class="flow-itemBold">到着日には空港でお出迎えし、初日のオリエンテーションを行います。 42 滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</p> 43 <p class="flow-itemBold">iSaraは『ノマド』フリーランス養成講座です。 44 楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。 45 </p> 46 </div> 47 </li> 48 <li class="flow-item"> 49 <div class="flow-itemTop"> 50 <img src="assets/img/personwithlight.png" alt=""> 51 <h3 class="flow-itemTtl">実案件を通して学ぶ</h3> 52 </div> 53 <div class="flow-itemBottom"> 54 <p class="flow-itemBold">現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p> 55 <p class="flow-itemBold">案件獲得のためのメールの書き方や見積りの仕方など、 56 他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p> 57 <p class="flow-itemTxt">*現役フリーランスがサポートします。</p> 58 </div> 59 </li> 60 <li class="flow-item"> 61 <div class="flow-itemTop"> 62 <img src="assets/img/jobsupport.png" alt=""> 63 <h3 class="flow-itemTtl">帰国後の仕事獲得サポート付き</h3> 64 </div> 65 <div class="flow-itemBottom"> 66 <p class="flow-itemBold">経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p> 67 <p class="flow-itemBold">iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。 68 もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p> 69 </div> 70 </li> 71 </ul> 72 </div> 73 </div> 74 </section>

scss

1// flow 2.flow-inner { 3 padding: 0 16px 60px; 4 .flow-ttl { 5 text-align: center; 6 font-size: 1.8rem; 7 line-height: 2.2; 8 font-weight: 600; 9 letter-spacing: 0.1em; 10 margin: 2em 0; 11 i { 12 font-size: 1.4rem; 13 } 14 } 15} 16.flow-item { 17 background-color: #FDF5E0; 18 border-radius: 3px; 19 cursor: pointer; 20 &:not(:last-of-type) { 21 margin-bottom: 3px; 22 } 23 .flow-itemTop { 24 display: flex; 25 align-items: center; 26 padding: 10px 13px; 27 position: relative; 28 &::after { 29 content: ""; 30 width: 7px; 31 height: 7px; 32 border-bottom: 4px solid #000; 33 border-right: 4px solid #000; 34 transform: rotate(45deg); 35 position: absolute; 36 right: 20px; 37 } 38 img { 39 width: 35px; 40 margin-right: 13px; 41 } 42 .flow-itemTtl { 43 font-weight: 600; 44 font-size: 1.5rem; 45 letter-spacing: 0.1em; 46 } 47 &.add-active { 48 &::after { 49 border-bottom: none; 50 border-right: none; 51 border-top: 4px solid #000; 52 border-right: 4px solid #000; 53 transform: translateY(-5px) rotate(-45deg); 54 } 55 } 56 } 57 .flow-itemBottom { 58 padding: 0 13px 20px; 59 display: none; 60 &:nth-child(1) { 61 padding: 13px 20px; 62 } 63 &::before { 64 content: ""; 65 display: block; 66 width: 100%; 67 height: 10px; 68 } 69 .flow-itemBold { 70 font-weight: 600; 71 font-size: 1.2rem; 72 line-height: 1.6; 73 letter-spacing: 0.1em; 74 } 75 } 76}

js

1$(function () { 2 // flow 3 $('.flow-item').on('click', function(){ 4 $(this).find('.flow-itemBottom').stop().slideToggle(250); 5 $(this).find('.flow-itemTop').toggleClass('add-active'); 6 }); 7 $('.flow-item').hover( 8 function() { 9 $(this).find('.flow-itemTtl').css('text-decoration', 'underline'); 10 }, 11 function() { 12 $(this).find('.flow-itemTtl').css('text-decoration', 'none'); 13 } 14 ); 15});

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

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

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

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

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

m.ts10806

2020/07/05 11:54

>クリックした後も これは「いつまで」ですか? 初期状態は下線なし →ホバー時下線出現 →その後は離しても下線出現 →ページリロードしたら下線は?
yuta_bsn

2020/07/05 12:57

その後は離しても下線出現で、このテキスト以外ならどこでもいいのでクリックすることで下線を消すようにしたいです。もちろんページリロードしたら下線は消したいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問