Q&A
.question-accordion liにhoverするとfa-angle-downにまで下線が引かれてしまって困っていたのですが、.fa-angle-downを<span>で囲んでみたら解決できました
なぜこのようなことが起こったのかわかりません 調べても情報が出てきません よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>isara模写</title> 6 <link rel="stylesheet" href="css/isara.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> 9 </head> 10 <body> 11 <div class="qa"> 12 <h2><i class="far fa-envelope-open"></i>よくある質問</h2> 13 <ul class="question-accordion"> 14 <li> 15 <div class="miseru"> 16 <h3><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？</h3> 17 <span><i class="fas fa-angle-down"></i></span> 18 </div> 19 <div class="kakusu"> 20 <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p> 21 </div> 22 </li> 23 24 <li> 25 <div class="miseru"> 26 <h3><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか？</h3> 27 <i class="fas fa-angle-down"></i> 28 </div> 29 <div class="kakusu"> 30 <p>参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p> 31 </div> 32 </li> 33 34 <li> 35 <div class="miseru"> 36 <h3><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか？</h3> 37 <i class="fas fa-angle-down"></i> 38 </div> 39 <div class="kakusu"> 40 <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p> 41 </div> 42 </li> 43 44 <li> 45 <div class="miseru"> 46 <h3><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか？</h3> 47 <i class="fas fa-angle-down"></i> 48 </div> 49 <div class="kakusu"> 50 <p>拠点となる新築シェアハウスの周辺に、50バーツ程度の（160円）安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p> 51 </div> 52 </li> 53 54 <li> 55 <div class="miseru"> 56 <h3><i class="far fa-question-circle"></i>追加でかかる費用はありますか？</h3> 57 <i class="fas fa-angle-down"></i> 58 </div> 59 <div class="kakusu"> 60 <p>宿泊費（トータル20000円）と食費（一食150円程度）くらいです。</p> 61 </div> 62 </li> 63 64 <li> 65 <div class="miseru"> 66 <h3><i class="far fa-question-circle"></i>就職、転職はできますか？</h3> 67 <i class="fas fa-angle-down"></i> 68 </div> 69 <div class="kakusu"> 70 <p>DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界（医師：6倍、看護師：3倍）よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。</p> 71 </div> 72 </li> 73 74 <li> 75 <div class="miseru"> 76 <h3><i class="far fa-question-circle"></i>フリーランスにならなければならないのですか？</h3> 77 <i class="fas fa-angle-down"></i> 78 </div> 79 <div class="kakusu"> 80 <p>いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。</p> 81 </div> 82 </li> 83 84 <li> 85 <div class="miseru"> 86 <h3><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたいです。可能ですか？</h3> 87 <i class="fas fa-angle-down"></i> 88 </div> 89 <div class="kakusu"> 90 <p>きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。 ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</p> 91 </div> 92 </li> 93 94 <li> 95 <div class="miseru"> 96 <h3><i class="far fa-question-circle"></i>学ぶプログラミング言語はなんですか？</h3> 97 <i class="fas fa-angle-down"></i> 98 </div> 99 <div class="kakusu"> 100 <p>HTML / CSS / PHPを学びます。どの言語も需要が高いです。</p> 101 </div> 102 </li> 103 104 <li> 105 <div class="miseru"> 106 <h3><i class="far fa-question-circle"></i>将来的にwebサービス、アプリ、メディアを作りたいです。</h3> 107 <i class="fas fa-angle-down"></i> 108 </div> 109 <div class="kakusu"> 110 <p>経験してる講師がいますよ。大丈夫です。</p> 111 </div> 112 </li> 113 114 <li> 115 <div class="miseru"> 116 <h3><i class="far fa-question-circle"></i>次回開催の予定はありますか？</h3> 117 <i class="fas fa-angle-down"></i> 118 </div> 119 <div class="kakusu"> 120 <p>未定です。まずはお問合せください。</p> 121 </div> 122 </li> 123 124 <li> 125 <div class="miseru"> 126 <h3><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。</h3> 127 <i class="fas fa-angle-down"></i> 128 </div> 129 <div class="kakusu"> 130 <p>講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</p> 131 </div> 132 </li> 133 134 <li> 135 <div class="miseru"> 136 <h3><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加可能でしょうか。</h3> 137 <i class="fas fa-angle-down"></i> 138 </div> 139 <div class="kakusu"> 140 <p>タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</p> 141 </div> 142 </li> 143 144 <li> 145 <div class="miseru"> 146 <h3><i class="far fa-question-circle"></i>治安はどうですか？</h3> 147 <i class="fas fa-angle-down"></i> 148 </div> 149 <div class="kakusu"> 150 <p>バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</p> 151 </div> 152 </li> 153 154 <li> 155 <div class="miseru"> 156 <h3><i class="far fa-question-circle"></i>パソコンは必要ですか？</h3> 157 <i class="fas fa-angle-down"></i> 158 </div> 159 <div class="kakusu"> 160 <p>はい。ノートPCのご用意が必要です。</p> 161 </div> 162 </li> 163 164 165 166 </ul> 167 </div> 168</body> 169 170
CSS
1 .qa{padding:65px 0px 60px; text-align:center;} 2 .qa h2{font-size:1.8rem; color:#333; margin-bottom:45px;} 3.kakusu{display:none;} 4.miseru{display:flex; justify-content:space-between; } 5.miseru h3{font-size:1.3rem; } 6.fa-question-circle{color:#016EA9; font-size:1.1rem; } 7.fa-angle-down{font-size:1.9rem; color:#E5E5E5; padding-right:5px;} 8.question-accordion{width:75%; margin:0 auto; list-style: none;} 9.question-accordion li{width:100%; border:solid #E5E5E5 1px; margin-bottom:7px; padding:23px 18px; 10height:65px; cursor:pointer;} 11.question-accordion li:hover{text-decoration:underline;} 12
回答1件
0
ベストアンサー
こんにちは。
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
勝手訳：テキスト装飾は、フロートされた・絶対配置された子孫や、原子的インラインレベルの子孫（インラインブロックやインラインテーブルなど）には伝わらないことに注意してください。
なので、.fasにdisplay: inline-blockがついていることが原因です。
では、なぜspanでラップしたときだけ下線が無効になるのかというと、blockification と呼ばれる現象です。
Some layout effects require blockification or inlinification of the box type,
...
A parent with a grid or flex display value blockifies the box’s display type.
CSS Display Module Level 3
つまり、.fasがフレックスアイテムである場合、blockification によってブロック要素になってしまうことにより、下線が有効になっています。
spanでラップすることによってspanがフレックスアイテムになり、.fasはフレックスアイテムではなくなるため、インラインブロックが有効となり、text-decorationが伝わらなくなる、というのが今回の現象です。
blockification は知っていたのですが、インラインブロックにテキスト装飾が伝わらないことは知りませんでした。
大変勉強になりました。良質問だと思いますので高評価します。
投稿2021/02/26 04:12
編集2021/02/26 15:59
総合スコア36941
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/26 08:10
2021/02/26 15:58
2021/02/27 00:29
2021/02/27 01:17
2021/02/27 04:26