Wikipedia:井戸端/subj/モバイルビューにおけるh2タグの表示について

井戸端のタグ：モバイル版 | レイアウト | マークアップ [編集]

モバイルビューにおけるh2タグの表示について

どちらで質問すれば良いのかわからず、こちらに書き込みいたします。Portal:航空のレイアウトに手を入れているのですが、モバイルビューで意図した表示にならずに困っています。divのブロック内にh2タグを入れると、モバイルビューではdivの枠外に出てしまいます（→[1]）。見出しのマークアップ "==" でも同じ結果でした。この描画は仕様なのでしょうか？モバイルビューでもdivの枠内に見出しを入れたいのですが、解決法がありましたらお教え頂けますでしょうか。また、より適切な質問場所がありましたら、お教え頂けますと幸いです。--Mogumin（会話） 2015年12月20日 (日) 09:46 (UTC)

コメント モバイルビューではDIV系のタグは全部おかしくなるので、テーブルタグで入れ子を作った方がいいんじゃないかなあと思います（テーブル内にH2タグはPCでは推奨されないのと、端末によってはテーブルタグ内部は全て自動で折りたたまれてしまいますが）。モバイルビューはウィキメディア財団が作ってるので現在の仕様でしょうね。。--Nami-ja （会話 / 履歴） 2015年12月20日 (日) 13:50 (UTC)

コメント 「モバイルビューでもdivの枠内に見出しを入れたい」との要望にお応えする内容ではありませんので、スルーされても構いませんが、ある機能のご紹介です。今回のような <div>...</div> と <h2>...</h2> の「入れ子関係の崩れ」があり、飾り枠がモバイル版で表示されなくても良いのであれば、枠の要素に nomobile クラスを付与することで非表示にできます（参考: mw:Extension:MobileFrontend）。本来であれば枠だけでなく中身ごと消えてしまうのですが、今回のような「入れ子関係の崩れ」がある場合には使えてしまいます。この際、編集用のリンクは消えてしまいます。これを残したい場合には、編集用のリンクを囲む <div>...</div> を <span>...</span> に変更した上で <h2>...</h2> に内包してください。とは言え、現状ではモバイル版からでもPC版へのリンクになってしまうので、消えていたほうが良い気もしますが。--Frozen-mikan（会話） 2015年12月20日 (日) 15:10 (UTC)

コメント Nami-jaさん、Frozen-mikanさん、早速のコメントありがとうございます。やはり、divタグがおかしくなるのですね。tableタグにしようとも思ったのですが、幅の制御がうまく行かない部分があり、divタグでもう少し頑張ってみます。今日も少し試してみた所、h2タグの一段親にあたるdiv要素だけが崩れるようです。飾り枠div→ダミーdiv→h2と入れ子にすれば、枠が表示されることが分かりました。とりあえずダミーdivを使う方法にしようと思いますが、もし、このやり方が推奨できないようでしたら、お教え頂ければ幸いです。それと、nomobileクラスの情報ありがとうございます。本件とは別に、2段組表示をPC版に限定したいと思っていたので、nomobileで実現できそうです。情報ありがとうございました。portalの修正作業は明日以降になりそうなので、まずは状況報告とお礼まで。--Mogumin（会話） 2015年12月21日 (月) 12:08 (UTC)