ぎみっく@gimmickgangさんのページユーザー

3.7千文字の記事
掲示板をみる(716)
  • twitter
  • facebook
  • はてな
  • LINE
  • ほめる(123)
  •  
  •  
  •  
  •  
  • その他

<details>,<summary>タグまとめ

ニコニコ大百科にて独自に定されているものは
スマホ版にて折りみ表示の▶がreset.cssにてlist-style: none;の適用を受けて表示されなくなるのを回避するためにlist-style: revert;で巻き戻してるだけ。

お知らせブロマガにあるとおり、基本的に閲覧するブラウザ次第。

最初から開くopen属性は使用不可。エディタ内のプレビューで開くとopen属性が勝手に付与される為エラーが出る。

開閉作動領域と背景色の関係性

以下は背景色の範囲の較例(Chrome)。summaryにはh4見出しを使用。

折りたたんでも表示される部分summaryに白背景

折りたたまれている部分details内div#eee背景

detailsに白背景

折りたたまれている部分details内div#eee背景

上下で較すると下の方が背景部分が下に伸びているが、これは内包されているh4見出しのmargin-bottom部分にも背景色が適用されているため。
開閉作動領域は上の背景部分と同一サイズなので紛らわしい。
スマホ版では見出しのmargin-bottomが30pxなので更に背景領域は拡大する。

上のソース背景定はなし。タグ一覧の>>358を相対フォントサイズ対応させたもの

<details>
  <summary>
    <h4 style="margin-top: -1.14em; background: none; border: none;">折りたたんでも表示される部分</h4>
  </summary>

    折りたたまれている部分
</details>

summaryタグへの上下paddingの付与

ブロマガでは
"折りたたんだ状態の高さのみを調整したい場合は「line-height」を使用してください。"
となっているが、summaryタグに上下padding定して開閉作動領域を広げた方がスマート。
上のh4見出しの例のようにmargin特性として要素を突き抜けるし、領域拡大するわけではないので適切ではない。

折りたたんでも表示される部分summaryに背景 padding: 1em 0;
折りたたまれている部分details内div#eee背景
</br>
</br>
</br>
折りたたまれている部分details内div#eee背景

上のソース背景定はなし。paddingは上下に1em定。

<details>
  <summary style="padding: 1em 0;">
    >折りたたんでも表示される部分
  </summary>

    折りたたまれている部分
</details>

下のようにsummary style="padding: 1.5em;"とすると▶マーカーの位置も含めて左右のpaddingを付与することができる。

折りたたんでも表示される部分summaryに背景 padding: 1.5em;
折りたたまれている部分details内div#eee背景
</br>
</br>
</br>
折りたたまれている部分details内div#eee背景

見出しタグを使い自動リンクを切って、paddingを付与して開閉動作領域を拡げる

上記の合わせ技。

summaryに padding: 1em;
h4見出し使用 自動リンクも付かなく開閉動作の領域も拡がる

折りたたまれている部分details内div#eee背景</br>
</br>
折りたたまれている部分details内div#eee背景
<details>
  <summary style="padding: 1em;">
    <h4 style="margin: -1.14em 0 0; background: none; border: none; padding-left: 1em;">折りたたんでも表示される部分</h4>
  </summary>

    折りたたまれている部分
</details>

文中リンクを偽装した折り畳み表示

■文章の途中でのリンクに偽装した詳細表示。太字部分が折りみ部分。

文章の途中での自動リンクに偽装した詳細表示
折りたたんでも表示される部分 折りたたまれている部分
文章の途中での自動リンクに偽装した詳細表示

■該当箇所に自動リンクがあるので開けない例。

文章の途中での自動リンクに偽装した詳細表示
ニコニコ大百科 折りたたまれている部分
文章の途中での自動リンクに偽装した詳細表示

■該当箇所に自動リンクがあるので開けない例。下線部にdetails内へのジャンプリンク設置

文章の途中での自動リンクに偽装した詳細表示
ニコニコ大百科 折りたたまれている部分
文章の途中での自動リンクに偽装した詳細表示

■該当箇所に自動リンクがあるので開けない例。下線部にdetails内へのジャンプリンク設置。details内が複数行の場合。末尾行にアンカー

文章の途中での自動リンクに偽装した詳細表示
ニコニコ大百科 折りたたまれている部分
</br>
折りたたまれている部分
</br>
折りたたまれている部分
文章の途中での自動リンクに偽装した詳細表示

■summaryにdetails内へのジャンプリンク設置した例。

文章の途中での自動リンクに偽装した詳細表示
コニコ大百 折りたたまれている部分
文章の途中での自動リンクに偽装した詳細表示

・ヘッダー部分回避のためのページジャンプジャンプリンクを複数回押さないと動作しなかったり、動作自体しない環境もあるかも。

FireFoxではsummary部分の選択からじゃないと開閉動作をしないので開閉不可能

文中での折り畳み表示活用の模索

◆上の見出しでも使ってる文中の…という部分をもっと有用な使い方できないか?という考察

文章の途中で詳細表示を使ったネタバレ部分の回避法
折りたたんでも表示される部分 折りたたまれている部分
文章の途中で詳細表示を使ったネタバレ部分の回避法
<div style="margin: 1em;">文章の途中で詳細表示を使ったネタバレ部分の回避法
  <details style="display: inline;">
    <summary style="font-weight: bold;">折りたたんでも表示される部分</summary>
    折りたたまれている部分
  </details>

  文章の途中で詳細表示を使ったネタバレ部分の回避法
</div>

自動リンクが動作してしまうので文章内の自動リンク回避する方法とpタグ内では扱えないのでpをdivなどで代用しないといけない

現在はpタグの外に弾かれてしまう
<details style="display: inline;"><summary>~</summary>~</details>
が限定的にpタグ内で記述できるようになればネタバレ回避』という記事名の単語記事を作り自動リンクしない設定にすることで、文中のネタバレ回避の文字反転のような箇所をこの手法で置き換えることができる。

エディタとの絡みの挙動が解決されればpタグ内での限定的な使い方について要望出してもいいかもしれない。

その他

<summary>タグは通常のインライン要素とは違う(HTML5にはブロック要素インライン要素の概念がないため)ものの、widthが100%のinline-block要素のような形になっているので、上の例のように上下paddingで上下領域の拡大ができるが、
▶マーカー部分も含めてwidthが100%になるのでdivや見出しタグなどのブロック要素を入れると下のように上下に表示される。

折りたたんでも表示される部分summaryに背景 summary内div背景文字
折りたたまれている部分details内div#eee背景
</br>
</br>
</br>
折りたたまれている部分details内div#eee背景

※本来は記述コンテンツか見出しコンテンツのみ入れられるのでフローコンテンツのdivを入れるのはNG

本当はダメだけど、こんなこともできる

折りたたんでも表示される部分summaryに背景 padding: 1.5em 1.5em 0; margin-bottom: -18em;
iframeはsummary内に記述 details内の子要素div#f2f2f2背景 height: 20em;

注意点まとめ

上記の通り、ブラウザ間でいくつかの差異が存在する

このようにブラウザによって差異が出やすいので注意が必要である。

この記事を編集する

掲示板

おすすめトレンド

急上昇ワード改

最終更新:2022/09/28(水) 00:00

ほめられた記事

最終更新:2022/09/28(水) 00:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP