純粋な CSS3 でモバイルの拡大と縮小の効果を実装するためのサンプル コード

<セクションクラス="ブロック">
    <入力タイプ="チェックボックス">
    <div class="case-block">
      <div>展開</div>
      <div>折りたたむ</div>
    </div>
    <div class="詳細">
      <div>ジジジ、ジジジ、ムーランが窓のそばを歩きます。織機の音は聞こえず、あなたのため息だけが聞こえます。 （魏文通：魏）何を考えているのか、何を思い出しているのかを尋ねます。考えることも、思い出すことも何もない。昨晩、軍の命令書を見ました。カーンは兵士を募集していました。軍事関係の書籍が 12 巻あり、すべての巻に私の名前が載っていました。私の父には長男がいませんし、ムーランには兄がいません。私は馬と鞍を買って、これからは父のために戦うつもりです。 （聞いただけ：のみ）
      <div>東の市場で立派な馬を買い、西の市場で鞍を買い、南の市場で手綱を買い、北の市場で長い鞭を買います。私は朝に両親のもとを離れ、夕方まで黄河のそばにいました。両親が私を呼ぶ声は聞こえず、黄河の流れる音だけが聞こえました。私は朝に黄河を出発し、夕方に黒山に到着しました。両親が私を呼ぶ声は聞こえず、燕山から来た胡騎兵の叫び声だけが聞こえました。 </div>
      <div>飛ぶように山や丘を越えて、戦場まで何千マイルも旅します。金色の監視塔に冷たい空気が広がり、冷たい光が鉄の鎧を照らします。将軍は百戦して死に、戦士は十年後に帰還した。 </div>
      <div>帰国後、明堂に座っている皇帝に会った。功績により12名の昇進と数十万の報酬。カーンは彼女に何が欲しいのか尋ねました。ムーランは牧師にはなりたくなかったのですが、息子を故郷に送り届けるために千マイルも馬で旅をしたいと思っていました。 （別のバージョン：私は明るいラクダの千マイルの足を借りたい）</div>
      <div>両親は娘が来ると聞いて、助けるために町へ出かけました。姉は妹が来ると聞いて、化粧の準備をしました。弟は姉が来ると聞いて、豚や羊を殺すためにナイフを研ぎました。東の亭の扉を開け、西の亭のベッドに座り、戦時中のローブを脱いで古い服を着ます。窓際で髪をとかしながら、鏡の前で化粧をしている。彼女が仲間に会いに出かけると、彼らは皆驚いてこう言いました。「私たちは12年間一緒にいましたが、彼らはムーランが女の子だとは知りませんでした。」 (贴通：贴; 惊忙は惶とも書く; 惶火伴通： 伙)</div>
     <div>オスのウサギの足は混乱していて、メスのウサギの目はぼやけています。2匹のウサギが並んで歩いていますが、どちらがオスでどちらがメスかどうやって見分ければいいのでしょうか? </div>
    </div>
  </セクション>

@charset "UTF-8";

.タイトルブロック{
    高さ: 26px;
    テキスト配置: 中央;
}

。ブロック {
    ディスプレイ: -webkit-box;
    ディスプレイ: -ms-flexbox;
    ディスプレイ: フレックス;
    -webkit-box-orient: 垂直;
    -webkit-box-direction: 逆方向;
    -ms-flex-flow:列反転ナウラップ;
    flex-flow: 列反転 nowrap;
    幅: 360ピクセル;
    マージン: 0 自動;
    フォントサイズ: 14px;
    色: #4C4C4C;
    行の高さ: 28px;
    境界線: 1px 実線 #999;
    パディング: 10px;
}

.ブロック > .詳細 {
    最大高さ: 163px;
    下マージン: 10px;
    オーバーフロー: 非表示;
}

.block > .case-block {
    ディスプレイ: -webkit-box;
    ディスプレイ: -ms-flexbox;
    ディスプレイ: フレックス;
    -webkit-box-pack: 中央;
    -ms-flex-pack: 中央;
    コンテンツの中央揃え: 中央;
    -webkit-box-align: 中央;
    -ms-flex-align: 中央;
    アイテムの位置を中央揃えにします。
    幅: 120ピクセル;
    高さ: 24px;
    マージン: 0 自動 0;
    色: #0e0e0e;
    背景: #fff;
    境界線: 1px 実線 #0e0e0e;
    境界線の半径: 5px;
}

.block > .case-block div:nth-of-type(1) {
    表示: ブロック;
}

.block > .case-block div:nth-of-type(2) {
    表示: なし;
}

.block > [type="チェックボックス"] {
    位置: 相対的;
    表示: ブロック;
    幅: 120ピクセル;
    高さ: 24px;
    マージン: -24px 自動 0;
    zインデックス: 1000;
    不透明度: 0;
}

.block > [type="checkbox"]:hover + .case-block {
    背景色: #f5f5f5;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {
    表示: なし;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {
    表示: ブロック;
}

.block > [type="checkbox"]:checked + .case-block + .detail {
    最大高さ: 継承;
}