セル結合
表のデザインで、一部のセルを繋いで1つのセルにするレイアウトを「セル結合」と言います。 下がその例です。
良く見かけるレイアウトですが、ウェブ上の「table要素」もこのデザインが可能です。 Excelのセル結合は、結合したセルの左端のデータが残り、他のセルのデータは無くなります。 しかし「table要素」の場合は、他のセルを「非表示」で隠す事が出来るので、セル結合のやり直しでセルに書き込んだデータを復活できます。
開発の経過
「セル結合」は欲しかった機能ですが、予想通り難航。「colspan」「rowspan」の属性を結合の開始セル（左端・上端）に指定すればこのデザインが得られますが、そのままでは「セルのはみ出し」が生じます。
下図は、「セルA」「セルB」を結合するために「セルA」に「colspan="2"」の属性を指定した様子です。
この「table要素」の属性指定は、「セル何個分の幅を占める」という指定でしかないのです。 従って、セル結合を実用的に実現するには、上の例では結合後に「セルB」を削除する必要があります。
最初、「セルB」の幅を「0」にするとか、「position: absolute」を指定するとか弄っている内に、「display: none」で全てが上手く収まる事が判りました。 ネット上の「table要素」の記事は旧い情報が多く、「はみ出し」の処理は殆ど「td要素」を削除していますが、「display: none」はとても有効な処理だと思います。
セル結合時の「はみ出し」の処理
セル結合で、結合開始セルで「colspan」「rowspan」を指定した場合、結合される他のセルは「display: none」を指定して「非表示」にするのが、単純で有効なレイアウト方法です。
一般の「table要素」の説明は、「colspan」を指定した「td要素」の後方の「td要素」を HTML上で「削除」して、結合処理が行われた「tr要素」（行）の幅のつじつま合わせをします。 しかし、プログラム上で「td要素」を削除したり、結合のやりなおしでもう一度「td要素」を生成するのは、大変に手間です。 また「td要素」を削除すると書き込んだ内容は消失します。
「td要素」の削除の代わりに「display: none」を使うと、「はみ出し処理」の問題は一気に解決しました。
セル結合と結合のやり直し
セル結合は、簡単な処理で実現できました。 結合の選択範囲を受け取り、その左端の「結合開始セル」に選択範囲数「n」を指定する「colspan="n"」の属性を指定し、残りの「被結合セル」に「style="display: none"」の属性を指定するだけです。
結合のやりなおしも、思った以上に簡単な処理で可能でした。 ただし、やりなおし処理の範囲は、必ず結合セルから開始し、他の結合セルを含まない範囲という仕様になりました。（後述）
下は、「セルB」に「colspan="4"」、「セルC～E」に「style="display: none"」が指定された状態で、結合解除をするにはそれぞれの属性指定を削除するだけです。
また、「セルB～D」の結合は残し「セルE」の結合を解除する場合は、「セルB」は「colspan="3"」に変更し、「セルE」の「style="display: none"」の指定を無くせば可能でした。
反対に結合範囲を拡げる変更も、全く同じコードで可能です。
セル結合の範囲が重なった場合
これは難問でした。 セル結合の選択範囲内に既にセル結合をした箇所が含まれた場合の処理方法で、何度もコードを書き直しました。
下は、「セルD」「セルE」が既に結合されていて、これを「セルB」～「セルE」の結合に変更する様な場合です。
セル結合が重なった処理は、プログラム上では不可能ではないでしょうが、大変に複雑な分岐になる事が判りました。 再結合を「BCD」とするか「BCDE」や「BCDEF」とするかといった処理範囲により、扱いがかなり変わります。 上は未だ単順な場合で、結合範囲に複数の結合セルがある場合などを考えると、その処理は複雑になる一方です。
これに拘泥した結果、セル結合は「他の結合セルを含む事が出来ない」仕様にすれば、複雑な問題を排除できる事に気付きました。 この仕様は、上の様な変更には少し遠回りになりますが、レイアウトの目的には必ず到達できます。
セル結合の操作
「Blog Table ⭐」ver.4.3 の段階での操作ですが、「セル結合」の機能と、他の機能とは、以下のショートカットで区別する事にしました。
①「Blog Table ⭐」の起動「Ctrl+F1」
➁ 主要機能の起動
▪「Ctrl+左Click」：「表作成」または「表更新」
▪「Alt+左Click」：「TRIM機能」
▪「Ctrl+Alt+左Click」：「セル結合」
➂ 「Blog Table ⭐」の終了「Ctrl+F1」
● 一番最初に「Ctrl+Alt+左Click」で「結合開始セル」を指定します。
▪ 指定したセルは色が反転表示されます。
● 「範囲指定」で、結合するセルの範囲を指定します。
▪ 通常「結合開始セル」を指定した最初の範囲は「1」で、この数は結合するセルの総数を意味します。
▪ 範囲の指定値に従って反転部分が増減します。
●「実行」を「左Click」すると、反転した範囲のセルが結合されます。
少し見づらいですが、上は「C2～E2」のセルが結合され、「C2」のセルが拡大しています。 実際は「C2」の占有幅が拡がり、「D2」「E2」が隠れた状態です。
● 結合されたセルを「Ctrl+Alt+左Click」で選択すると、パネルの「セルの範囲」には結合されたセル数が表示されます。 その数を変更して「実行」を「左Click」すると、結合セルを全て解除したり、結合する個数を変更したりできます。
下は、結合セルを「3個」から「2個」に変更する様子です。
●「結合セルの範囲」は、右側に「結合セル」がある場合は、その手前までしか選択できません。
下は、「B2」を「結合開始セル」にして結合範囲を調節している所ですが、右側に結合セル「E2」があるので、その手前までが指定できる範囲になっています。
縦方向の結合機能は次の課題
なんとか横方向のセル結合機能を実装できました。 縦方向は横方向の応用で可能とは思いますが、縦横の結合セルの衝突の問題は上手い解決が必要でしょう。 縦方向の結合は、次の課題です。
「Blog Table ⭐」の使い方
以下のページのマニュアルに、詳しい操作方法を纏めています。
「Blog Table ⭐」を利用するには
「Blog Table ⭐」のコードは「Github」で配布しています。
このリンク先は下の様な画面で、ここでコードのコピーが可能です。
❶ 赤枠のところに、コピー用のボタンがあります。 これをクリックします。
これで、ページ上のコードがクリップボードにコピーされます。
❷「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。
❸「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。
❹ 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。
➎ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。
❻ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
「Blog Table ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐」の最新バージョンのリンクは、以下のページのリンクリストから探せます。
