― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

返信する
ユーザー名:
件名:
オプション:
BBCode: ON
[img]: ON
[flash]: OFF
[url]: ON
スマイリー: ON
BBCode を無効にする
フォントサイズ:
フォントカラー
スマイリーを無効にする
URL を自動的にパースしない
ユーザエージェントを表示する
認証コード
KCaptcha by Nikita_Sp
   

トピックのレビュー - 開発ツール「レスポンシブデザインビュー」でセレクトボックスのアイコン「▼」が表示されない
作成者 メッセージ
  記事の件名:  Re: 開発ツール「レスポンシブデザインビュー」でセレクトボックスのアイコン「▼」が表示されない  引用付きで返信する
解決策ではないのですが、現状を知る上での情報として...。

次のようなバグレポートがありますが、現時点ではまだ修正されていないようです。
・Bug 904656 - [responsive mode] Select element down arrow not visible
https://bugzilla.mozilla.org/show_bug.cgi?id=904656

【再現手順 -- Windows 上の Firefix 48.0.1】
Firefox で、セレクトボックスを持つ Web ページを表示します。
(例)・Firefox をダウンロード - 自由な Web ブラウザ - Mozilla
https://www.mozilla.org/ja/firefox/new/
(最下段の言語選択が select 要素で定義されています。)

上記ページの select 要素の指定条件なら、セレクトボックス右端にドロップマーカー(ダウンアロー)が表示されます。
また、ドロップダウンリストを展開すると、右端にスクロールバーが現われ、上端にアップアロー、下端にダウンアローが表示されます。

このページをレスポンシブデザインビュー([Ctrl] + [Shift] + [M])で表示したあとのセレクトボックスでは、ドロップマーカー(ダウンアロー)が表示されず、スクロールバーのアップアローもダウンアローも表示されません。
ただし、アローが表示されていないだけで、ドロップダウンリスト自体を表示することは可能ですし、スクロールも機能します。

(補足1)
User Agent を、Android 版 Firefox や iOS 版 Firefox のそれに置き換えた上で例示サイトにアクセスしても、通常の表示画面とレスポンシブデザインビューでは、select 要素のアロー表示に差が出ます。
(補足2)
ボックス要素やインラインフレームなどでスクロールバーが表示される場合でも、レスポンシブデザインビューではアップアローとダウンアローは表示されません。ページそのもののスクロールでも同様です。

【考察】
スクロールバーにおけるアロー表示が、レスポンシブデザインビューでは意識的に省略されているであろうことは推測できます。ノブ部分が省略されることはありませんから、ページ内部でのコンテンツの位置はわかりますし、スクロール自体は可能です。
一方、セレクトボックスであることと、その中に選択候補の一覧(メニューリスト)があることを示すドロップマーカー(ダウンアロー)は、ユーザビリティの観点からは表示されるほうが望ましいと考えられます。
しかし現状で、Firefox のレスポンシブデザインビューは、select 要素のドロップマーカー(ダウンアロー)を、スクロールバーのアローと同じように扱ってしまうようです。
ドロップダウンリストの機能は働きますので、操作不能になるといった実用上の問題は発生しませんが、必要なアローが表示されないのは、レスポンシブデザインビューの目的として適切ではありませんし、実際の画面の状態をキャプチャしたいようなときは困ると思います。

直接的な解決方法ではありませんが以上です。的外れな話になっていたらすみません。


(余談)
承知の上でお使いなら、余計なお世話になってしまいますが...。
現時点での Firefox の最新バージョンは 48.0.1 です。47.0.1 はすでにサポートの終了したバージョンになっています。
47.0.x 系から 48.0.x 系で、いくつかの重要なセキュリティ修正も入っていますので、47.0.1 を使い続けなければならない特別な理由がないのなら、48.0.1 に更新なさることをお勧めしておきます。
投稿記事 Posted: 2016年8月23日(火) 20:09
  記事の件名:  開発ツール「レスポンシブデザインビュー」でセレクトボックスのアイコン「▼」が表示されない  引用付きで返信する
FireFox47.0.1をWindows7で使用しています。

Web画面のキャプチャをとるのに便利なので、開発ツール「レスポンシブデザインビュー」を使おうとしたところ、
フォームのセレクトボックスのアイコン「▼」が表示されず、一行テキストボックスと同じような表示がされます。
開発ツール画面でなく、通常の画面なら「▼」は表示されますし、MacOS版ではレスポンシブデザインビューでも表示されます。
どなたか「▼」をレスポンシブデザインビューでも表示する方法をご存じないでしょうか?
投稿記事 Posted: 2016年8月22日(月) 16:19

All times are UTC + 9 hours


ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean