ブログデザイン備忘録 ~detailsタグによる展開・折り畳み

1. 展開・折り畳み
2. 文章以外の展開・折り畳み
3. details, summaryのデザイン
4. まとめ

1. 展開・折り畳み

前回は入力フォーム(ラベル、チェックボックス、ボタン)とjavascriptを用いて呼び出す関数を定義することで展開・折り畳みを実現したが、HTML5から加わったdetailsを利用すると簡単なコードで展開・折り畳み機能を実現できる。

atatat.hatenablog.com

以下コードを示すと

 <details>
 <summary >ここから展開</summary>
 <p>ここに文字を隠す</p>
 </details>

ここから展開

ここに文字を隠す

<details>～</details>タグを利用し、最初に表示しておく文字は<summary>～</summary>に表示しておく。クリックするごとに３角マークの向きが変わり文字等が展開される。

対応ブラウザについてはEdgeが今まで未対応だったが、今年リリースされた最新版のものから対応するようになった。

www.microsoft.com

ただしIEや最新版でないEdgeは非対応で、折り畳まれずそのまま表示される。

https://www.web-sasa.com/info/article/16

IEや旧版Edge利用者まで漏れなく対応しようとすると、前回挙げたように入力フォーム+javascriptとなる。

2. 文章以外の展開・折り畳み

　文章だけでなく、はてな記法と組み合わせて、表、Tex数式、コードも展開・折り畳みができる。

表を隠す場合:

<details>
<summary>表を隠す</summary>
 <div>

|a|b|c|
|:-:|:-:|:-:|
|1|2|3|  

</div>　
</details>

表を隠す

a	b	c
1	2	3

Tex数式を隠す場合:

 <details>
 <summary>数式を隠す</summary>
 <div>
[tex: \dfrac{x^{2}}{2}]    
</div>　
</details>

数式を隠す

$\dfrac{x^{2}}{2}$

コードを隠す場合:

 <details>
      <summary>コードを隠す</summary>
 <div>

 ```html
 <details>
 <summary >ここから展開</summary>
 <p>ここに文字を隠す</p>
 </details>
 ``` 
</div>　
</details>

コードを隠す

 <details>
 <summary >ここから展開</summary>
 <p>ここに文字を隠す</p>
 </details>

3. details, summaryのデザイン

detailsやsummaryタグでstyleを指定することで、デザインを変更することができる。例えば

 <details>
 <summary style="width:300px;" >ここから展開</summary>
 <p>ここに文字を隠す</p>
 </details>

ここから展開

ここに文字を隠す

背景色やボックスの影、ボーダーなどボタンのデザインと同様にstyleに記述することでデザインすることができる。

 <details>
 <summary style="padding: 2px 6px;width: 15em;background-color: #ddd;border: none;box-shadow: 3px 3px 4px black;">ここから展開</summary>
 <p style="border-radius: 0 0 10px 10px;width: 15em;background-color: #ddd;padding: 2px 6px;margin: 0;box-shadow: 3px 3px 4px black;">ここに文字を隠す</p>
 </details>