CSSだけで文章を折りたたむ（続きを読む）その1

今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。

CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありますが、今回は:targetの方を掘り下げてみたいと思います。

パターン1（原型）

普段は非表示にしておいてターゲットになったら表示させる、という最も基本的な形です。

開閉するときに画面がガタつくという弱点があります…(´・ω・`)

デモ

続きを読む▽

ソース

.more1 {
  display: none;
}
.more1:target {
  display: block;
}

<a href="#more1">続きを読む▽</a>
<div class="more1" id="more1">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

パターン2（ガタつき修正版）

パターン1の開閉時のガタつきが残念なので改良してみます。

コンテンツの前にdivをもう一つ挟み、間接セレクタを使ってCSSを適用させます。間のdivには、position: fixedで画面に固定させることにより、無理やりですがきれいに開閉できます。

デモ

続きを読む▽

ソース

.more2{
  display: none;
}
.morefix2:target + .more2{
  display: block;
}
.morefix2{
    position: fixed;
    top: 0;
}

<a href="#more2">続きを読む▽</a>
<div class="morefix2" id="more2"></div>
<div class="more2">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

パターン3（アニメーション付き）

最後はやっぱりアニメーション！ということで、開閉時のアニメーションを付け足してみます。

高さ0からautoにはtransitionが効かないので、max-heightで無理やりアニメーションさせています。これはもう少し賢いやり方があるかもしれない…。

デモ

続きを読む▽

ソース

.more3{
    max-height: 0;
    transform: scaleY(0);
    transform-origin: center top;
    transition: .3s ease;
    transition-property: transform,max-height;
}
.morefix3:target +  .more3{
    max-height: 99999px;
    transform: scaleY(1);
}
.morefix3{
    position: fixed;
    top: 0;
}

<a href="#more3">続きを読む▽</a>
<div class="morefix3" id="more3">&nbsp;</div>
<div class="more3">

ここに内容
ここに内容
ここに内容

<a href="#close">閉じる△</a>
</div>

まとめ

今回は、コンテンツを折りたたむという動作をCSSだけでやってみました。HTMLが煩雑になってしまうのが弱点ですが、JavaScriptが書けない無料ブログサービスなどもあるので、そのような場所では重宝すると思います。

現在は、<details>タグという使い勝手のいいタグがあるので、正しくマークアップ出来るのであればそちらの方も便利です。

HTMLだけでコンテンツを開閉できる<details>を試してみる