コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

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)[返信]