2024/04/20 2021/12/19

クリックするとコードが丸見えになる方法

はじめに

この記事タイトルを見て、コートの中が丸見えになる？🙀とエッチなことを想像した方は、過労で頭が回ってないのかも知れません。

休暇を取って疲れを取ることをおススメします。

というのは冗談で、ブログのカスタマイズを解説される方は、記事にHTML/CSS/JavaScript等のコードを表示されている方が多いと思います。

なぜコードを隠すのか

管理人も拙いコードを表示した記事をいくつか書いてますが、ある事からコードを隠す方法に変えました。

それは、Lighthouse 9.0.0 である記事の品質をチェックしたら、Accessibilityのポイントが？になっていたのです。

どこでエラーが発生しているか調べると、コードをシンタックスハイライト表示させている部分でした。

せっかくコードの可読性を上げるために色分けしているのに、前景色と背景色のコントラスト比が基準を満たしてないと指摘しているのです。

なんじゃそりゃ？と思ったのですが、コードを読みたいと思った人だけがクリックしてコードを見る方法もありかなと、前向きに考えました。

隠されたらどうしても見たくなるのが人間の心理かも知れません。

クリックしてコードを表示する方法

方法をネットで調べると、HTML5では<details>タグと<summary>タグを使うと簡単にアコーディオンを作れることが分かりました。

クリックしてコードを表示するコードを見たい方は、クリックして表示して下さい。😛

クリックしてコードを表示するCSS

コード

/* クリックしてコードを表示　*/
summary {
  position: relative;
  padding: 0.4rem;/* アイコンの余白を開ける */
  cursor: pointer;/* カーソルをポインターに設定 */
  font-weight: bold;
  background-color: #cdcdcd42;
  transition: 0.3s;
  text-align: center;
  margin: 2rem 0;
  border-radius: 100vh;
  border: solid 1px;
}
summary:hover {
  background-color: #00baff !important;
}

/* オープン・クローズ時のスタイル */
details[open] summary {
  background-color: #fbfdff;
  border: none;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}
details[open] .summary-title:after {
  content: 'を隠す [Click again]';
}
details .summary-title:after {
  content: 'を表示する [Click here]';
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 1.0s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

クリックしてコードを表示するHTML

コード

<details>
    <summary class="summary-title">タイトルを記入</summary>
    <div class="details-content">
    <!-- ココに折りたたんで隠しておくコードを記入 -->
    <!-- ココに折りたたんで隠しておくコードを記入 -->
    <!-- ココに折りたたんで隠しておくコードを記入 -->
    </div>
</details>

なお、最初から表示した状態する場合は<details open>に設定して下さい。

2022年1月2日　追記

<summy>タグにclass="summary-title"を追加し、CSSを一部修正しました。

2022年1月23日　追記

Safariで疑似要素のbeforeが上手く動作してなかったので、CSSを一部修正しました。