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

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

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

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

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

【記述例】

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

表示

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

記述例

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

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

表示

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

「独自の展開ボタン」

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

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

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

記述例

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

表示

マイヘッダ
ABCDEFGABCDEFG
HIJKLMNOPHIJKLMNOP

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

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

記述例

<div style="margin:0 1em 0 2em">

{| class="wikitable" style="text-align:center; width: 85%;"

|-

! style="width: 12%;" | 年 度(4月～3月) !! style="width: 3%;" | 周年 !! style="width: 7%;" |卒業回<ref>水泳班の班長は2年生のため、卒業回とは異なる(班長は卒業回＋1)。</ref>!! style="width: 9%;" | 班 長 !! style="width: 9%;" | 顧 問 !! style="width: 22%;" | 合　宿 !! style="width: 13%;" | OB・OG会 !! style="width: 15%;" | 活動記録 !! style="width: 10%;" | 特記事項

|-

| 1964年(昭和39年) || 18 || 高17 || 布施田道彦 || 斎藤(昉) || 　 || 　 || 　 || 　

|-

| 1965年(昭和40年) || 19 || 高18 || 沢田雅美 || 斎藤(昉) ||

{| class="mw-collapsible mw-collapsed" data-expandtext="終了時の写真を見る" data-collapsetext="折りたたむ"

|伊豆 松崎　

|-

|[[ファイル:650811_水泳班_松崎合宿.jpg|450px|終了時集合写真]]

|}

|| 　 || 　 || 　

|-

| 1966年(昭和41年) || 20 || 高19 || 牧　有二 || 多胡 ||

{| class="mw-collapsible mw-collapsed" data-expandtext="写真を見る" data-collapsetext="折りたたむ"

|日立市泉が森:荏原バラネオン

|-

|[[ファイル:660818_005_荏原バラネオン_合宿.jpg|450px|集合写真]]

|}

|| 　 || 　 || 　

|-

|}

</div>

表示例

年 度(4月～3月)	周年	卒業回	班 長	顧 問	合　宿	OB・OG会	活動記録	特記事項
1964年(昭和39年)	18	高17	布施田道彦	斎藤(昉)
1965年(昭和40年)	19	高18	沢田雅美	斎藤(昉)	伊豆 松崎
1966年(昭和41年)	20	高19	牧　有二	多胡	日立市泉が森:荏原バラネオン

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

上の「記述例」の中の以下が「一つのセル」のところに「入れ子の表(2行1列)」が挿入されています。

{| class="mw-collapsible mw-collapsed" data-expandtext="終了時の写真を見る" data-collapsetext="折りたたむ"

|伊豆 松崎　

|-

|[[ファイル:650811_水泳班_松崎合宿.jpg|450px|終了時集合写真]]

|}

最初は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年5月23日：直近編集者：Adminkoyama100
TimeStamp：20220523212209