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

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

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

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

CSS

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

Q&A

解決済

1回答

3979閲覧

overflow:hidden;で表示が消える範囲を目的のclassの範囲で消えるように設定したい

gumin

総合スコア4

CSS3

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

CSS

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

0グッド

0クリップ

投稿2020/07/06 09:13

overflow:hidden;の範囲について確認させてください。
今class="tel-line"の範囲にoverflow:hidden;を設定しております。
"tel-line"の疑似属性(before,after)に線をつけて、transitionをつけて動かすようにしたのですが、動かした線がtel-lineの範囲をこえた時、表示を消そうと思ったのに消えない状態です。
どのような指定をすれば、tel-lineの範囲外出たときに表示が消えるようになるでしょうか?

※"Tel"項目がうまくいってない状態です。"Contact"項目はclass="mail"の範囲で、範囲外に出たときに表示消えております。
※CSS必要なさそうな範囲も載せており、読みづらいかと思いますが、本当に不必要か判断できないため、すべて載せました。どうぞよろしくお願いいたします。

HTML

1<div class="common-footer"> 2 <div class="inquiry"> 3 <div class="contact">お問い合わせはこちら</div> 4 <div class="information"> 5 <div class="mail"><p class="inquiry-title">Contact<br/>us</p></div> 6 <div class="telephone"><p class="inquiry-title"><span class="tel-line">Tel</span></p><p class="tel-info">000-0000-0000</p><p class="recept-time">受付時間:平日 10:00~17:00<br/>定休日:土曜・日曜・祝日・年末年始</p></div> 7 </div> 8</div> 9</div>

CSS

1/* footer */ 2.common-footer{ 3 background: #027; 4 color: #fff; 5 width: 100%; 6 padding:7% 7} 8.inquiry{ 9 margin-right:10%; 10 width: 600px; 11 margin-left: auto; 12} 13.information{ 14 display:flex; 15} 16.contact{ 17 padding-bottom:60px; 18 margin-right: 20%; 19 text-align:center; 20} 21.mail{ 22 margin-right:30px; 23 position: relative; 24} 25.telephone{ 26 position: relative; 27 margin-left:30px; 28} 29.inquiry-title{ 30 font-size: 72px; 31 line-height: 66px; 32 margin-bottom:5px; 33} 34.tel-line{ 35 position: relative; 36} 37.tel-info{ 38 font-size:16px; 39} 40.recept-time{ 41 font-size:10px; 42} 43/* footer-underline */ 44.mail::before, .telephone .tel-line::before{ 45 display:block; 46 content: ''; 47 position: absolute; 48 bottom: -1px; 49 left: 0; 50 width: 100%; 51 height: 1px; 52 background: #fff; 53 transition: all .4s; 54} 55.mail:hover::before, .telephone:hover .tel-line::before { 56 transform:translate3d(119%,0,0); 57} 58.mail:hover::after, .telephone:hover .tel-line::after { 59 transform:translate3d(0,0,0) 60} 61@media screen and (min-width:768px) { 62 .mail, .telephone .tel-line{ 63 overflow:hidden; 64 } 65 .mail::before, .telephone .tel-line::before{ 66 width:100%; 67 bottom:0 68 } 69 .mail::after, .telephone .tel-line::after{ 70 display:block; 71 content:''; 72 width:100%; 73 height:1px; 74 bottom:-7px; 75 left:0; 76 position:absolute; 77 background-color:#fff; 78 transition:all .4s; 79 transition-delay:.1s; 80 transform:translate3d(-100%,0,0) 81 } 82} 83@media screen and (max-width:768px) { 84 .mail::after, .telephone .tel-line::after { 85 display:none; 86 } 87} 88@media screen and (min-width:768px) { 89 .mail::after, .telephone .tel-line::after{ 90 width:100%; 91 bottom:0; 92 } 93} 94.telephone .tel-line::before, .telephone .tel-line::after{ 95 top:1.1em; 96}

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

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

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

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

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

-millmill-

2020/07/06 10:00

なさりたいのは、mail と telephoneの 「<p class="inquiry-title">に下線をかけて動かして、範囲外で消したい」 という事でしょうか? 提示されたソースでは <span class="tel-line">はblocklevelではないので tel-lineへのtransformが効いておらず mail の下線が telephone に移動しているだけのように見えますが、、、
gumin

2020/07/07 01:14

質問確認していただきありがとうございます! >「<p class="inquiry-title">に下線をかけて動かして、範囲外で消したい」 >という事でしょうか? <p class="inquiry-title">の範囲だと下線が長いと感じてしまったため、<span class="tel-line">の範囲で下線を消して範囲外で消したいと考えておりました。 ><span class="tel-line">はblocklevelではないので >tel-lineへのtransformが効いておらず >mail の下線が telephone に移動しているだけのように見えますが、、、 block要素等基本的な知識への理解が浅く、初心者レベルの質問をしてしまうのですが、疑似クラスはブロックレベルにしか付与できないのでしょうか?(今軽くネットで調べたのですがよくわからず申し訳ないです…)
guest

回答1

0

ベストアンサー

overflowはインライン要素には適用されないので、ブロック要素かインラインブロック要素に当てる必要があります。
.tel-lineにdisplay:block;を当てると少し面倒なので、その上の.inquiry-titleに当てるほうが簡単です。

css

1.telephone > .inquiry-title { 2 overflow: hidden; 3 display: block; 4}

これで実現したい動きはできると思います。

投稿2020/07/20 05:06

編集2020/07/20 05:10
nelpesica

総合スコア159

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

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

gumin

2020/07/22 03:38

ありがとうございます!助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問