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

「Tab」機能を使った折りたたみ

これは「Tab」機能が搭載されていないと機能しませんので注意(このWikiサイトでは「搭載済み」です)。

「Tab」機能の搭載は「管理者」が行います。→「管理者用ヘルプ」の「Tab機能を使う」を参照」

「編集者用コメント」の「表示/非表示」に使うとスマートです。

【記述例】

<div style="margin:0 0 0 3em">
<tab openname="編集者コメントを表示" closename="編集者コメントを非表示" collapsed block style="max-width:96%;">
下に表示している「編集後記」を読むと驚くのですが、この「会報」は製本以外は、すべてDTPで作成されているということです。
「全ページカラー印刷でさぞお金がかかったことだろう」と思っていましたが、「カラーレーザープリンターでDTP」とは！
今から20年近くも前に、喜寿にならんとされていた大先輩が「DTP」ですよ！
<br>
ほんとうにすごい、凄すぎます。
喜寿は遙か先のわれわれ、大先輩に負けてはいられません。もっともっとがんばらなければ。
</div>

2行目の最後にある「"max-width:96%;"」ですが、表示する文の1行の文字数が長過ぎるテキストの場合は、86%くらいにしておくと、レイアウト上、見やすくなります。

【表示】

編集者コメントを表示編集者コメントを非表示

下に表示している「編集後記」を読むと驚くのですが、この「会報」は製本以外は、すべてDTPで作成されているということです。
「全ページカラー印刷でさぞお金がかかったことだろう」と思っていましたが、「カラーレーザープリンターでDTP」とは！
今から20年近くも前に、喜寿にならんとされていた大先輩が「DTP」ですよ！

ほんとうにすごい、凄すぎます。
喜寿は遙か先のわれわれ、大先輩に負けてはいられません。もっともっとがんばらなければ。

テキストの折りたたみ

折りたたみたい範囲を<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文字分字下げしたようになります。

「em」は「文字数」ですが、「px」を使うと「ピクセル単位」で余白調整ができます。

より細かいマージン調整をしたい場合は「px」を使ってみましょう。→「px」を使ったマージン微調整は →こちら

記述例

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

表示

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

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

表を使った折りたたみ

表形式にすれば、「展開する」はすぐそばに表示されるので、操作性が良くなります。

記述例

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

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

表示例

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

記述例

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

表示例

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

この表では、記述の1行目に「wikitable」が追記されているので、表の枠線が表示され、地の部分は「網かけ」されている。

「独自名称の展開ボタン」

以下のように書けば、表示される名称を「展開する・折り畳む」から「独自の名前」に変更できる。

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

記述例

{| class="mw-collapsible mw-collapsed" data-expandtext="写真を表示" data-collapsetext="非表示にする"
!マイヘッダ　
|-
| [[ファイル:Example.jpg|border|250px|写真サンプル]]
|-
| この写真についてのコメントです。
|}

表示例

マイヘッダ
この写真についてのコメントです。

表のセル毎に「展開/折りたたみ」機能を盛り込む

表の一つのセル内に「展開/折りたたみ」機能を盛り込むと、一覧表で、そのセル内に写真などを入れ込んでおいて、スマートに表示することができます。

記述例

<div style="margin:0 0 0 2em">
{| class="wikitable" style="text-align:center; width: 85%;"
|-
! style="width: 16%;" | 年 度(4月～3月) !! style="width: 3%;" | 周年 !! style="width: 5%;" | 卒業回 !! style="width: 5%" | 班 長 !! style="width: 5%" | 顧 問 !! style="width: 18%" | 合　宿 !! style="width: 11%" | OB・OG会 !! style="width: 24%" | 活動記録 !! style="width: 13%" | 特記事項
|-
| 1975年(昭和50年) || 29 || 高28 || 　 || 　 || 　  ||
|
{| class="mw-collapsible mw-collapsed" data-expandtext="写真を見る" data-collapsetext="折りたたむ"
|関東大会出場（埼玉県熊谷市）
|-
|<gallery widths=450px  heights=300px >
ファイル:高28_ラグビー班-1.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-2.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-3.jpg|岡井徹博さん提供
</gallery>
|}
| 　 
|-
| 2024年(令和 6年) || 78 || 高77 || 　 || 　 || 　 || 　 || 　 ||
|-
|}
</div>

表示例

年 度(4月～3月)	周年	卒業回	班 長	顧 問	合　宿	OB・OG会	活動記録	特記事項
1975年(昭和50年)	29	高28					関東大会出場（埼玉県熊谷市） 岡井徹博さん提供 岡井徹博さん提供 岡井徹博さん提供
2024年(令和 6年)	78	高77

これは「入れ子の表」機能を使って、入れ子になった表を「展開/折りたたみ」することで、「一つのセル」が「展開/折りたたみ」できているように見えます。

上記「記述例」について「1行ずつ」説明します。「：」の後が説明です。

<div style="margin:0 0 0 2em">：<div>から最後の行の</div>までの範囲について「style="……"」で書式を設定します。「margin」は「余白」の設定で、「:」の後の4つの数値は上・右・下・左の余白です。「2em」は「2文字分の余白を取る」という意味です。そこで、表の先頭が「2文字分」字下げされました。
{| class="wikitable" style="text-align:center; width: 85%;"：「{|」は表の始まりを表します。下から2行目にある「|}」が表の終わりです。「表」は「{|」で始まり、「|}」で終わります。「class="……"」は表の種類を表し、「wikitable」で、表の罫線が表示され、地肌部に網掛けがされます(これが無いと「罫線なし」「真っ白」の表となって、表とは思えない外観となります)。次の「style="……"」で表全体の書式を設定します。「text-align」は「文字の整列位置」で、「:」の後の「center」で、文字が「セル内で中央そろえ」となります。複数の書式を設定する場合は「;」で区切ります。次の「width」はブラウザーの全体の幅に対して表の全体の幅が「何%」になるかを設定しています。
|-：「|-」は、新しい行「1行目が始まるよ」という指示記号です。
! style="width: 16%;" | 年 度(4月～3月) !! style="width: 3%;" | 周年 !! style="width: 5%;" | 卒業回 !! style="width: 5%;" | 班 長 !! style="width: 5%;" | 顧 問 !! style="width: 18%;" | 合　宿 !! style="width: 11%;" | OB・OG会 !! style="width: 24%;" | 活動記録 !! style="width: 13%;" | 特記事項：「!」は列の始まりを表します。最初にあるので「この次が1列目だよ」ということです。列の始まりは通常は「|」を使いますが、「!」を使うと「見出し行の列の始まり」となります。「見出し行」では、それぞれの列の「列幅」を指定できます。最初の「style="width: 16%;"」は、
|-
| 1975年(昭和50年) || 29 || 高28 || 　 || 　 || 　  ||
|
{| class="mw-collapsible mw-collapsed" data-expandtext="写真を見る" data-collapsetext="折りたたむ"
|関東大会出場（埼玉県熊谷市）
|-
|<gallery widths=450px  heights=300px >
ファイル:高28_ラグビー班-1.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-2.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-3.jpg|岡井徹博さん提供
</gallery>
|}
| 　 
|-
| 2024年(令和 6年) || 78 || 高77 || 　 || 　 || 　 || 　 || 　 ||
|-
|}
</div>

上記5行の記述の表示例

伊豆 松崎

最初は1行しか表示されていませんが、「終了時の写真を見る」をクリックすると、畳まれていた2行目が表示されるわけです。

入れ子の表の作成方法の基本については →こちらを参照してください。

表は使わないが、表のような例

以下の記述例の中で、「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年7月3日：直近編集者：Adminkoyama100
TimeStamp：20220703234343