0

すみません。ド素人で申し訳御座いません。個人的理由でみよう見まねで作ってみた人物の紹介の為のチェックボックスが効きません。何故かお解りでしょうか?宜しくお願い致します(m_m)。

動かない事例
問題事例

動く事例

動く事例

html(動かない事例の)

<h4 class="teacher_h3">ハイレベルプロの先生のご紹介</h4>
<div class="notableTeachersText">
<h3>K.M先生</h3>
</div>
<figure><img src="../img/teacher018.png" alt="K.M先生"/></figure>
<div class="menu">
<label for="menu_bar08">自己紹介などはこちらから</label>
<input type="checkbox" id="menu_bar08" class="accordion" />

CSSのmenu_bar記述

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li{
    max-height: 40000px;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

宜しくアドバイスを頂ければ幸いです(m_m)。

追記1

#links01#links08は単独では存在していません。ですが、links01~links07は機能するのです。

コメント有難う御座います。(m_m)

追記2

すいません、やはり解決していませんでした。K.M先生の図自体は下のN.I先生のものに近づいた
ものの、やはりチェックボックスが開閉しません。

htmlのdivに付されているID、クラス関係のcss記述は下記しか残りが有りません。

#content2>section section .notableTeachers input {
    display: none;
}
.menu li {
    max-height: 0;
    overflow-y: hidden;
}
.menu ul {
    margin: 0;
    padding: 0 15px;

追記 クリックが動く事例のHTMLを書きます。(ID="menu_bar07", links07)

<section class="notableTeachers clearfix">
            <h4 class="teacher_h3">スタンダードプロの先生のご紹介</h4>
            <div class="notableTeachersText">
              <h3>N.I先生</h3>
            </div>
            <figure><img src="../img/teacher017.png" alt="N.I先生"/></figure>
            <div class="menu">
              <label for="menu_bar07">自己紹介などはこちらから </label>
              <input type="checkbox" id="menu_bar07" class="accordion" />
              <ul id="links07">
                <li>
                  <dl>
                    <dt>指導科目</dt>
                    <dd><小学生>算数&nbsp;&nbsp;国語&nbsp;&nbsp;理科&nbsp;&nbsp;社会&nbsp;&nbsp;英語<br>
                      <中学生>数学&nbsp;&nbsp;国語&nbsp;&nbsp;理科&nbsp;&nbsp;英語&nbsp;&nbsp;社会(基礎レベル)<br>
                      <高校生>数学&nbsp;&nbsp;国語(基礎レベル)&nbsp;&nbsp;英語(基礎レベル) </dd>
                  </dl>
                </li>
                <li>
                  <dl>
                    <dt>家庭教師等の指導歴</dt>
                    <dd>家庭教師20年、塾15年、高等学校2年、大学2年</dd>
                  </dl>
                </li>
                <li>
                  <dl>
                    <dt>保有資格</dt>
                    <dd>教員免許&nbsp;&nbsp;小学校、中学校(数学・理科)、高校(数学・理科)、養護教諭<br>
                      数学検定準一級</dd>
                  </dl>
                </li>
                <li>
                  <dl>
                    <dt>指導例</dt>
                    <dd>Aさん→指導教科は英語・国語・日本史です。高校2年生で学校・塾を辞めて、勉強をずっとしていない状態で高校3年生にあたる8月頃から家庭教師一本で受験勉強を始めました。最初は勉強することにも慣れていない様子でしたので、週に数日勉強時間を作ることから始め、徐々に毎日勉強することに慣らしていきました。毎週、日割りで学習計画を立て、毎回の授業で進度を確認しました。過去問は11月位から始め、志望校の受験問題の傾向に合わせた学習を進めました。12月は不安で勉強に手がつかない日もありましたが1月からは調子も良くなり、センター試験・私立大の受験と順調に受験でき、当初、チャレンジ校と言っていた難関大学にも合格できました。<br>
                      Bさん→指導教科は算数で時々質問がある時は他の教科も教えていました。小学校6年生の11月の受験直前期からの指導です。算数が苦手で足をひっぱり、模試では第一志望校は合格圏外で偏差値はあとプラス10以上必要でした。過去問は合格点の半分以下の得点で非常に厳しい状況でした。また、塾にも通っていたため、宿題は出さず、授業だけで成績を伸ばしてほしいというご要望でした。ご家庭には10年分以上の過去問が用意されていたので、毎週、事前に解いていた過去問で間違えた問題の単元を徹底的に復習し、その問題の類題で練習をしました。練習を重ねるごとに解ける問題も増え、最終的には第一志望校に一発で合格できました。 </dd>
                  </dl>
                </li>
                <li>
                  <dl>
                    <dt>自己紹介</dt>
                    <dd>今まで小学生から社会人まで沢山の生徒さんの指導をしてきました。不登校の生徒さん、内部進学生、難関大学の受験を志望する生徒さん等幅広い指導を行っています。生徒さんの目標・レベルに合わせた指導を丁寧に行います。</dd>
                  </dl>
                </li>
              </ul>
            </div>
          </section>

動かない場合の事例のHTMLを追記させて頂きます。(上記K.M先生)

 <section class="class" id="highlevel-pro">
          <h3 class="teacher_h3">ハイレベルプロ</h3>
          <p>家庭教師、塾講師などの教育指導歴がおおよそ6~15年程度保有する講師。学歴の目安としておおよそ偏差値62程度以上の大学卒業者。学生は含まれません。以下は現役講師のご紹介の一部です。</p>
          <section class="notableTeachers clearfix">
            <h4 class="teacher_h3">ハイレベルプロの先生のご紹介</h4>
            <div class="notableTeachersText">
              <h3>K.M先生</h3>
            </div>
            <figure><img src="../img/teacher018.png" alt="K.M先生"/></figure>
            <div class="menu">
              <label for="menu_bar08">自己紹介などはこちらから </label>
              <input type="checkbox" id="menu_bar08" class="accordion" />
            <ul links="links08">
              <li>
                <dl>
                 <dt>指導科目</dt>
                 <dd><小学生>算数&nbsp;&nbsp;国語&nbsp;&nbsp<br>
                     <中学生>英検&nbsp;&nbsp;英検(5級~2級)&nbsp;&nbsp;国語(現代文)<br>
                     <高校生>英検&nbsp;&nbsp;英検(5級~2級)&nbsp;&nbsp;国語(現代文)</dd>
                </dl>
              </li>
              <li>
                <dl>
                 <dt>合格実績</dt>
                 <dd><中学校>明大中野中学&nbsp;&nbsp;桐蔭中学&nbsp;&nbsp;工学院中学&nbsp;&nbsp;東京女学館中学&nbsp;&nbsp;佼成学園&nbsp;&nbsp;帝京八王子&nbsp;&nbsp;日大3中&nbsp;&nbsp;目黒学園<br>
                     <高校>駒沢付属&nbsp;&nbsp;神奈川県立高校多数<br>
                     <大学>明治大学&nbsp;&nbsp;日本大学&nbsp;&nbsp;北里大学&nbsp;&nbsp;駒澤大学&nbsp;&nbsp;産業能率大学<br>
                     <その他>英検は今まで担当した生徒は10名。1回目で全員合格。(準2級3人&nbsp;&nbsp;3級5人&nbsp;&nbsp;4級1人&nbsp;&nbsp;5級1人)
                  </dd>
                 </dl>
                </li>
              <li>
                <dl>
                 <dt>指導歴</dt>
                 <dd>30年</dd>
                </dl>
              </li>
              <li>
                <dl>
                 <dt>指導可能地域</dt>
                  <dd>神奈川県(主に、小田急線)</dd>
                </dl>
              </li>
              <li>
                <dl>
                 <dt>資格</dt>
                  <dd>教員免許(英語)&nbsp;&nbsp;小学校&nbsp;&nbsp;英検準1級&nbsp;&nbsp;カウンセリング勉強中</dd>
                </dl>
              </li>
              <li>
               <dl>
                <dt>自己PRその1</dt>
                <dd><大切にしていること><br>〇興味を持てるように働きかけます。進学塾や進学校であまりにも多くの課題をこなしていくうちに、その教科を学ぶ意味や本来の楽しさを見失ってしまうことがあります。せっかく力があるのに、味わったり、振り返ったりする時間がなくなってしまうのです。<br>例えば、英語の学習では、洋楽を聞いたり、実際の会話を聞きながら、声に出したりしながら、語学の楽しさを感じてもらうことから始めます。興味の入り口は一人一人違うので、探りながら、前向きに取り組める方法でアドバイスしていきます。</dd>
               </dl>
              </li>
              <li>
               <dl>
                <dt>自己PRその2</dt>
                <dd>〇自分の力で解決できるように<br>「好きこそものの上手なれ」とはよく言ったもので、興味を持つと、理解力も上がってきます。そのときがチャンスです。少し背中を押してあげると、自力でなんとか解決できるようになります。今までぎこちなく読んでいた英文が、滑らかに読めるようになってくるのです。意味が理解できるようになってくるのです。この仕事のやり甲斐を感じる瞬間です。生徒が課題に興味を持って、自分で前向きに取り組めるようになることがゴールだと思っています。家庭教師が自分の持ち時間の中で教えられることには、物理的に限界があるわけですから。ご縁が合って、ともに学んでいくうちに、生徒が前向きに学習できるようになり、自分の目標に近づくことができたなら、力になることができたなら、こんな嬉しいことはありません。</dd>
               </dl>
              </li>
              <li>
               <dl>
                <dt>自己PRその3</dt>
                <dd>〇保護者との連携<br>保護者の皆様との連携は密に取るようにしています。思春期の子どもたちにとっては、親御さんの意見を理解していても、素直に受け入れたくないときもあります。また、子どもの本当の気持ちに、ご両親も気づいていないこともときにあります。そんなとき、橋渡しをするのも仕事のうちだと考えています。最近では、交友関係や学習面で問題を抱えている生徒さんや、登校できなくなった生徒さんを見る機会が増えてまいりました。カウンセリングの手法を取り入れながら対応しています。</dd>
               </dl>
              </li>
             </ul>
            </div>
           </section>

ここまで書いてみて気づいたのですが、上手く開閉するN.I先生他は開くと

画像の説明をここに入力

と開閉しても(他links01~07まで同じく)内容が違ってきてしまっているのですが、関係しているクラス

.menu li dl dt:after {
content: ":";

に関係してそもそもhtmlの書き込み自体が間違っているのでしょうか?それとも何か
他に関係しそうなcssの動きの為でしょうか?

アドバイスを頂けますと誠に幸いです(m_m)。


追記させて頂きます。関係しそうなcss一覧

#content2>section section .notableTeachers {
padding: 0;
margin: 20px 0 0;
background-color: #fff;
}
#content2>section section .notableTeachers h4 {
text-align: center;
padding-top: 15px;
}
#content2>section section .notableTeachers h4:before,
#content2>section section .notableTeachers h4:after {
content: "=";
}
#content2>section section .notableTeachers>figure {
width: 50%;
float: left;
padding: 0 0 0 10px;
}
#content2>section section .notableTeachers .notableTeachersText {
width: 50%;
float: right;
padding: 0 10px 0 0;
}
#content2>section section .notableTeachers h5 {
font-size: 1.5em;
margin: 10px 0;
}
#content2>section section .notableTeachers h5 span {
font-size: 14px;
}
#content2>section section .notableTeachers label {
display: block;
text-align: center;
clear: both;
background-color: #fabd00;
margin: 0;
line-height: 2em;
}
#content2>section section .notableTeachers label:after {
content: "+";
background-image: url(../img/icon_circle_white.png);
background-size: 16px auto;
background-repeat: no-repeat;
background-position: 50% center;

お手数をおかけします(m_m)


皆さま、色々なコメント、解答、アドバイスを頂き有難う御座います!
解決を致しました。失礼が御座いましたらお許し下さい(m_m)。

9
  • 2
    直接関係の無い個人的な事情(「HP担当者が~」というセンシティブな内容)は質問文に含めない方がよいと思います。
    – cubick
    Commented 2018年5月19日 16:40
  • 1
    <ul id="links08">は存在してますか? もしあれば質問文に追記してください。 無ければそれが原因です。
    – set0gut1
    Commented 2018年5月19日 16:52
  • 1
    あらかじめ、li を非表示にするスタイルを適用していると思いますが、それに08は含まれてますか? 含まれてないと、チェック前後で表示が変わらないため、機能していないように見えるかもしれません。
    – sakmas
    Commented 2018年5月21日 2:44
  • li の非表示、表示をするcssは何ですか? saruwakakun.com/html-css/reference/hidden-show によると上の~ID #links08だけで通じるように思えるのですが・・・
    – Kentaro
    Commented 2018年5月21日 10:29
  • 2
    @KentaroTomono 質問文が長く読みづらいです。本当に必要な事項のみまとめるか参考コードはスニペットなどで圧縮できますか?
    – user10259
    Commented 2018年5月22日 0:44

1 件の回答 1

4

動かない場合の事例のHTMLを追記させて頂きます。(上記K.M先生)

に記載して頂いているコード内で、 <ul links="links08"> の属性名が links になっています。
これを <ul id="links08"> にして頂くと動くかと思います。

下記、修正したうえで少し簡略化しました。

.menu li {
    max-height: 0;
    overflow-y: hidden;
}
.menu ul {
    margin: 0;
    padding: 0 15px;
}

#menu_bar08:checked ~ #links08 li{
    max-height: 40000px;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
<section class="notableTeachers clearfix">
  <h4 class="teacher_h3">ハイレベルプロの先生のご紹介</h4>
  <div class="notableTeachersText">
    <h3>K.M先生</h3>
  </div>
  <div class="menu">
    <label for="menu_bar08">自己紹介などはこちらから </label>
    <input type="checkbox" id="menu_bar08" class="accordion" />
    <ul id="links08">
      <li>
        <dl>
          <dt>指導科目</dt>
          <dd><小学生>算数&nbsp;&nbsp;国語&nbsp;&nbsp<br>
            <中学生>英検&nbsp;&nbsp;英検(5級~2級)&nbsp;&nbsp;国語(現代文)<br>
            <高校生>英検&nbsp;&nbsp;英検(5級~2級)&nbsp;&nbsp;国語(現代文)
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</section>

1
  • 有難う御座います!100%解決致しました!バカなミスで申し訳御座いません(m_m)。今回は急ぎで質問の嵐をしてしまいましたが私も勉強中で必死で頑張ります。多謝多謝(m_m)(m_m)
    – Kentaro
    Commented 2018年5月22日 7:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。