目次
1.はじめに
2.対処方法
3.まとめ
4.参考
1.はじめに
Responsive WebをSafariで開いた際に、
Widgetをクリック・タップすると下記のように枠が表示されてしまうことがあります。
このように自分で設定していないにも関わらず枠が表示されたりしてしまうのは、
user agent stylesheetというブラウザごとに定義されているデフォルトのCSS設定が関係している可能性があります。
下記画像のようにブラウザの要素を見てみると、
「ユーザエージェント・スタイルシート」というCSSがありますが、
これが表示されている場合はデフォルトでこのCSSが適用されているということです。
このuser agent stylesheetを打ち消し、
Widgetをクリック・タップした際に、
枠がでないようにする対処方法について紹介します。
2.対処方法
1.HTML Headで、全体に適用させるCSSを埋め込む
クリック・タップをした際に枠がでないようにするためにoutline:noneを設定していきます。
この設定を画面全体に適用させる方法を紹介します。
1.Project Settingsを開く
2. Responsive Webを開き、HTML Headに下記コードを記入する。
3.Doneをクリック
<style type="text/css">
*:focus{
outline:none;
}
</style>
このようにコードを記入したことで、
下記のように画面全体でWidgetをクリック・タップしても枠が表示されないようになりました。
2.HTML Headで、特定のWidgetに適応させるCSSを埋め込む
先程の方法では画面全体に
クリック・タップ時に枠がでないように設定していましたが、
今度はこの設定を特定のWidgetに適応させる方法を紹介します。
例として、今回はListBox WidgetのみにCSSを適用させます。
先程同様HTML Headにコードを記入していくのですが、
今回は下記コードを記入します。
<style type="text/css">
select[kw="ListBox"]:focus{
outline:none
}
</style>
コードを記入したことで、
下記のようにListBox Widgetをクリック・タップしても枠が表示されないようになりました。
特定のWidgetをコード記入時に宣言するためには、
HTMLタグとWidget名を記入する必要があります。
今回の画面を作成する際に使用したWidgetのHTMLタグとWidget名は以下になります。
| Widget | HTMLタグ | Widget名 |
|---|---|---|
| FlexContainer | dev | FlexContainer |
| Button | button | Button |
| ListBox | select | ListBox |
| TextArea | textarea | TextArea2 |
| TextBox | input | TextBox2 |
この他にも様々なWidgetがありますので、HTMLタグやWidget名を調べる際には、
ブラウザでコンソールを開いて確認してみましょう。
3.まとめ
Responsive WebをSafariで開いた際に、
Widgetをクリック・タップすると枠が表示されてしまう場合の対処法を紹介しました。
Safariで枠が表示されてしまったという場合はこちらを参考に対応してみてください！