HTML･CSS 目次を閉じている時のみ不具合

質問

HTML･CSS超初心者です。
この方のブログ
https://webwork-plus.com/content/design/open-area.html#2
を参考にして、目次の開閉を作成しました。
が、目次を開いている時は問題ありませんが、目次を閉じている場合のみ、その目次直下の文章をクリックすると同じページ内のまったく違う場所に飛んでしまいます。
ソースコードは

■HTML■
<div class="open-box">
<input type="checkbox" id="switch" class="on-off" />
<label for="switch" class="open-label"></label>
<div class="open">
<p>
<ol class="numbering">
　 <li><a href="#1">imgにposition:absoluteで文字を重ねる</a>
<ol>
<li><a href="#2">文字を中央に重ねる</a></li>
<li><a href="#3">文字を左上に重ねる</a></li>
<li><a href="#4">文字を左下に重ねる</a></li>
</ol>
</li>
　 <li> <a href="#5"> まとめ</a></li>
</ol>
<p>
</div>
</div>

■CSS■
/*inputを非表示*/
input[type="checkbox"].on-off{
opacity: 0;
}
/*ラベル（「開く」ボタン）*/
.open-label{
width: 200px;
margin: 0 1.5em;
padding: 0.8em;
display: block;
color: #ffffff;
font-weight: bold;
text-align: center;
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */
border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */
border-radius: 20px; /* 角を丸く */
}
/*エフェクト*/
.open-label:active{
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
}
.open-label:hover{
background: -webkit-linear-gradient(bottom, #fff4e0 1%,orange 80%);
background: #ffb8b3;
}
/*ラベルに表示するテキスト*/
.open-label::after{
content:'※目次［開く］';
}
.on-off:checked ~ .open-label::after{
content: '※目次［閉じる］';
}
/*開閉エリア*/
.open{
padding: 0 1em;
height: 0;
opacity: 0;
transition: .5s;
width: 500px;
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: #ffeff9;
border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */
border-radius: 20px; /* 角を丸く */
}
/*「開く」をタップで表示*/
.on-off:checked ~ .open{
padding: 1.5em 1em;
height: auto;
opacity: 1;
}

よろしくお願いいたします。

回答No.6

AsarKingChang · ベストアンサー

>またOKWEBに質問すればお答え頂けますでしょうか？
特に相手を選んでるわけじゃないので、
私じゃなくても誰かは回答するので、
どんどん質問していいですよ！
（別に私運営じゃないので、宣伝する意味はないですから＾＾）
ただの、酔っ払い暇人ですんで。

今回のは、まっさらにして、ひとまず、
display:none / blockで
いったん終わらせて次のステップに行く方が
良いかと思います。
今回いいものが出来ても、その次を作った時
「なんか、違うな～」なんてこともあります。
ある一点を見るより、完成したらこんな感じ？
って目で見て、後回しにできる部分では、
時間を無駄にせず、どんどん進む方が、
いい結果が出やすいかと！
（もちろん、好みですけどね）

補足

本当にいろいろとありがとうございました。
おっしゃる通りにして、また探してみます。

回答No.5

AsarKingChang

>何度もお手を煩わせてすみません。
それは、かまわないのですが。
>とは具体的にはどの場所のことでしょうか？
の件ですが、お勧めできないパターンになりますよ。
今書いているshow/hide(display:block/none)の
やり方が一番、やりたいことには近いと思います。
positionを使うのは、それでできない場合の話なので、
今みたいに、基準にしているサンプルが悪いのであれば、
その上に肉盛りしても、どんどんきつくなるだけですよ。
ってことで一度、今書いた、
show/hide(display:block/none)方式でやってみてはいかがでしょうか？

>目次開閉と目次の内容の間にかなりの行数が開いてしまいます。
で、これの解決をすると、
同じ位置に2つのパーツが同時に存在するのが、わかりますでしょうか？
なので、表示物の優先度で制御することで、対処はできる反面
「結局どっちも表示されてる」って問題が出るんです。
しかし、行数が開いた！って事に関してのみは、解決なので。
回答として書いただけで、全く今の件で使うべきではないですよ。
物事をややこしくするだけです。
で、正直、基準にしているサンプルを変更することを
お勧めします。

補足

AsarKingChangさん、何度もありがとうございます。

＞サンプルを変更する
おっしゃる通りですね。
先程気付いたのですが、現在の目次だとPCは良いのですが、スマホで見ると見切れてしまっているようです。
わたしもググってようやく今の目次に辿り着いたのですが、AsarKingChangさんお勧めの目次の載っているサイトはないでしょうか？
希望としましては
1，開閉できる
2，目次内容が入れ子
3，自動ナンバリング
4，入れ子が1-1、1-2という表示
もしくはAsarKingChangさんが作成された目次
一番いいのはAsarKingChangさんが作成された目次ですが。
勝手なことばかり言って申し訳ございません。
それとヘッダー部分のハンバーガーメニュー等、質問したいことがまだまだ山積みですが、またOKWEBに質問すればお答え頂けますでしょうか？
よろしくお願いいたします。

回答No.4

AsarKingChang

見てみましたが、そもそも、動かなかったようでした。
恐らくHTML側のセレクタが変更になっているのでしょう。
それらが開示なかったので、判断できなかったとなります。

ひとまず、
/*開閉エリア*/
.open{
padding: 0 1em;
height: 0;
/* opacity: 0; */
display: none;　←これ
transition: .5s;
width: 500px;
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: #ffeff9;
border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */
border-radius: 20px; /* 角を丸く */
}
/*「開く」をタップで表示*/
.on-off:checked ~ .open{
padding: 1.5em 1em;
height: auto;
/* opacity: 1; */
display: block;　←これ
}
手っ取り早くやるならこれだけでよいかと。
または、基準にしているサンプルのサイトを変えるか？

>目次開閉と目次の内容の間にかなりの行数が開いてしまいます。この行数を詰める方法はないでしょうか？
>目次の内容のCSSは次のとおりです。
この場合は、
基準位置に、position: relative;
動的に動くものに、position: absolute;
として、動くときだけ、z-indexをあげてあげれば
上に「重なるように」作れます。
なので、その動的なパーツのサイズをopenとcloseで変化させれば、
レイアウトはそろいますが。ただ！これとアンカータグも
相性が悪いので、あまりお勧めはできないかな～
ある程度凝った物になってきたら、素直にJS書く方が
精神的にも楽かもしれませんが。あくまでCSSだけで
行くならこんな感じかと。

補足

AsarKingChangさん、何度もお手を煩わせてすみません。

超初心者で申し訳ございませんが、
＞基準位置に、position: relative;
＞動的に動くものに、position: absolute;
＞として、動くときだけ、z-indexをあげてあげれば
＞上に「重なるように」作れます。
とは具体的にはどの場所のことでしょうか？
本当にお手を煩わせて申し訳ございません。

回答No.3

AsarKingChang

>何度も申し訳ありませんが、お教え頂ければ幸いです。
後で見ておくので、この板は少しの間開けておいてくださいね。

回答No.2

AsarKingChang

>displayに変更すると目次の内容自体が見えなくなってしまいます。
入れるとしたらこっちね。
open{
}
.on-off:checked ~ .open{
}
ただ、半透明の効果はなく、いきなり消えるので、
そうなると元々のサンプルが邪魔なだけになるでしょうね。
となると、結果、頑張った意味なくないかな？には
なりますが。
上のセレクタ部に入れれば、こちらでは動作確認取れてます。

補足

AsarKingChangさん、再度のご投稿ありがとうございます。
自分でもいろいろと試した結果
/*開閉エリア*/に

overflow: hidden;

を追加することで何とかなりました。
ただ、現在の設定では下記の通り

https://maakochannel.blog.fc2.com/blog-entry-2.html

目次開閉と目次の内容の間にかなりの行数が開いてしまいます。この行数を詰める方法はないでしょうか？
目次の内容のCSSは次のとおりです。

■CSS
ol.numbering,
ol.numbering ol{
counter-reset: list;
list-style: none;
padding: 0;
width:470px;
font: 16px/1.6 'arial narrow', sans-serif;
}
ol.numbering ol{
margin: 0 0 0 35px;
width:315px;
}

.numbering a{
position: relative;
display: block;
padding: 4px 4px 4px 31px;
margin: 7px 0;
background: #fef6f3;
color: #333;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.numbering a:hover{
background: #b3d5ed;
}

.numbering a:hover:before{
left: -10px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.numbering a:before{
content: counter(list);
counter-increment: list;
position: absolute;
top: 50%;
left: -15px;
height: 35px;
width: 35px;
margin-top: -15px;
background: #F6A38B;
color: #fff;
line-height: 26px;
border: 3px solid #fff;
text-align: center;
font-weight: bold;
border-radius: 26px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
何度も申し訳ありませんが、お教え頂ければ幸いです。

回答No.1

AsarKingChang

結論サンプルが悪い

.open{
height: 0;
opacity: 0;
}
/*「開く」をタップで表示*/
.on-off:checked ~ .open{
height: auto;
opacity: 1;
}

この部分。
確かに高さを変えているが、しっかりそのサイズは確保されており
それを、透明度で変化させてるだけなので、
見えてないだけで、元々そこに全部いるんですよね。
なので、一番確実なのは、
opacity: やめて、displayにすることでしょうね。

質問者さんがミスしたわけじゃなく、元々のサンプルも
恐らく同じ挙動だと思います。

補足

ご投稿ありがとうございます。

＞opacity: やめて、displayにすることでしょうね。
displayに変更すると目次の内容自体が見えなくなってしまいます。
また、opacityに該当する部分3箇所
/*inputを非表示*/
input[type="checkbox"].on-off{
opacity: 0;
}

/*開閉エリア*/
.open{
padding: 0 1em;
height: 0;
opacity: 0;

/*「開く」をタップで表示*/
.on-off:checked ~ .open{
padding: 1.5em 1em;
height: auto;
opacity: 1;
}

すべてdisplayに変更すると目次が表示されたままになってしまいます。