From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../broken_table_layout.html/index.html | 67 +++++++ .../compatibility_faq/cut_off_text.html/index.html | 60 +++++++ .../empty_background_color.html/index.html | 58 ++++++ files/ja/orphaned/web/compatibility_faq/index.html | 91 ++++++++++ .../invalid_icon_size.html/index.html | 92 ++++++++++ .../misaligned_icon.html/index.html | 128 +++++++++++++ .../misaligned_text.html/index.html | 116 ++++++++++++ .../misaligned_text_inside_icon.html/index.html | 100 +++++++++++ .../no_background_shown.html/index.html | 60 +++++++ .../no_border_line_shown.html/index.html | 60 +++++++ .../no_checkbox_check_shown.html/index.html | 54 ++++++ .../no_decoreation_shown.html/index.html | 82 +++++++++ .../no_icon_shown.html/index.html | 147 +++++++++++++++ .../web/compatibility_faq/no_wrap.html/index.html | 122 +++++++++++++ .../overwrapped_icon.html/index.html | 62 +++++++ .../overwrapped_navigation.html/index.html | 83 +++++++++ .../tips_default_style_difference.html/index.html | 62 +++++++ .../tips_vendor_prefix.html/index.html | 198 +++++++++++++++++++++ .../underline_color_diffrence.html/index.html | 77 ++++++++ 19 files changed, 1719 insertions(+) create mode 100644 files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html (limited to 'files/ja/orphaned/web/compatibility_faq') diff --git a/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html new file mode 100644 index 0000000000..32dc4a39a4 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html @@ -0,0 +1,67 @@ +--- +title: テーブルのレイアウトが崩れている +slug: Web/Compatibility_FAQ/Broken_Table_Layout.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。

+ +
　　
+ +

左：Firefox　右：他ブラウザ

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    　テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

    　上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。
    +  

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    テーブルの配置指定に table-layout: fixed; を適用させます。
    + table-layout: fixed; の指定により、横並びのセル幅が左右均等になります。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・細かいpxの指定をせずにテーブルの見た目を整えることができます。
+ 　・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、
+ 　　発生したセルに対してoverflowプロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。

+ +


+ 戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html new file mode 100644 index 0000000000..9824d3d62d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html @@ -0,0 +1,60 @@ +--- +title: 文字列の一部が表示されずに見切れる +slug: Web/Compatibility_FAQ/Cut_Off_Text.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　検索等のテキストボックス内のプレースホルダーが見切れています。
+ 　プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。

+ +

　　　表示画面

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。
    + テキストを全て表示させるには、テキストよりも大きなwidthプロパティの値を設定する必要があります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width:165px;
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティを要素のテキストに合わせて、再設定することで正しく表示されます。
    + 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width: 200px;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない調整で正しく表示を行えるようになります。
+ 　・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html new file mode 100644 index 0000000000..0574ed49ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html @@ -0,0 +1,58 @@ +--- +title: 'アイコン,バナーの色が抜けている' +slug: Web/Compatibility_FAQ/Empty_Background_Color.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　a.button_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　a.button_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみで対応可能です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/index.html b/files/ja/orphaned/web/compatibility_faq/index.html new file mode 100644 index 0000000000..752ad7c6ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/index.html @@ -0,0 +1,91 @@ +--- +title: サイト表示互換性に関するノウハウ +slug: Web/Compatibility_FAQ +tags: + - Compatibility +--- +
+

モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。
+ 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。

+ +

目次

+ +
+

1. 画面レイアウトが崩れる

+ + + +

2. 装飾が抜ける

+ + + +

3. 画面要素の一部が表示されない

+ + + +
+

TIPS

+ + + +
diff --git a/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html new file mode 100644 index 0000000000..520c573e75 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html @@ -0,0 +1,92 @@ +--- +title: アイコン、画像が期待と異なるサイズで表示される +slug: Web/Compatibility_FAQ/Invalid_Icon_Size.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンや画像が期待と異なるサイズで表示されます。
+ 　他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。
+ 　結果、他の要素と並んだ場合に不自然な表示となってしまいます。

+ +
+

　　表示画面

+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。
    + -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　input[type="submit"] {
+	position: absolute;
+	right: 15px;
+	width: 40px;
+	border-radius: 5px;
+	padding: 6px 19px;
+	margin-top: 10px;
+	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。
    + インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。

    + + + 
    　　インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;}
+　　インライン {float: right; clear: both;}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-linear-gradient()関数の場合は、linear-gradient()関数を追記することでFirefoxでも指定を行うことができます。
    + ただし、-webkit-linear-gradient()関数とlinear-gradient()関数は、伴う引数が異なる為、例に従って記載してください。

    + + 
    　　input[type="submit"] {
+	position: absolute;
+	right: 15px;
+	width: 40px;
+	border-radius: 5px;
+	padding: 6px 19px;
+	margin-top: 10px;
+	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+	background: url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法を統一することで解消されます。
    + インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html new file mode 100644 index 0000000000..f3fbfffcca --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html @@ -0,0 +1,128 @@ +--- +title: アイコン、画像の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンや画像の表示位置がずれて表示されてしまいます。
+ 　他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。

+ +

 　

+ +

+ +
 
+ +

 

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。
    + ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても
    + Firefoxで表示すると折り返され、縦並びに表示されてしまいます。

    + + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.2%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティが使用されている場合、Firefoxでは適応されません。
    + 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。
    + よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。

    + + + 
    　　.menu {
+	display:　block;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	zoom: 0.5;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。
    + 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+　　}
    + +

     

    +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + 各ブロックの横幅を調整することで解消されます。
    + ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。

    + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.0%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティはFirefoxでは適応されないため、heightプロパティで位置を指定するのがよいです。
    + その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。

    + + 
    　　インライン { height: 80px;}
+
+　　.menu {
+	display: block;
+	position: absolute;
+	top: -15px;
+	right: -10px;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + アイコンの位置をpaddingプロパティで再調整することで正しく表示させることが可能となります。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+	padding: 0 0 6px 0;
+　　}
    + +

     

    +
    4. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html new file mode 100644 index 0000000000..fe57d3e89a --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html @@ -0,0 +1,116 @@ +--- +title: 文字列の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Text.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。
+ 　その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + ブラウザ毎でデフォルト値を持っています。 line-height: normal; 等で指定するとデフォルト値で表示されます。
    + しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。

    + + 
    　　.recommended {
+	text-decoration: none;
+	display: inline;
+	width: auto;
+	height: auto;
+	line-height: normal;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 様々なアイコン上の文字列をCSSのpaddingプロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。
    + これは、ブラウザ間でpx指定の差異があるために発生しています。

    + + 
    　　.gender-type {
+	padding-top: 3px;
+　　}
    + + +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、
    + 明示的に値を指定することで正しく表示できます。

    + + 
    　　.recommended {
+	text-decoration: none; display: inline;
+	width: auto;
+	height: auto;
+	line-height: 1;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。
    + -webkit-box-sizingプロパティの場合は、box-sizingプロパティを追記することでFirefoxでも指定を行うことができます。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 指定に差異が出てしまっているものに関しては、個々の要素にpaddingプロパティ指定を追記し、
    + それぞれで調整を行うことで、想定の表示を行うことが可能となります。

    + + 
    　　.gender-type.blc-hdr-rgt {
+	float: right;
+	padding: 1.5px;
+　　}
    + + +
    4. +
+ +

メリット

+ +

　・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html new file mode 100644 index 0000000000..bb9afac07e --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html @@ -0,0 +1,100 @@ +--- +title: アイコンの中身が外側にはみ出すなどして形が壊れている +slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンの中身が外にはみ出して形が崩れてしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。
    + 横幅にmax-widthプロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、width: 100%; に修正することで縦画面表示のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-background-sizeプロパティの場合は、background-sizeプロパティを追記することでFirefoxでも指定を行うことができます。
    + 引数は同様のものが使用可能です。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズの可変に対応可能となります。
+ 　・他のブラウザでも互換性を維持することができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html new file mode 100644 index 0000000000..a89fb50986 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: ページの背景色が抜けている +slug: Web/Compatibility_FAQ/No_Background_Shown.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。

+ +
+
表示画面
+ +

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html new file mode 100644 index 0000000000..2a00bcebe7 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: 罫線が表示されない +slug: Web/Compatibility_FAQ/No_Border_Line_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + 例えば、Chromeではブラウザ独自のCSSにて、hr要素にbackground-colorプロパティを指定することができます。
    + そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。
    + 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。
    + まず、表示させたい要素のインラインに罫線(border-top: thin solid;)を指定します。
    + そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(background-colorプロパティを利用)にて非表示にします。

    + + + 
    　　インライン {
+	border-top: thin solid;
+　　}
+
+　　hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid #cccccc;
+	margin: 1em 0;
+	padding: 0;
+	background-color: rgb(255,255,255);
+　　}
    + 上記の修正にて、他ブラウザとの互換がとれるようになります。
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html new file mode 100644 index 0000000000..df2f8d3625 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html @@ -0,0 +1,54 @@ +--- +title: チェックボックスのレ点が表示されない +slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。
    + または、Firefox用にlinear-gradient()関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。

    + + 
    　　input[type="checkbox"]:checked {
+	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
+	background-image: url(../contents/bg_08.png), linear-gradient(top, #00397b 0%, #01afeb 100%);
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するためにlinear-gradient()関数を使用します。
    + その場合、第一引数には例のように「to top」を指定することで正しく表示されます。

    + + 
    　　input[type="checkbox"]:checked  {
+	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
+	background-image: url(../contents/bg_08.png), linear-gradient(to top, #00397b 0%, #01afeb 100%);
+　　}
    +
    2. +
+ +

メリット

+ +

　・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html new file mode 100644 index 0000000000..e41d42f33d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html @@ -0,0 +1,82 @@ +--- +title: 枠のシャドウや角丸が抜けている +slug: Web/Compatibility_FAQ/No_Decoreation_Shown.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkitブラウザ向けの記述がされている場合、この現象が発生します。
    + 例えば、以下のような場合です。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他ブラウザで互換性を維持する為に、以下のようなbox-shadowプロパティ、border-radiusプロパティの記述を追加します。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+	box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html new file mode 100644 index 0000000000..5845f90804 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html @@ -0,0 +1,147 @@ +--- +title: アイコンが表示されない +slug: Web/Compatibility_FAQ/No_Icon_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　一部のアイコンやバナーが表示されません。
+ 　メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。

+ +
+

+
+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。
    + また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。
    + 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。

    +  下記は、描画指定の例になります。 + + 
    　　top li{
+	font-size: 90%;
+	-webkit-border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	-webkit-border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	-webkit-transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。
    + floatプロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。

    + + + +

    詳しくは、「mobile版Firefox向けベンダープレフィックス対処方法まとめ」をご覧ください。

    + +

    下記は、描画指定の例になります。

    + + 
    　　navtop li {
+	font-size:90%;
+	border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+	background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html new file mode 100644 index 0000000000..c36f167bfe --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html @@ -0,0 +1,122 @@ +--- +title: 画面外に不要な空白が発生する +slug: Web/Compatibility_FAQ/No_Wrap.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。
+ 　その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
+
表示画面
+ +

+
+ +

 

+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。
    + よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。

    + +

    なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。
    + 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。
    + アイテムの横幅指定は、widthプロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。

    + +

    下記の指定方法は、max-widthプロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。
    + その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

    なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。

    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + 画面全体に table-layout: fixed; を指定します。
    + この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。

    + + + 
    　　html, body, div, span... {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	vertical-align: top;
+	table-layout: fixed;
+　　}
    + +

     

    + +

    また、テーブルの幅指定を display: table; で行っている場合、Firefoxでは認識できません。
    + 他ブラウザ互換のために display: inline-block; を追記することで、画面幅に指定することができます。

    + + + 
    　　#navigation ul {
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

     

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 width: 100%; に修正することで縦画面表示時のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    + +

    display:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、display: inline-block; に修正することで指定できます。

    + + + 
    　　box li {
+	width: 100%;
+	display: box;
+	display: inline-block;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。
+ 　・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html new file mode 100644 index 0000000000..d6ccdc4655 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html @@ -0,0 +1,62 @@ +--- +title: アイコンが隣接する他のアイコンと重なってしまう +slug: Web/Compatibility_FAQ/Overwrapped_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。
+ 　隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。

+ +
+
表示画面
+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。
    + 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。

    + + + 
    　　.icon {width: 100px !important;}
    + +

     

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。
    + その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。

    + + 
    　　.icon {width: 120px !important;}
    + +

    また、widthプロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。
    + ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンをmarginプロパティ等で表示位置を調整する必要があります。

    + + 
    　　.icon {width: auto;}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。
+ 　・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html new file mode 100644 index 0000000000..4e8a4bd9c5 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html @@ -0,0 +1,83 @@ +--- +title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう +slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。
+ 　一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。
+
+
+ 　
+  

+ +

要因

+ +

　要因の代表例としては以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + display: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。
    + 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。

    + + 
    　　navigation ul {
+	display: table;
+	width: 99.9%;
+　　}
    + +

    また、display: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	-webkit-box-pack: center !important;
+	-moz-box-pack: center !important;
+	width: 100%;
+　　}
    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + Firefoxでは、display: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定にdisplay: inline-block; やdisplay: flex; を追記します。

    + +

    display: inline-block; の場合

    + + 
    　　navigation ul{
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

    また、親要素をflex設定にした場合、自動的に子要素はflexアイテムになります。flexアイテム用に横方向寄せを設定しているプロパティをjustify-contentプロパティに変更します。
    + 縦方向寄せを設定しているプロパティもalign-itemsプロパティに変更します。

    + +

    display: flex; の場合

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	display: flex !important;
+	-webkit-box-pack: center !important;
+	justify-content: center !important;
+	width: 100%;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない修正で他ブラウザとの互換性が取れます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html new file mode 100644 index 0000000000..4285cff266 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html @@ -0,0 +1,62 @@ +--- +title: ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異) +slug: Web/Compatibility_FAQ/Tips_Default_Style_Difference.html +tags: + - Compatibility + - StyleSheet +--- +

概要

+ +

　ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。
+ 　多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。

+ +

例

+ +
    +
  1. +

    デフォルトのフォントが異なる
    + ブラウザ毎でデフォルトのフォントが異なる場合があります。font-styleプロパティを明示的に指定すると統一できますが、font-style: normal; で指定した場合は、表示が多少異なります。
    + 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。

    + + 
    　　body {
+	margin: 0;
+	padding: 0;
+	font-style: normal;
+　　}
    + +

    +
    2. +
  2. +

    テキストの太さが異なる
    + 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。

    + +

    +
    3. +
  3. +

    チェックボックスのデザインが異なる
    + チェックボックスの表示がブラウザ間で異なる場合があります。
    + チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。
    + 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。

    + +

    注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットするappearanceプロパティが使用できない不具合があります。

    + +

    +
    4. +
  4. +

    プルダウンメニューのデザインが異なる
    + プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。

    + +

    +
    5. +
+ +

ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。

+ +
　　.ipt_select_01 {
+	width: 100%;
+	color: #000;
+	background-color: ButtonFase;
+	border-color: #A9A9A9;
+　　}
+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html new file mode 100644 index 0000000000..cb1475537f --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html @@ -0,0 +1,198 @@ +--- +title: mobile版Firefox向けベンダープレフィックス対処方法まとめ +slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html +tags: + - Compatibility + - Vendor prefix +--- +

概要

+ +

　ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。
+ 　例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。
+ 　本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。

+ +

　以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。

+ +
+

Mozilla CSS 拡張仕様 (-moz-)

+ +

詳細は、Mozilla 独自の CSS 拡張 をご覧ください。

+ +

＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味PC版Firefox向け記述例mobile版Firefox向け対処法
-moz-box要素をボックス配置するdisplay: -moz-box;display: inline-block;
-moz-border-radius枠線の角丸を設定する-moz-border-radius: 10px;border-radius: 10px;
-moz-linear-gradientグラデーション装飾を付与するbackground: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);background: linear-gradient(to top, #F0F0F0 0%, #ccc);
+ +
+

Webkit CSS 拡張仕様 (-webkit-)

+ +

詳細は、WebKit 独自の CSS 拡張 をご覧ください。

+ +

＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味mobile版Chrome向け記述例mobile版Firefox向け対処法
-webkit-appearanceブラウザデフォルトの装飾設定を適用する-webkit-appearance: none;代替指定が存在しないため、明示的にスタイル指定する
-webkit-background-size背景サイズを指定する-webkit-background-size: 26px auto;background-size: 26px auto;
-webkit-border-radius枠線の角丸を設定する-webkit-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow領域のシャドーを設定する-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing領域のサイズを設定する-webkit-box-sizing: border-box;box-sizing: border-box;
-webkit-gradientグラデーション装飾を付与するbackground: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));background: linear-gradient(to bottom, #ffffff, #f6f6f6);
-webkit-linear-gradientグラデーション装飾を付与するbackground: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);background: linear-gradient(to top, #00397b 0%, #01afeb 100%);
-webkit-transform要素を移動、回転、スケーリング、傾斜させる-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
-webkit-transition-durationトランジションによるアニメーションが完了するまでの所要時間を指定する-webkit-transition-duration: 100ms;JavaScriptで実装する
-webkit-transition-propertyトランジションさせるプロパティを指定する-webkit-transition-property: opacity;JavaScriptで実装する
-webkit-transition-timing-functionトランジション実行中の値の変更速度を操作する-webkit-transition-timing-function: ease-in-out;JavaScriptで実装する
+ +
+

考察

+ +

　・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。
+ 　　そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。

+ +

　・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。

+ +

注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。
+ 　　　以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。

+ +


+ ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザ/バージョン構文
Chrome/3-9-webkit-gradient();
Chrome/10-25-webkit-linear-gradient();
Chrome/26以降linear-gradient();
Firefox/3.6-15-moz-linear-gradient();
Firefox/16(2012.10リリース)以降linear-gradient();
+ +

　mobile版FirefoxはCSS3準拠のため、MDN等のリファレンスを参照し、適正な設定を行うことが必要です。

+ +

参考

+ +

　・CSS グラデーションの利用 - Web developer guide | MDN
+ 　　https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html new file mode 100644 index 0000000000..2df04e427d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html @@ -0,0 +1,77 @@ +--- +title: 下線の色が相違している +slug: Web/Compatibility_FAQ/Underline_Color_Diffrence.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。

+ +
+

+
+ +

要因

+ +

　以下のような要因が考えられます。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合
    + text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。
    + なお、text-decoration-colorは非推奨APIですのでCSS3準拠に書き替えが必要です。

    + + 
    　　text-decoration-color: -moz-use-text-color;
    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合

    + +

    例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。
    + そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + text-decoration-color: -moz-use-text-color; を border-color: currentColor; に書き換えます。
    + なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。

    + + 
    　　インライン {
+	text-decoration: underline;
+	border-color: currentColor;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

-- cgit v1.2.3-54-g00ecf