ヘルプ:ネスト構造のテーブルを避ける

ウィキテキストの使い方にはいろいろな実例がありますが、PC版を使用する上級のユーザーにとっては便利な機能でも、モバイルのプラットフォームでは邪魔をしてしまうこともあります。ネスト（入れ子）構造になったテーブルはその中でも最も良い例です。

モバイルのベストプラクティスについての復習：編集や投稿がモバイルデバイスでどのように表示されるか確かめたい時には、URLの最後に?useskin=wikiamobileと入力します。クラシックエディタをご利用の場合にはプレビュー画面で左上のドロップダウンメニューから「モバイル」を選択します。

ネスト構造のテーブルとは？[]

テーブルの中にさらにテーブルが入れられたテーブルのことです。（テーブルインセプションと呼ばれる場合もあります。）

こちらはBrave Frontierコミュニティにあるネスト構造になっているテーブルの例です。綺麗に表示されたPC表示と、理想的とは言えないモバイル表示との違いをご覧ください。

ネスト構造のテーブルが悪いのはなぜ？[]

テーブルをネスティングすることは出来るだけ避けるようにしましょう。テーブルは通常、できるだけ最小の幅をとるようになっており、横幅が足りない時には縦に広がってしまいます。ですが、テーブルの中にテーブルが入れ込まれているネスト構造の場合、セルの幅は追加された方のテーブルに合わせて調整されてしまいます。そうすると、テーブル全体の幅が画面スペースよりも遥かに大きくなってしまいます。これは画面サイズが小さいモバイル表示にとっては致命的です。

結果：これはページを見る人が何度も横のスクロールをしなければいけない（理想的とは言えないユーザー体験を強いる）ことになってしまい、テーブルの大部分が隠れてしまうことにもなります。また、ネスト構造のテーブルをそれぞれ一つずつのテーブルに分けた場合、情報の表示には横ではなく縦のスクロールが多くなります。

さらにこれによって、それぞれのテーブルは大きくなります。コンテンツのフォーマットはモバイル画面のサイズによって決まり、ブラウザはコンテンツのスクロールの全体的な流れが良くなるように表示ができるところにテーブルをを動かすようになっています。

あなたのコミュニティでネスト構造のテーブルが使われている場合には？[]

ネスト構造のテーブルではなく、テーブル内にテーブルを入れる形に頼らないインフラストラクチャの試みをするよう勧めてみましょう。上記のように、テーブルが隣同士になっている場合にも同じ結果になってしまうことがよくあります。テーブルでのフォーマットが最も望ましいコンテンツの場合、セルを調整してテーブルがテーブルの中にあるように見せながらも、実は一つのテーブルしか使わない、という風に工夫することもできます。

ネスト構造のテーブルを避けるためのベストプラクティス[]

ネスト構造のテーブルを見つけるには[]

ソースコードではテーブルはいつも{| のWikiテキストか <table>のHTMLタグで始まり、|} か </table>で閉じられています。ですので、テーブルの始まりを見つけて、それを閉じるWikiテキストまたはHTMLタグの前に、またテーブルの始まりがある場合には、テーブルの中にテーブルがネスティングされているということが分かります。これはいくつものレイヤーになっている場合もあります。

こちらはネスト構造のテーブルのソースコードの例です。

ネスト構造のテーブルを直すには[]

まず最初のステップは、ネスティングされているテーブルがいくつあるのか見つけることです。次に、一番奥に入れられているテーブルを見つけ、テーブルの連鎖から外して外に取り出します。「プレビュー」を押し、そのテーブルだけで見るとどうなるかを確認します。もしそこでテーブルが思うように表示されていないときには、テーブルのパラメーター（テーブルの始まりを示す{|のすぐ後に続くコード）を確認しましょう。これを続けて中に入っているテーブルを全て取り出したら、外側のテーブルを削除します。これで、テーブルはモバイルでも最適化された表示になるはずです。

テーブルを分けた後、デスクトップ表示に対応させるには[]

テーブルは上から下に続くようにするか、隣同士に並べるようにします。そうすると、モバイルブラウザは画面のスペースにフィットするようにテーブルを動かして表示することができます。テーブルが隣同士になっていてモバイル画面の幅に入りきらない場合には、ブラウザは自動的に最後のテーブルを下に移動します。

ですが一番大きな課題となるのは、PC版でもモバイル版でも良く見えるテーブルの配置を見つけなければならない、というステージに立たされてしまうということです。これには、テーブルがPC版でどのように見えるかをコントロールするために、インラインCSSを調整しなければならない場合があります。テーブルのWikiテキストにCSSを記述すると、PC版には影響を与えますが、モバイル版ではきちんと表示されなくなってしまいます。テーブルの配置についてのより詳しい情報につきましては、このページの一番下のその他の関連情報をご覧ください。

ネスト構造のテーブルについての役立つその他の情報[]

もしたくさんのページに載せられているテーブルの表示に一つのテンプレートが使われている場合、そのテンプレートのテーブルのネスティングの問題を解決すれば、それが使われている全てのページのモバイル表示を一気に直すことができるということを覚えておきましょう。これは同時に、そのテンプレートの最適化を実践することで、あなたのコミュニティ全体に大きな変化を与えることができるということを意味しています。

セル一つ一つに画像が入れられているテーブルは、画像の大きさに合わせてセルの大きさが変えられてしまいます。ですので画像は、モバイル表示に適した大きさにサイズダウンするか、またはテーブルの外に出す必要があります。とても大きい画像がテーブルの外にある場合には、モバイルブラウザは画像がモバイル画面に収まるように自動的にサイズダウンします。

Brave Frontierコミュニティの場合のケーススタディー[]

Brave Frontierコミュニティはネスト構造のテーブルの撲滅のために実験台となり、協力者となってくださいました。おかげで、このコミュニティの最も重要なテンプレートの一つであるキャラクターテンプレートにおいて、ネスト構造を壊しながらも、PC版での見た目と印象を保つというバランスを見つけることに成功しました。結果、このコミュニティ上の大変多くの記事がとても良く改善されたモバイルのレイアウトとなりました。こちらをご覧ください。

このBrave Frontierで実際にソースコードにどのような変化を加えたのかについて気になるアドミンの方は、ぜひこちらをご覧ください。

’'注意：このコードは望まれない変更を防止するため、保護されています。テンプレートをコピーして使用したい場合には、コードをコピーしてご自分のコミュニティまたはサンドボックスにコピーしてご使用ください。

Fandom スタッフへの連絡[]

あなたのコミュニティにあるネスト構造のテーブルの変換についてのご不明な点は、特別:Contactからお気軽にご連絡ください。タイトル欄には「モバイル：ネスト構造のテーブルについて」とご入力ください。

その他のヘルプとフィードバック[]

ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
このヘルプはコミュニティセントラル内にて管理されています。