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

「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%; background:yellow" | 特記事項
|-
| 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%; background:yellow" | 特記事項
：「!」は列の始まりを表します。最初にあるので「この次が1列目だよ」ということです。列の始まりは通常は「|」を使いますが、「!」を使うと「見出し行の列の始まり」となります。「見出し行」では、それぞれの列の「列幅」を指定できます。最初の「style="width: 16%"」は、「1列目は全体の幅の16%の幅にしろ」という指示です。その後の「|」に続けて、「表示すべき文字列」である「年 度(4月～3月)」を書きます。そして、次の列(2列目)に行きます。列を区切る記号は「見出し行」の場合は「!」一つで良いのですが、同じ行に記述する場合のみ「!!」と2個記述する決まりです。改行して記載するときには「!」一つでOKです。この行では、最後の列の「書式設定」で「幅を指定」した後に「;」に続けて複数の書式設定をしています。「background:yellow」は「地肌を黄色に塗りつぶせ」ということです。なお、各列の幅の「%」の合計が「100%」になるように設定してくださいネ。

|-　：「2行目の始まり」です。

| 1975年(昭和50年) || 29 || 高28 || 　 || 　 || 　  ||
：2行目の「1」～「7」列目までを指定しています。「見出し行」以外の行の列指定は「!」ではなく「|」を使います。列を区切る記号は「|」一つで良いのですが、同じ行に記述する場合のみ「||」と2個記述する決まりです。「|」一つだと、「書式設定」なのか次の列なのか分からなくなりますものね。
改行して記載するときには「|」一つでOKです。

|：ここでは「改行」しているので「8列目が始まるよ」という指示になります。「8列目」は「活動記録」の列です。
通常は「|」のすぐ右側に「8列目」に表示する文字などを記載するのですが、このセル(表の「2行目」の「8列目」)内に入れ子の表を挿入するので、「改行」が必要となります。

{| class="mw-collapsible mw-collapsed" data-expandtext="写真を見る" data-collapsetext="折りたたむ"
：「{|」が頭にくることで、セル内で「入れ子の表が始まるよ」という指示になります。入れ子の表の終わりは「</gallery>」の次の行の「|}」までです。
次の「class="mw-collapsible mw-collapsed" data-expandtext="写真を見る" data-collapsetext="折りたたむ"」ですが、「class=" "」でその「入れ子の表」の種類を指定しています。
「mw-collapsible」は、「MediaWikiの折りたためる表」だよ、ということ。
「MediaWiki」というのは「Wikipedia」を動かしている仕組み(プログラム)の名前です。
「mw-collapsed」は、「その表だけど最初は「折りたたんだ状態」で表示されるよ」ということ。
「data-expandtext="写真を見る" 」は、折りたたんだ表を展開するために表示する文字列は ”写真を見る” ですよ。
「data-collapsetext="折りたたむ"」は、開いた表を折りたたむときに表示する文字列は "折りたたむ" ですよ、ということです。
この文字列は好みで自由に変えることが可能です。
そして、この表では「class="wikitable"」の記述はありません。なので「罫線」も「地肌塗りつぶし」も無い表になります。通常の「表」というイメージではない「表」になります。

|-：入れ子の表の「1行目」の始まりを指定しています。

|関東大会出場（埼玉県熊谷市）：そして「1列目」には「関東大会出場（埼玉県熊谷市）」と表示するようにしています。

|-：新しい行「2行目が始まるよ」という指示です。
「1行目」は1列表示したところで、すぐ「2行目」になってしまうので、この入れ子の表は「1列のみの表」ということになります」
2列目は「無い」のです。

|<gallery widths=450px  heights=300px >
ファイル:高28_ラグビー班-1.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-2.jpg|岡井徹博さん提供
ファイル:高28_ラグビー班-3.jpg|岡井徹博さん提供
</gallery>
：「|」は｢2行目の1列目が始まるよ」という指示です。
「<gallery widths=450px  heights=300px >」は、複数の画像をずらーっと表示するときに使う「決まり文句」です。
「widths」で、表示する画像の「幅」を指定し、「heights」で画像の高さを指定します。単位は「px(ピクセル)」を使います。
次の行から3行は、事前にアップロードした、ファイル名(高28_ラグビー班-1.jpg など)を指定し、その後に「|」に続けて「キャプション(説明用文章)」を書きます。
複数のファイルを表示するには、改行して同様に記述すればOKで、いくつでも並べて表示できます。
最後に「</gallery>」と書いて、複数画像を表示するのは、「ここまでですよ」と指示しています。

|}：「ここで入れ子の表は終わり」と指示しています。
ということで、この入れ子の表は「2行1列」の表になります。
そして、読み込んだときは「1行目のみ表示」されていて「写真を見る」をクリックすることで、折り畳まれていた「2行目」が表示されるのです。
この表では「class="wikitable"」の記述が無いため、ふつうの「表」には見えませんが、最初は「折り畳まれた」表の2行目が「写真を見る」をクリックすることで展開・表示されるのです。

|：ここも改行しているので「|」で「9列目が始まるよ」という指示です。「9列目」は「特記事項」ですね。この例では「特記事項」は「空欄」となっています。

|-：「|-」は元の表の「3行目の始まり」の指示です。

| 2024年(令和 6年) || 78 || 高77 || 　 || 　 || 　 || 　 || 　 ||
：「3行目」の「1」～「9列目」までの列を指示しています。この例では「4列目」以降の列は「空欄」になっています。

|}：「|}」で元の「3行9列」の表の「終わり」を指示しています。

</div>：この「</div>」は最初の行の「<div style="margin:0 0 0 2em">」が「ここで終わり」ということを指示しています。

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

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

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