vier

Let's be more curious.

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

丸見え

はじめに

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

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

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


なぜコードを隠すのか

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

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

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を一部修正しました。


まとめ

コードをあえて隠すことで、LighthouseのAccessibilityのポイントを100にすることが出来ました。

Lighthouse


また、記事の見通しを良くすることが出来たかも知れません。

何度もスクロールしないと見れない長文のコードは、最初隠しておいた方がユーザフレンドリーかも知れませんね。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。


それでは今回の記事はこれでおしまい。

Next Post Previous Post
No Comment
Please Enter Comments in Light mode
comment url