Wikipedia:井戸端/subj/divについて
 |
|
divについて 編集
お世話になります、Zigzag Zと申します。この度、尾身茂において私がdivの囲みを除去する編集を行ったところ、126.215.197.34さんによって差し戻されました。ノート:尾身茂で伺ったところによれば、「2つインフォボックスが連続した場合の不具合回避のため必要なもの」とのことです。その根拠として、Wikipedia:井戸端/subj/Infoboxを2つ使用する記事にて、画像の位置がおかしいの議論をご紹介頂きました。しかし当該ノートでも指摘した通り、divの囲みを利用した場合、iOSでSafariを使った環境においてモバイル版を閲覧すると、表示が崩れてしまいます（その他の環境でも発生するのかもしれませんが、取り敢えず私が確認できたのはこちらになります）。この返答を行ってからもうすぐ一カ月近く経ちますが、126.215.197.34さんからは何も反応を頂けておらず、今後どのような落としどころを探っていくべきか思案しているところです。コメント依頼に掲載するほどのこととも思えませんでしたので、今回井戸端でご質問させて頂く形となりました。
私としましては、126.215.197.34さんの懸念されている点よりも、モバイル版で表示が崩れてしまうことの方がより大きな問題ではないかと思います。これらの不具合が解決できるような方法があれば良いのですが、現時点では見つけられておりません。なお、その後行われた編集によって当該記事で表示されているテンプレートは一つになっており（この編集では完全に片方のテンプレートを除去できておらず、不十分だと思いますが）、現在はdivで囲む必要はなくなっています。とはいえ、これは根本的な解決策ではありませんから、どのように対処すべきか皆さまのご意見を頂戴したい所存です。どうぞ宜しくお願い致します。--Zigzag Z（会話） 2020年6月20日 (土) 14:39 (UTC)
- iPhone8（iOS 13.5.1）、iPod touch 6th（iOS12.4.7）とAndroid7で検証しました。Zigzag Zさんの編集ではinfoboxの位置が壊れています（iOS2種、Android共通）。一方divを使用した版ではデスクトップ版で横幅がinfoboxギリギリにあるケースの表示がなされており、これはinfoboxを単独にした編集でも変わりません（iPhone8）が、同じiOSでも画面が小さいiPod touch 6thでは、divを使用した版は正常であるものの、Zigzag Zさんの環境では正常であったinfoboxを単独にした版では「尾身茂」の文字がinfoboxの横に表示される現象が発生しました。またこれらの現象はAndroid7のChromeでは発生していませんが、iOSのChromeでは発生しました。iPhone8では正常になったとされるinfoboxを一つにした編集とdivを使用した版に差異が確認できないので、画面の都合でinfoboxが収まっているか分量の都合で崩れていないように見えているだけと考えられます。以上、僅かながら確認を行いました。現象から推測する範囲では、モバイルビューやSafariが原因ではなく、iOSあるいはモバイル環境と画面の関係に起因するように思われます。--Open-box（会話） 2020年6月21日 (日) 01:42 (UTC)
- 調査に時間を割いて頂き、有り難うございます。ただ、私の言葉足らずで「Zigzag Zさんの環境では正常であったinfoboxを単独にした版では「尾身茂」の文字がinfoboxの横に表示される現象が発生し」たという誤解が生じてしまっておりますので、補足させて頂きます。結論から述べますと、この現象は私の環境でも起きました。そのため、今回の議論に至った次第です。上記で「現在はdivで囲む必要はな」いと述べたのは、井戸端で議論を提起した当時はInfoboxが一つだけ表示されており（現在はホーリーブライトさんの編集によって再度二つ表示されております）、126.215.197.34さんがノートで仰った「2つインフォボックスが連続した場合の不具合」は発生しないのではないかと思ったためです。私が正常になったと主張している版については、divを使用していない版（例えばこれなど）のことであり、infoboxを一つにした編集のことではございません。この問題はdivで囲むことによって発生しており、これを除去することによって解決するのではないかと思います。上手くお伝えできていなかったようで大変申し訳ございませんが、この点について再度ご検証頂ければ幸いです。
- さて、こうした経緯から私はdivを除去する編集を行いました。しかし、126.215.197.34さんがWikipedia:井戸端/subj/Infoboxを2つ使用する記事にて、画像の位置がおかしいの議論を挙げてdivを再度追加したことで、今回の議論が起きたのです。確かに126.215.197.34さんのご指摘の通り、divを使用していない版では概要欄の画像の配置がずれております（これはデスクトップ版の現象であり、モバイル版では発生しません）。つまりこの過程で二つの不具合が確認されたという訳ですが、どのように対処したらいいものか思案した結果、今回井戸端でお聞きさせて頂く形となりました。最も簡単な解決策としましては、概要欄の画像を別の位置にずらすことだろうと思いますが、そもそもこの現象について共有した方が良いと思ったこともありますし、念のため質問させて頂いた次第です。
- 大変分かりにくい現状説明となってしまい、申し訳ありません。何卒宜しくお願い致します。--Zigzag Z（会話） 2020年6月21日 (日) 09:53 (UTC)
こんにちは。今更なんですけど、さっき尾身茂さんの記事を確認しました。最初に言っておきますが、多分僕の回答が正しいと思うんですけど、html/cssをちゃんと勉強してないのでもしかしたら違うかもしれません。
簡単に言います。Wikipediaではインフォボックスをtable要素（表）で実装してfloatプロパティというもので右寄せ (float:right;) しているんですけど、モバイルビューを使用するとtable要素のfloat:right;が解除 (float:none;) されるようになってます（細かいことを言うと、横幅が720ピクセル以上だとinfoboxはモバイルビューでもfloat:right;になるみたいですが、今回の件とは無関係なので省きます）。要するに、インフォボックスは通常表示では右寄せされるけど、モバイル表示では右寄せされないということです。
ところが、今回のようにdivにfloat:rightを指定することで2つのインフォボックスをまとめて右寄せにすると、モバイルビューでもdivに指定したfloat:right;がそのまま適用されるので、インフォボックスが右寄せされてしまって表示がおかしくなります（通常、モバイル）。これが原因です。
その後のMarine-Blueさん編集の版（通常モバイル）で表示は正しくなっています。どうして正しくなったかというと、Marine-BlueさんはTemplate:右を使って2つのインフォボックスをまとめて右寄せにしているんですが、このTemplateもインフォボックスと同じようにtableで実装されているからです（さっき書いたようにtableだとモバイルビューで右寄せが解除されます）。ただ、tableで複数のインフォボックスをまとめて右寄せする方法は、Wikipedia:井戸端/subj/Infoboxを2つ使用する記事にて、画像の位置がおかしいでWKPDJPさんがやってるのとまったく同じ方法なので、そっちでYuukin0248さんが指摘しているようにアクセシビリティ上の問題があります。
解決方法は・・・分かりません！ 正しいやり方はdivにclassを指定してfloat:right;で右寄せしておいて、モバイルビューのcssでそのclassのdiv要素をfloat:none;にするとかじゃないかと思います。が、一般利用者にはできません。見る分にはMarine-Blueさん編集の版で問題ないはずです。--Takayasu（会話） 2020年6月26日 (金) 15:05 (UTC)
- 大変丁寧なご説明を下さり、有り難うございます。見当もつかなかった原因に気づかせて頂き、理解が進みました。ご指摘の通り、本議論を提起した後にMarine-Blueさんが行われた編集によって、本文がテンプレートの位置に入り込むことはなくなりました。ただ、それでもテンプレートの位置がずれており、スマートフォンなどの小さな画面であれば大した問題ではありませんが、タブレット端末などで閲覧すると表示のおかしさが目立ってしまいます。加えて、Yuukin0248さんやTakayasuさんも言及されているように、アクセシビリティの懸念もあることを考えると、なかなか難しい問題だと感じます。解決策としましては、既に先日述べました通り概要欄の画像を別の位置にずらす程度しか思いつきません。あるいは、当該記事に限った案にはなりますが、そもそも政治家ではないにも関わらずTemplate:政治家が使用されているため、これを使うのをやめれば解決する筈です。私としましては、全般的な解決策としては前者を適用し、今回の場合に限っては後者で対応するのが落としどころとなるように考えております。--Zigzag Z（会話） 2020年6月27日 (土) 03:26 (UTC)
返信 (Zigzag Zさん宛) 昨日書き忘れていたのですが、divも何も付けない状態で画像の表示位置がおかしくなってしまうというのは不具合ではなくて正しい表示だと思います。というのは「インフォボックス1 (float:right)、インフォボックス2 (float:right)、画像 (float:left)」という順番で書いてあったら、この順番通りに上から順に配置されるので、画像はインフォボックス2よりも下（か真横）に表示されるのが正しいです（特別:固定リンク/77256326）。- それで、タブレット端末などで閲覧するとおかしくなるというのは、昨日「細かいことを言うと、横幅が720ピクセル以上だとinfoboxはモバイルビューでもfloat:right;になるみたいですが、今回の件とは無関係なので省きます」って省いた件に関係があります。通常のtable（Template:右も含む）とは違い、classにinfoboxが指定されているtableはモバイルビューで横幅720ピクセルを境に表示が切り替わるようになってるので、その違いが出ます。試しにサンドボックスでinfoboxを入れ子にしたものを作りました（通常、モバイル）。これでおそらく、Zigzag Zさんご指摘の問題は修正できているんじゃないかと思います（が、別の問題があるかもしれません……）。
- 結局、どうやってもアクセシビリティの問題は残っているので、結論としてはZigzag Zさんがおっしゃっているようにそもそも画像の位置を変えるかインフォボックスを1つにするほうが安全なんじゃないかという気がしました。
- 最後にもう一度言っておきますが、html/cssをちゃんと勉強してないのでもしかしたら違うかもしれません。--Takayasu（会話） 2020年6月27日 (土) 06:31 (UTC)
- 重ね重ね表示の仕組みについてご教示頂く形となり、感謝の念に堪えません。また、サンドボックスで検証まで行って頂き、大変恐縮しております。infoboxを入れ子にすれば上手く表示されるというのは全く思いもよりませんでした。ただ、突き詰めて考えるとご指摘のアクセシビリティの問題などは残っており、一筋縄ではいかない現象だと感じます。これは結局は対応される方々によって好みも出てくるのかもしれませんが、当該記事に限って言えばTemplate:政治家を使用するのをやめればそれで済むのではないかと思います。恐らくこのテンプレートが使われている理由としては、世界保健機関西太平洋地域事務局事務局長という役職を記載するためでしょうが、こういったものは他の学者の方々の記事では使われておりませんし、Template:政治家の使用方法から言っても適切ではありません。そのため、今回のケースに関してはinfoboxを一つにすることで解決したい所存です。他の事例については、画像を別の位置にずらすことも選択肢として挙げられると思いますので、後学のために改めて明記しておきます。いずれにせよ、非常に分かりにくい議論へ関わって下さった皆さま、本当に有り難うございました。今後とも、何卒宜しくお願い致します。--Zigzag Z（会話） 2020年6月29日 (月) 08:31 (UTC)
