diff options
author | Takeshi HAMASAKI <hmatrjp@users.sourceforge.jp> | 2021-03-15 20:11:39 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-15 20:11:39 +0900 |
commit | 7f04fb6808ffe26f94f835c6799ffd9b738f941b (patch) | |
tree | a56c615da7718ab8a8b97c54b9ce2b01f82f9de5 /files/ja/web/http | |
parent | b89a2f144a1f02bb4c65a44268f4051389718e1d (diff) | |
download | translated-content-7f04fb6808ffe26f94f835c6799ffd9b738f941b.tar.gz translated-content-7f04fb6808ffe26f94f835c6799ffd9b738f941b.tar.bz2 translated-content-7f04fb6808ffe26f94f835c6799ffd9b738f941b.zip |
Update index.html
「にに」という重複を削除→「に」
Diffstat (limited to 'files/ja/web/http')
-rw-r--r-- | files/ja/web/http/browser_detection_using_the_user_agent/index.html | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/files/ja/web/http/browser_detection_using_the_user_agent/index.html b/files/ja/web/http/browser_detection_using_the_user_agent/index.html index 9336f7b0b9..d202b232b4 100644 --- a/files/ja/web/http/browser_detection_using_the_user_agent/index.html +++ b/files/ja/web/http/browser_detection_using_the_user_agent/index.html @@ -122,7 +122,7 @@ if (hasTouchScreen) document.getElementById("exampleButton").style.padding="1em";</pre> </dd> <dd>画面のサイズについては、 <em>window.innerWidth</em> と window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ }) を使用してください。画面サイズの対策としてやりたいことは、小さな画面の時に情報を削らないことです。デスクトップバージョンを使用するようになるので、人々を悩ますだけです。むしろ、小さい画面で長いページでは情報の列数を少なくし、画面サイズが大きいほど短いページで多くの列を持つようにしてください。この効果は、 CSS <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用し、時には部分的な代替手段として<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動レイアウト</a>を用いることで簡単に達成できます。</dd> - <dd>また、関連性や重要性の低い情報を下に移動させ、ページのコンテンツを有意義にまとめてみてください。トピック外ではありますが、以下の詳細な例を見れば、ユーザーエージェントのスニッフィングを避けるための洞察力やアイデアが得られるかもしれません。複数の情報のボックスで構成されたページを想像してみましょう。それぞれのボックスは様々な猫や犬の品種についてのものであるとします。各ボックスには、画像、概要、経緯があるとします。画像は、大画面でも適切な最大の大きさが維持されるとします。意味のあるグループ分けをするために、すべての猫のボックスとすべての犬のボックスを分離し、猫と犬の箱が混在しないようにしています。大きな画面では、段組みをして画像の左右の無駄な空間を縮小することで、空間を節約します。このボックスは2つの等価な方法により、段組みに分割することができます。ここで、犬のボックスはすべてソースコードの上の方にあり、猫のボックスはすべてソースコードの下の方にあり、これらの箱の親要素はすべて共通であると仮定します。もちろん、猫ボックスのすぐ上に犬ボックスの単一のインスタンスがあります。最初の方法では、水平方向の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用してコンテンツをグループ化し、ページがエンドユーザーに表示されたときに、すべての犬のボックスをページの上部に配置し、すべての猫のボックスをページの下部に配置するようにします。2つ目の方法は<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">段組み</a>レイアウトを使用し、すべての犬を左に、すべての猫を右に配置します。この特定のシナリオでのみ、フレックスボックス/段組みのフォールバックを提供しないことが適切であり、その結果、古いブラウザー上では非常に幅の広いボックスの単一の列になります。また、以下のことも考慮してください。より多くの人がウェブページに猫を見に来るのであれば、ソースコード上で犬よりも猫をすべて先に書くと、コンテンツが一段にになるような小さな画面でも、より多くの人が探しているものをより早く見つけることができるようになるので、良い考えかもしれません。</dd> + <dd>また、関連性や重要性の低い情報を下に移動させ、ページのコンテンツを有意義にまとめてみてください。トピック外ではありますが、以下の詳細な例を見れば、ユーザーエージェントのスニッフィングを避けるための洞察力やアイデアが得られるかもしれません。複数の情報のボックスで構成されたページを想像してみましょう。それぞれのボックスは様々な猫や犬の品種についてのものであるとします。各ボックスには、画像、概要、経緯があるとします。画像は、大画面でも適切な最大の大きさが維持されるとします。意味のあるグループ分けをするために、すべての猫のボックスとすべての犬のボックスを分離し、猫と犬の箱が混在しないようにしています。大きな画面では、段組みをして画像の左右の無駄な空間を縮小することで、空間を節約します。このボックスは2つの等価な方法により、段組みに分割することができます。ここで、犬のボックスはすべてソースコードの上の方にあり、猫のボックスはすべてソースコードの下の方にあり、これらの箱の親要素はすべて共通であると仮定します。もちろん、猫ボックスのすぐ上に犬ボックスの単一のインスタンスがあります。最初の方法では、水平方向の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用してコンテンツをグループ化し、ページがエンドユーザーに表示されたときに、すべての犬のボックスをページの上部に配置し、すべての猫のボックスをページの下部に配置するようにします。2つ目の方法は<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">段組み</a>レイアウトを使用し、すべての犬を左に、すべての猫を右に配置します。この特定のシナリオでのみ、フレックスボックス/段組みのフォールバックを提供しないことが適切であり、その結果、古いブラウザー上では非常に幅の広いボックスの単一の列になります。また、以下のことも考慮してください。より多くの人がウェブページに猫を見に来るのであれば、ソースコード上で犬よりも猫をすべて先に書くと、コンテンツが一段になるような小さな画面でも、より多くの人が探しているものをより早く見つけることができるようになるので、良い考えかもしれません。</dd> <dd>次に、コードを常に動的にしましょう。ユーザーは携帯端末の向きを回転させて、ページの幅と高さを変更することがあります。または、将来は広げると画面が拡張できるような、折り畳み式電話のような奇妙な端末が現れるかもしれません。折り畳み式電話のような端末をどのように扱うかということに頭を悩ませないでください。開発者ツールのサイドパネルを開いて画面のサイズを変更してみて、ウェブページが滑らかに、流動的に、動的にサイズ変更されるようになるまで満足しないようにしてください。これを行う最も単純な方法は、画面の大きさに基づいてコンテンツを移動させるすべてのコードを、ページが読み込まれたときと、その後の <a href="/ja/docs/Web/API/Window/resize_event">resize</a> イベントのたびに呼び出される単一の関数に分離することです。もし、このレイアウト関数がページの新しいレイアウトを決定する前に多くの計算がある場合は、イベントリスナーが呼び出されないようにイベントリスナーをデバウンスすることを検討してください。また、メディアクエリの <code>(max-width: 25em)</code>, <code>not all and (min-width: 25em)</code>, <code>(max-width: 24.99em)</code> の間には大きな違いがあることにも注意してください。 <code>(max-width: 25em)</code> は <code>(max-width: 25em)</code> を除外し、 <code>not all and (min-width: 25em)</code> は <code>(max-width: 25em)</code> を含みます。 <code>(max-width: 24.99em)</code> は、 <code>not all and (min-width: 25em)</code> の哀れな人のバージョンです。 <code>(max-width: 24.99em)</code> を使用しないでください。適切なメディアクエリを選択し、対応する JavaScript の中で適切な >=, <=, >, < を選択すると、これらが混ざってしまいやすく、結果として、レイアウトが変更された画面サイズでウェブサイトを見てしまうことになるからです。そのため、レイアウト変更が適切に行われているかどうかを確認するために、レイアウト変更が行われている正確な幅/高さでウェブサイトを徹底的にテストしてください。</dd> </dl> |