aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html')
-rw-r--r--files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html100
1 files changed, 0 insertions, 100 deletions
diff --git a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html
deleted file mode 100644
index bb9afac07e..0000000000
--- a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: アイコンの中身が外側にはみ出すなどして形が壊れている
-slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html
-tags:
- - Compatibility
- - Layout
----
-<h2 id="概要">概要</h2>
-
-<p> アイコンの中身が外にはみ出して形が崩れてしまいます。</p>
-
-<div style="margin-left: 50px;">表示画面</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/9979/0103.jpg" style="width: 318px; height: 180px; margin-right: 50px; margin-left: 50px;"></p>
-
-<h2 id="要因">要因</h2>
-
-<p> 複数の要因が考えられますが、代表例として以下があります。</p>
-
-<ol>
- <li>
- <p><strong>アイコンの横幅指定が誤っている</strong><br>
- アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。<br>
- 横幅に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>プロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。</p>
-
-
- <pre><code><font size="3">  img {
- <font>max-width</font>: <strong>100%;</strong>
- height: auto;
- vertical-align: middle;
- border: 0px none;
-  } </font></code></pre>
-
- <p> </p>
- </li>
- <li>
- <p><strong>ベンダープレフィックス</strong><br>
- 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。<br>
- -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。</p>
-
-
- <pre><code><font size="3">  h3 {
- padding: 10px 40px 10px 10px;
- background: url(/images/open.gif) no-repeat 98% 50%;
- <font>-webkit-background-size</font>: <strong>21px 21px;</strong>
- font-weight: bold;
- font-size: 12px;
- cursor: pointer;
-  } </font></code></pre>
-
- <p> </p>
- </li>
-</ol>
-
-<h2 id="解決策">解決策</h2>
-
-<p> 各要因の解決策の代表例として以下があります。</p>
-
-<ol>
- <li>
- <p><strong>アイコンの横幅指定が誤っている</strong><br>
- <a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>: 100%; に修正することで縦画面表示のサイズにも対応できます。</p>
-
-
- <pre><code><font size="3">  img {
- <font>width</font>: <strong>100%;</strong>
- height: auto;
- vertical-align: middle;
- border: 0px none;
-  } </font></code></pre>
-
- <p> </p>
- </li>
- <li>
- <p><strong>ベンダープレフィックス </strong><br>
- webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。<br>
- -webkit-background-sizeプロパティの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size">background-size</a>プロパティを追記することでFirefoxでも指定を行うことができます。<br>
- 引数は同様のものが使用可能です。</p>
-
-
- <pre><code><font size="3">  h3 {
- padding: 10px 40px 10px 10px;
- background: url(/images/open.gif) no-repeat 98% 50%;
- -webkit-background-size: 21px 21px;
- <font>background-size</font>: <strong>21px 21px;</strong>
- font-weight: bold;
- font-size: 12px;
- cursor: pointer;
-  } </font></code></pre>
-
- <p> </p>
- </li>
-</ol>
-
-<h2 id="メリット">メリット</h2>
-
-<p> ・画面サイズの可変に対応可能となります。<br>
-  ・他のブラウザでも互換性を維持することができます。</p>
-
-<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>