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

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

ただいまの
回答率

89.21%

続きを見る機能が実装できない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 84

LEMON_

score 12

    <main>
        <div class="resultmain">
            <div class="bg-color">
                <?php

                $elevenless = "<b>あなたは自由奔放で我が道を行くタイプです。</b><br>「みんなと一緒」や「常識」が似合わないあなたは<br>他の人が想像もつかないようなことをやってのける力を持っています。<br>自分の可能性を最大限に広げたいと思っているあなたは様々なことに挑戦していきます。<br>その経験の中で学んだことを自分自身の強みとして生き抜いていくことができます!<br>そんなあなたのことを周りの人は「生きる力がある人だな」と思っています。<br>恋愛においては好き嫌いがはっきりしているため<br>あなたのことを理解してくれる人であなたが良いと思った相手であればとてもうまくいきます!<br>";
                $elevenlessalpha = ["F", "J", "P", "V", "Z", "Q"];
                $elevenlessalphastr = "F, J, P, V ,Z, Q";
                $twelveoneless = "<b>あなたは底力を出せる人です。</br><br>普段から全てに全力で取り組むというよりは、<br><b>「自分でやると決めたことに対しては全力でやる」</b><br>といったタイプです。だからといってその他のことを疎かにするかといえばそうでもありません。<br>やらなければいけないことややるべきことも要領よくこなす能力を持っています。<br>期限が決められている物事に取り組んでいるときに締め切りが近づくと通常の何倍もの効果を発揮し底力を見せます。<br>自分でも「最初から本気出せばよかったな」と思うことがあるのではないでしょうか?<br>そんなあなたは周りの人から「能力の高い人だな」と思われているようです。<br>恋愛においては少し奥手なところもありますが、<br>「自分の気持ちに嘘はつきたくない」と考えているため好きな人ができると、迷いながらも一途に思い続けることができます。<br>";
                $twelveonelessalpha = ["O", "B", "H", "L", "D", "W", "E", "C", "G"];
                $twelveonelessalphastr = "O, B, H, L, D, W, E, C, G,";
                $twelveeightless = "<b>あなたはオンとオフを切り替えられる人です。</b><br>集中しなければならないときにはしっかりと集中し、家などでゆっくりしていい時には周りの人に見せられないほどスイッチをオフにします。<br>好きなことや、やりたいことに対してスイッチが入ると<b>すさまじい集中力</b>を発揮することができます。<br>そして、集中力モードに入っている時が一番あなたらしい状態とも言えます。<br>そんなあなたのことを周りの人は<b>「努力家だな」</b>と思っています。あなたが集中している姿や一生懸命な姿を見てそのように感じているそうです。<br>恋愛においては本気で恋をすると何か他のことをしている時でも好きな人が何度も頭の中に出てくるくらい相手の人を考えるようです。<br>そのような真剣な恋をしているときは普段のあなたよりも感情が動きやすくなっているため、楽しい状態でもあり苦しい状態でもあります。<br>そんな矛盾した感情の中でも前向きに考えようとするところがあなたの魅力的なところです。";
                $twelveeightlessalpha = ["M", "Y", "A", "T", "S", "N", "R", "U", "K", "I"];
                $twelveeightlessalphastr = "M, Y, A, T, S, N, R, U, K, I";
                ?>

                <p class="result">診断結果!</p><br>

                <?php
                if (7 <= $point && $point <= 11) {
                    print($elevenless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $elevenlessalphastr . "」" . "の人です!<br>");
                    if (in_array($initial, $elevenlessalpha)) {
                        print("好きな人と両想いかも?!");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…!");
                    }
                }
                if (12 <= $point && $point <= 21) {
                    print($twelveoneless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $twelveonelessalphastr . "」" . "の人です!<br>");
                    if (in_array($initial, $twelveonelessalpha)) {
                        print("好きな人と両想いかも?!");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…!");
                    }
                }
                if (22 <= $point && $point <= 28) {
                    print($twelveeightless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $twelveeightlessalphastr . "」" . "の人です!<br>");
                    if (in_array($initial, $twelveeightlessalpha)) {
                        print("好きな人と両想いかも?!");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…!");
                    }
                }
                ?>
            </div>
            <div class="youtube">
                <!--<p>参考動画</p>
                    <iframe src="https://www.youtube.com/embed/IVUBP7sJ-HA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                -->
            </div>
            <div class="readmore">
                <input id="check1" class="readmore-check" type="checkbox">
                <div class="readmore-content">
                    中身のテキスト
                </div>
                <label class="readmore-label" for="check1"></label>
            </div>
        </div>
    </main>
@charset "UTF-8";
.main {
  margin-top: 10px;
  margin-left: 5px;
}

.main h1 {
  margin-bottom: 50px;
  color: black;
  font-size: 20px;
  font-weight: 600;
}

.main h1 span {
  font-size: 26px;
  font-weight: 700;
}

.main .bg-img {
  background-image: url(img/01.jpg);
  background-size: cover;
  background-position: center;
}

.main .bg-img .bg-color {
  background-color: rgba(255, 255, 255, 0.5);
}

.main .bg-img .bg-color .my {
  padding-left: 25px;
}

.main .bg-img .bg-color .my b {
  font-size: 18px;
}

.main .bg-img .bg-color .my p {
  margin-bottom: 5px;
  margin-top: 30px;
}

.main .bg-img .bg-color .my .name {
  padding: 10px;
  padding-right: 145px;
}

.main .bg-img .bg-color .my .favper {
  padding: 10px;
  padding-right: 145px;
}

.main .bg-img .bg-color .my .error {
  color: red;
  margin-top: 0;
}

.main .bg-img .bg-color .my .question-contents .question p {
  display: inline-block;
  font-size: 18px;
  border-bottom: 1px black solid;
}

.main .bg-img .bg-color .my .question-contents .question input {
  width: 18px;
  height: 18px;
  padding-right: 18px;
  margin-top: 20px;
}

.main .bg-img .bg-color .my .submit {
  width: 200px;
  height: 60px;
  margin-top: 30px;
  margin-bottom: 30px;
  display: inline-block;
  border-radius: 8%;
  /* 角丸       */
  font-size: 15pt;
  /* 文字サイズ */
  text-align: center;
  /* 文字位置   */
  cursor: pointer;
  /* カーソル   */
  padding: 15px 50px;
  /* 余白       */
  background: rgba(153, 0, 0, 0.95);
  /* 背景色     */
  color: #ffffff;
  /* 文字色     */
  line-height: 1em;
  /* 1行の高さ  */
  -webkit-transition: 0.3s;
  transition: 0.3s;
  /* なめらか変化 */
  -webkit-box-shadow: 1px 1px 1px #666666;
          box-shadow: 1px 1px 1px #666666;
  /* 影の設定 */
  border: 2px solid rgba(153, 0, 0, 0.95);
  /* 枠の指定 */
}

.main .bg-img .bg-color .my .submit:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  /* カーソル時の影消去 */
  color: rgba(153, 0, 0, 0.95);
  /* 背景色     */
  background: #ffffff;
  /* 文字色     */
}

.resultmain {
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  /* 続きを読むボタン */
  /*チェック時にボタンを非表示*/
  /*チェック時に高さを自動に戻す*/
  /*チェック時グラデーション等を削除*/
}

.resultmain .bg-color {
  background-color: rgba(255, 255, 255, 0.5);
}

.resultmain .bg-color .result {
  display: inline-block;
  color: red;
  border: red 2px solid;
  font-size: 26px;
  font-weight: 700;
}

.resultmain .readmore {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*以下お好み*/
  /* ボーダーを付ける場合 */
  padding: 10px;
  border: 1px solid #CCC;
}

.resultmain .readmore-content {
  position: relative;
  overflow: hidden;
  /*以下お好み*/
  /*高さの初期値*/
  height: 100px;
}

.resultmain .readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
  height: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(255, 255, 255, 0.8)), to(#fff));
  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%);
}

.resultmain .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: #ff7777;
  border-radius: 10px;
  color: #FFF;
}

.resultmain .readmore-label:before {
  content: '続きを読む';
}

.resultmain .readmore-check {
  display: none;
}

.resultmain .readmore-check:checked ~ .readmore-label {
  position: static;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
  /* display: none; */
}

.resultmain .readmore-check:checked ~ .readmore-label:before {
  content: '閉じる';
}

.resultmain .readmore-check:checked ~ .readmore-content {
  height: auto;
}

.resultmain .readmore-check:checked ~ .readmore-content::before {
  display: none;
}

.resultmain .youtube {
  width: 300px;
  margin: 50px auto 0 auto;
}

.resultmain .youtube iframe {
  display: block;
}

分からないこと

中身のテキストの箇所に続きを見るを作りたいのですが上にチェックボックスが作られてうまく実装できません。良ければ回答のほうお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

普通に動きました。
cssが読み込まれてないだけじゃないでしょうか?
「続きを読む」っていうピンクのボタンは表示されていますか?

cssが読み込まれていたら

.resultmain .readmore-check {
  display: none;
}


なのでチェックボックスは表示されないはずです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる