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

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

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

COM(Component Object Model)はMicrosoftによるコンポーネントテクノロジーであり、 ソフトウェアの再利用を目的とした技術を指します。

CSS3

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1173閲覧

続きを読むを隠す ボタンを押した後、 続きを読むボタンが消えずに残ってしまいます。

niconic73027793

総合スコア215

COM

COM(Component Object Model)はMicrosoftによるコンポーネントテクノロジーであり、 ソフトウェアの再利用を目的とした技術を指します。

CSS3

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2021/11/12 11:50

編集2021/11/12 11:59

CSS で続きを読むの次のコンテンツを隠すCSSを作っています。

スマホ表示のみ 続きを読むボタンが出てくる処理をしているのですが、

リンク内容

上記の環境では、 スマホで閲覧し、続きを読むをクリックしても再度続きを読むボタンだ出てきてしまいます。

どうしたらでないようにできるのでしょうか?

なお、同じCSSを記述した下記の環境

リンク内容

では、続きを読むをスマホで閲覧し、クリックすると消えます。
ソースをみましたが、違いがよくわかりませんでした。

下記がCSSソースです

/*CSS 続きを読むを隠す ここから*/ @media (max-width:600px){ .readmore{ position: relative; box-sizing: border-box; /*以下お好み*/ /* ボーダーを付ける場合 */ padding: 10px; border: 1px solid #CCC; } .readmore-content{ position: relative; overflow: hidden; /*以下お好み*/ /*高さの初期値*/ height: 840px; } .readmore-content::before { z-index:1; display: block; position: absolute; bottom: 0; left: 0; width: 100%; content: ""; /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/ height: 50px; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%); } /* 続きを読むボタン */ .readmore-label{ display: table; bottom: 5px; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); margin: 0 auto; z-index: 2; padding: 0 10px; background-color: #172d81; border-radius: 10px; color: #FFF; } .readmore-label:before{ content: '続きを読む'; } .readmore-check{ display: none; } /*チェック時にボタンを非表示*/ .readmore-check:checked ~ .readmore-label{ /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */ display: none; } readmore-check:checked ~ .readmore-label:before{ content: '閉じる'; } /*チェック時に高さを自動に戻す*/ .readmore-check:checked ~ .readmore-content{ height: auto; } /*チェック時グラデーション等を削除*/ .readmore-check:checked ~ .readmore-content::before { display: none; } } /*CSS 続きを読むを隠す ここまで*/

下記がhtmlです

<!--/CSS 続きを読むボタンの次を隠すここから--> <div class="readmore"> <input id="check1" class="readmore-check" type="checkbox" /> <div class="readmore-content"> <div class="contents_box"> <h3 class="contentBoxTitle">トイレの水漏れの原因と予防対策</h3> <div class="line_title">原因</div> <p>急にトイレが詰まって水が溢れそうになるとパニックになってしまいがちです。<br />しかし、トイレが詰まった時の対処法がわかっていれば慌てることなく自分で直すことも可能です。<br />さらにトイレが詰まる原因を理解していれば事前に対策を講じることにより、トイレの詰まりを予防することができます。<br />今回はトイレの水周りの詰まり防止策やトラブルの解決策を紹介します。</p> <h2>トイレが詰まる原因や症状は?</h2> <img src="https://xn--u9j734hmzmppgnj1d.com/wp-content/uploads/price1/image1.jpg" alt="トイレが詰まる原因や症状は?" width="751" height="498" class="aligncenter size-full wp-image-563" /> <p>本来トイレは大量の水と強い水流で詰まりにくい仕組みとなっています。<br />そのトイレが詰まるということは何らかの原因や症状があっておこることがほとんどです。<br />トイレが詰まる原因や症状を紹介します。</p> <h3>汚物やトイレットペーパー以外の異物を流した</h3> <p>トイレが詰まる原因のほとんどは汚物やトイレットペーパー以外を流した時に起こります。</p> <p>特に金属やプラスティックの固形物は溶けることが一切ないため途中で引っかかると流れるのが困難になり、また取り出すのも困難です。</p> <p>オムツや生理用品は吸水性が高く、排水管で膨張しつまりの原因となるでしょう。</p> <p>また食べ残しの残飯は油分が多いため、排水管に付着しやすく詰まりやすくなります。</p> <h3>トイレの水圧や水量が不足している</h3> <p>排泄物を流すには水量はもちろん水圧も大事です。</p> <p>節水のためにタンクのなかにペットボトルを入れる方法が昔流行っていましたが貯水量が減り水圧の減少に繋がりますのでマイナスの要因となります。</p> <p>さらにタンク内でひっかかることにより水の流れっぱなしやタンク内破損の要因となります。</p> <h3>トイレには詰まりやすい場所がある</h3> <p>トイレの排水溝の形状は排水管の位置にもよりますが形状が複雑なことがほとんどです。<br />なぜなら排水溝に角度をつけることにより「せき」を造りだし、水が溜まる仕組みを造りだしています。</p> <p>この水が溜まることによって虫の混入や臭いを防止する仕組みとなっているからです。<br />急な角度やくぼみで物が詰まりやすく流したものが引っかかりやすくなります。</p> <h2>トイレ詰まりの予防法と対策</h2> <img src="https://xn--u9j734hmzmppgnj1d.com/wp-content/uploads/price1/image2.jpg" alt="トイレ詰まりの予防法と対策" width="751" height="498" class="aligncenter size-full wp-image-563" /> <p>トイレが詰まってしまった場合、ほとんどが流す水圧、水量不足か物が詰まってしまう場合がほとんどです。</p> <p>個人で対処できる範囲ならまだいいですが、最終的に専門業者に依頼するとなるとかなりの時間と費用がかかります。</p> <p>そのため、トイレが詰まらないようにするには日ごろからの予防と対策が必要になります。</p> <h3>トイレットペーパー以外流さない</h3> <p>トイレには水に溶けやすいもの以外流すと、つまりの原因になりますので流さないよう注意してください。</p> <p>タバコやガムといった小さなものでも十分つまりの原因になります。<br />なぜなら現在のトイレは節水機能がメインのラインナップとなっており、排水溝を細くして水圧を高くしているものがほとんどだから。</p> <p>形状的に詰まりやすいので小さいものでもトイレットペーパー以外は流さないようにしましょう。</p> <h3>大量のトイレットペーパーを流さない</h3> <p>最近のトイレは節水機能が備わっているものが多く流す際には注意が必要です。</p> <p>一度に大量のトイレットペーパーやトイレシートを流してしまうと詰まりやすくなります。</p> <p>詰まらせない対策としては数回に分けて流すか、流す際は「大」のレバーで水がしっかり流れるのを確認してください。</p> <h3>過度な節水対策をしない</h3> <p>排泄物があるときは関わらず「大」のレバーで流してください。<br />「小」で流すと水流と水圧不足で詰まりの原因となります。</p> <h3></h3> <p>途中で排泄物が止まってしまうと詰まりやすくなり、流しきるのが大変です。</p> <h2>トイレが詰まったとき、自分で直す方法</h2> <h3><img src="https://xn--u9j734hmzmppgnj1d.com/wp-content/uploads/price1/image2.jpg" alt="トイレが詰まったとき、自分で直す方法" width="751" height="498" class="aligncenter size-full wp-image-563" /></h3> <p>トイレが詰まったらまずは自分で直してみましょう。<br />改善がみられなかったり、不安に感じたら専門業者に任すのが無難です。<br />まずは被害を拡大させないためや事故防止のための準備をしましょう。</p> <h3>作業前の準備</h3> <p>作業前の準備は下記の通りです。</p> <p>1.養生や道具を準備する<br />床に新聞紙やビニールシートを敷き、汚れないようにしましょう。<br />また手袋やバケツなど必要な道具を用意しましょう。</p> <p>2.温水洗浄便座のプラグを抜く<br />コンセント周りに水が掛かると感電の危険があり大変危険です。<br />必ずプラグは抜いてから作業してください。</p> <p>3.止水栓を閉める<br />止水栓を閉めずに作業を行うと、水が溢れたりすることもあるので必ず閉めましょう。止水栓は給水管でタンクとつながっていることがほとんどでマイナスドライバーで右周りに回すと止まります。</p> <h3>バケツで水を流す</h3> <h3>方法の1つとしてバケツで水を流す方法があります。</h3> <p>コツとしては少し上の位置から様子を見つつ水を流します。<br />バケツからの水圧で詰まりを直す仕組みです。<br />詰まった物を流し込むことができれば少しずつですが解消されていきます。</p> <h3>お湯を使う</h3> <p>お湯を使うことにより、詰まりを解消できることがあります。</p> <p>特に水溶性の物や油分に効果があります。<br />少しずつお湯を流し込んだ後30分ほど待ち、水位に変化があれば最後にバケツで水を流して水の流れを確認します。</p> <p>便器の素材である陶器は熱湯に弱いため、高くても60度のお湯を使うようにしましょう。</p> <h3>ラバーカップを使う</h3> <p>道具を使った一般的な直し方はラバーカップを使用する方法です。</p> <p>ラバーカップには和式用、洋式用と種類があります。<br />必ず適した種類を用意するようにしてください。</p> <p>使い方は排水口にラバーカップをゆっくり押し込み密着させ真空状態を作ったあと、今度は引き上げれば詰まったものが引き出される仕組みです。</p> <p>作業をする際は、便器周りもしっかりビニールシートとで養生しておくことが大事です。<br />なぜならラバーカップを押したり引いたりするとき、汚水が飛び散る可能性が高いからです。</p> <h3>重曹やクエン酸を使う</h3> <p>重曹やクエン酸の洗浄力の高さで詰まりが解消されることがあります。</p> <p>クエン酸は食用酢で代用できます。<br />便器の排水口に重曹を振りかけた後クエン酸をかけ、その後お湯を注ぎます。</p> <p>1時間ほど待機した後、バケツで水を流します。</p> <h2>まとめ</h2> <p><img src="https://xn--u9j734hmzmppgnj1d.com/wp-content/uploads/price1/image4.jpg" alt="まとめ" width="751" height="498" class="aligncenter size-full wp-image-563" /></p> <p>トイレの詰まる原因やその対策、また詰まったらときの直し方を紹介しました。</p> <p>トイレの詰まる原因としては</p> <ul> <li>金属やプラスティックの固形物がひっかかることにより起きる。</li> <li>オムツや生理用品が排水管内で膨張することにより詰まる。</li> <li>食べ残しの油分が排水管にひっかかるため詰まる。</li> <li>節水のためペットボトルをタンクに入れたり、間違ったレバーの使い分けを行うことにより水圧不足で起きる。</li> <li>トイレの排水管の構造上、物がひっかかりやすいため起きる。</li> </ul> <p>ことがあげられます。</p> <p>トイレ詰まりの予防や対策としては</p> <ul> <li>水溶性以外の物は流さない。</li> <li>大量のトイレットペーパーは流さない。</li> <li>過度な節水対策は行わない。</li> </ul> <p>ことがあげられます。</p> <p>トイレが詰まったとき自分で直す方法としては</p> <ul> <li>バケツからの水圧を利用し詰まったものを流す。</li> <li>お湯を利用し、水溶性物質や油分を溶かし流す。</li> <li>ラバーカップを使用し、詰まったものを吸いだす。</li> <li>重曹とクエン酸の洗浄力を利用し、排水管に付着した汚れを流す。</li> </ul> <p>ことがあげられます。<br />自分で直す際は、床周りの養生や事故防止のための準備を必ず行うようにしましょう。</p> <p>普段から予防策を講じていればトイレ周りのトラブルはほとんど起こりません。<br />しかしトイレを使用していて異変を感じたら早めの対策が必要です。<br />特に異物が奥で詰まってしまうと個人ではどうすることもできません。<br />自分で直してみて、改善がみられなければすぐに中止し、専門業者に対応してもらってください。</p> </div> <label class="readmore-label" for="check1"></label> </div> </div> </div> <div class="clearfix"></div> <!-- .article-body --><!-- /wp:html -->

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

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

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

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

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

m.ts10806

2021/11/12 11:55

htmlも質問本文に提示してください。
niconic73027793

2021/11/12 11:59

失礼しました。 追記しました。
guest

回答1

0

自己解決

コピーしたときに、 div の数があわなかったのでずれていました。

投稿2021/11/12 13:09

niconic73027793

総合スコア215

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問