テキストや表を折りたたむ

テキストの折りたたみ

折りたたみたい範囲を<div></div>タグで囲み、先頭に「class="mw-collapsible"」を追記します。

「折り畳む」ボタンが右端に出てきますので、それについての記述が必要になります。

記述例の「style="margin:0 2em 0 4em"」は字下げ(というよりマージンを確保)するためのものです。

「margin:」の後の4つの数値は、上、右、下、左(時計回りです)のアキ(margin)を指定しています。

「4em」で、左側に「4文字分」の余白を作るということ。

記述例

:【詳細説明】を非表示にするには、右端の「折り畳む」をクリック
:<div class="mw-collapsible" style="margin:0 2em 0 4em">
'''【詳細説明】'''<br>
このテキストは折りたたみ可能です。<br>
このテキストは折りたたみ可能です。<br>
このテキストは折りたたみ可能です。<br>
このテキストは折りたたみ可能です。<br>
このテキストは折りたたみ可能です。<br>
</div>

表示

【詳細説明】を非表示にするには、右端の「折り畳む」をクリック

【詳細説明】
このテキストは折りたたみ可能です。
このテキストは折りたたみ可能です。
このテキストは折りたたみ可能です。
このテキストは折りたたみ可能です。
このテキストは折りたたみ可能です。

最初が折りたたまれた状態にする

これは上記に「mw-collapsed」を追加すれば初期値で折り畳み状態になります。

「style="margin:0 1em 0 3em"」は本文の余白を指定しています。

「margin:」の後の4つの数値は、上、右、下、左(時計回りです)の余白を指定しています。

左側に「3em」(3文字分)の余白を付ける、ということで、3文字分字下げしたようになります。

記述例

:　右端の「展開する」をクリックすると詳細説明が表示されます。
:<div class="mw-collapsible mw-collapsed" style="margin:0 1em 0 3em">
'''【詳細説明】'''<br>
このテキストは最初は折りたたまれています。<br>
このテキストは最初は折りたたまれています。<br>
このテキストは最初は折りたたまれています。<br>
このテキストは最初は折りたたまれています。<br>
このテキストは最初は折りたたまれています。<br>
</div>

表示

　右端の「展開する」をクリックすると詳細説明が表示されます。

【詳細説明】
このテキストは最初は折りたたまれています。
このテキストは最初は折りたたまれています。
このテキストは最初は折りたたまれています。
このテキストは最初は折りたたまれています。
このテキストは最初は折りたたまれています。

表の活用

表形式にすれば、「展開する」はすぐそばに表示される。

記述例

{| class="mw-collapsible mw-collapsed wikitable"
! ヘッダ部分は表示されている
|-
| このコンテンツは初回読み込み<br>のときに折り畳まれています。
|}

表示

ヘッダ部分は表示されている
このコンテンツは初回読み込み のときに折り畳まれています。

記述例

{| class="mw-collapsible mw-collapsed"
! ヘッダ可視化を保持する。ヘッダーはちゃんと見えている。そして、「展開する」もすぐそばにある。
|-
| このコンテンツは初回読込のときに隠蔽されています。このコンテンツは初回読込のときに隠蔽されています。
|-
| このコンテンツは初回読込のときに隠蔽されています。このコンテンツは初回読込のときに隠蔽されています。
|}

この↑ように書けば「右端」に飛ばず、すぐ近くに出る。

表示

ヘッダ可視化を保持する。ヘッダーはちゃんと見えている。そして、「展開する」もすぐそばにある。
このコンテンツは初回読込のときに隠蔽されています。このコンテンツは初回読込のときに隠蔽されています。
このコンテンツは初回読込のときに隠蔽されています。このコンテンツは初回読込のときに隠蔽されています。

「独自の展開ボタン」

　さらに以下のように書けば「独自の展開ボタン」を作ることができる

表示される名称を「展開する・折り畳む」から変更できる。

以下の例では「表示・非表示」にしている。

記述例

{| class="mw-collapsible" data-expandtext="表示" data-collapsetext="非表示"
!マイヘッダ
|-
| ABCDEFGABCDEFG
|-
| HIJKLMNOPHIJKLMNOP
|}

表示

マイヘッダ
ABCDEFGABCDEFG
HIJKLMNOPHIJKLMNOP

種々の例

以下の記述例の中で、「toccolours 」と書くと、表のようになって、地肌が灰色になる。

「width:400px;」は、幅を規定している。

「overflow:auto;」は、なんでしょうね。→削除してみたけど変化無しです。

「margin:0 1em 0 3em;」は、今まで出てきました。上右下左(時計回り)の余白設定。

記述例

<div class="toccolours mw-collapsible" style="width:400px; overflow:auto; margin:0 1em 0 3em;">
<div style="font-weight:bold;line-height:1.6;">タイトル行は表示</div>
<div class="mw-collapsible-content">
This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible.<br>
</div></div>

表示

タイトル行は表示

This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible.

以下の記述例では上記の例に「mw-collapsed」が追記されているため、最初は閉じている。

そして、<div></div>の中にさらに<div></div>を記述して、「class="mw-collapsible-content"」としている。

これで、内側の<div></div>に挟まれた文章が、初期表示では「非表示」となっている。

記述例

<div class="toccolours mw-collapsible mw-collapsed" style="width:650px; overflow:auto; margin:0 1em 0 3em;">
:この行より下の表示は「非表示」となっている。
<div class="mw-collapsible-content">This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible.
</div></div>

表示

この行より下の表示は「非表示」となっている。

This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible. This text is collapsible.

トグルボタンで制御

以下の記述例では、「展開する・折り畳む」の代わりに「表を表示／隠す」というトグルボタンにしている。

このようなトグルボタンを配置するには、要素(この場合はテーブル)に"id"を割り当てる必要がある。

この"id"は接頭辞 "mw-customcollapsible-" で始まる必要があり、その要素ごとにユニークな文字列(この例では"myTable")を指定する。

今回は、下のテーブルを折りたたみ可能にするため、テーブル要素に id="mw-customcollapsible-myTable" を指定している。

次に、クラス "mw-customtoggle-myTable" でボタンを追加する(これは "class" であり上記の"id"ではない)。

そしてボタンの形状や動作をCSSから反映するため、"koyama-button-g"クラスを選択している。

"koyama-button-g"クラスの形状や動作については、別途「Common.css」で規定している(「Common.css」は管理者のみ編集可能)。

記述例

<span class="mw-customtoggle-myTable koyama-button-g" style="text-align:center; padding:0 7px 0 7px;">表を表示／隠す</span>
{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!マイ || ヘッダ
|-
| A || B
|-
| C || D
|}

表示

表を表示／隠す

マイ	ヘッダ
A	B
C	D

トグルボタン制御で「表」を使わない例

以下は「トグルボタンで制御」と同じ考え方で記述している。

まず、<div>要素に"id"を割り当てる。

このidの中身は接頭辞 "mw-customcollapsible-" で始まる必要があり、その要素に対してユニークな文字列(この例では"myDivision")を追記。

実際の記述は、id="mw-customcollapsible-myDivision" となる。

次に、<span>要素にclass="mw-customtoggle-myDivision" を記述し、折りたたみ機能を持たせる文字列(この例では"表示/非表示切り替え")を挟む。

この場合は "class" であり<div>要素で記述した"id"ではない)。

「表示/非表示切り替え」には"koyama-button-c"クラスを、「追加の表示/非表示切り替え」には"koyama-button-r"クラスを選択してボタンの色と動作を決めている。

これらのボタンクラスは、管理者が「CSS」で設定している。

現在、5色のボタンが選択可能となっています。

設定内容の詳細は「管理者用ヘルプ」「ボタンのCSS指定」を参照ください。

記述例

<span class="mw-customtoggle-myDivision koyama-button-c" style="padding:0 7px 0 7px; text-align:center;">表示/非表示切り替え</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">最初は非表示の文字列_その1</div>
<span class="mw-customtoggle-myDivision koyama-button-r" style="padding:0 7px 0 7px; text-align:center;">追加の表示/非表示切り替え</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">最初は非表示の文字列_その2</div>

表示

表示/非表示切り替え

最初は非表示の文字列_その1

追加の表示/非表示切り替え

最初は非表示の文字列_その2

この2色は落ち着いた色使いでなかなかですね。

---

質問・ご意見はこちら

お問い合わせ・ご意見のメールはこちら

上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。

　【担当者メールアドレス】wiki_admin@koyamadai100.jp

---

　 ←「9. 脚注を追加する。()等が不要で文章がスッキリする。」　　　 ←「10. 表とタブ、そして段組方法について」　　　 →「12. 動画・音声を再生する」　　　 →「13. コメント(編集時のみ表示)」

　 ↑ページトップへ　　　　 ↑↑「編集者のためのヘルプ」に戻る　　　 ↑↑「メインページ」トップに戻る

---

脚注：　

･

2022年3月20日：直近編集者：Adminkoyama100
TimeStamp：20220320205918