peさんのページ

details表示のテスト

重大なネタバレ→ここが表示される←を表示する工夫

重大なネタバレ→ここが表示される←を表示する工夫

WindowsのChrome PC表示以外では表示が崩れる

---

display: inlineの場合

<div>ネタバレの手前→<details style="display: inline;"><summary style="background-color: #EEEEEE; padding-right: 60px;">クリック前のテキスト</summary>
<span style="background-color: #EEEEEE; color: #FF0000;">ここが表示される</span></details>
←ネタバレの後</div>

---

ネタバレの手前→

クリック前のテキスト

ここが表示される

←ネタバレの後

もっと長いネタバレ表記のテスト

長文でdetailsタグを使ってみる。
この文章は通常の<p>タグとの比較用である。

ピカソの本名くらい長い文章を表示することを考えてみる。先ほどのソースコードと同じ形式でピカソの本名をdetailsタグに格納してみると→

クリックで本名を表示

パブロ・ディエゴ・ホセ・フランシスコ・デ・パウラ・ファン・ネポムセノ・シプリアーノ・デ・ラ・サンティシマ・トリニダード・ルイス・ピカソ

←このような表示になる。ネタバレ文だけでなく前後の文章も一行で収まらない文量であるときに、どのように文章が表示され、どれだけ直感的に読むことができるのかを確認する。

<div>の代わりに<li>を使った場合のテスト

• ピカソの本名くらい長い文章を表示することを考えてみる。先ほどのソースコードと同じ形式でピカソの本名をdetailsタグに格納してみると→
  クリックで本名を表示

  パブロ・ディエゴ・ホセ・フランシスコ・デ・パウラ・ファン・ネポムセノ・シプリアーノ・デ・ラ・サンティシマ・トリニダード・ルイス・ピカソ
  ←このような表示になる。ネタバレ文だけでなく前後の文章も一行で収まらない文量であるときに、どのように文章が表示され、どれだけ直感的に読むことができるのかを確認する。
• 以下の要素のテスト