49,897
回編集
差分
ナビゲーションに移動
検索に移動
細73行目:
73行目: − 当WIKIの編集の大半はPCからですが、閲覧者の大半はモバイルからです（管理人調べ）。なので、モバイルからでも閲覧しやすいページを作っていきましょう。モバイルで閲覧しやすいページはPCからでも閲覧しやすいはずです。+ − PCもモバイルも、画面に横のスクロールが発生しないことが望ましいです。テキストやサムネイル画像などは、画面端に達すると自動で改行されますが、表のセルは改行されません。よって、表の横幅が画面の横幅より長い場合、ブラウザとWIKIは、テキストを少ない文字数で改行させて各セルの横幅を狭くするか、表自体に横にスクロールできる機能を搭載することで、表が画面外に出ないようにします。どちらも閲覧者にとっては読み難いです。+
編集の要約なし
=== モバイルフレンドリーなページデザイン ===
=== モバイルフレンドリーなページデザイン ===
当Wikiの編集の大半はPCからですが、閲覧者の大半はモバイルからです（管理人調べ）。なので、モバイルからでも閲覧しやすいページを作っていきましょう。モバイルで閲覧しやすいページはPCからでも閲覧しやすいはずです。
モバイルでどう表示されるかをPCから確認するには、ページ最下部の「モバイルビュー」を選択します。更に、ブラウザのウィンドウサイズを狭めると良いでしょう。ブラウザのGoogle Chromeを使用しているなら、F12キーを押し、出てきたデバックツールの中にあるスマートフォンのようなボタンを押すと、複数のスマートフォンの画面サイズをエミュレートできます。しかし、そこまでやらずとも、以下のことに気を付けるだけで十分でしょう。
モバイルでどう表示されるかをPCから確認するには、ページ最下部の「モバイルビュー」を選択します。更に、ブラウザのウィンドウサイズを狭めると良いでしょう。ブラウザのGoogle Chromeを使用しているなら、F12キーを押し、出てきたデバックツールの中にあるスマートフォンのようなボタンを押すと、複数のスマートフォンの画面サイズをエミュレートできます。しかし、そこまでやらずとも、以下のことに気を付けるだけで十分でしょう。
==== 表の横幅を抑える ====
==== 表の横幅を抑える ====
PCもモバイルも、画面に横のスクロールが発生しないことが望ましいです。テキストやサムネイル画像などは、画面端に達すると自動で改行されますが、表のセルは改行されません。よって、表の横幅が画面の横幅より長い場合、ブラウザとWikiは、テキストを少ない文字数で改行させて各セルの横幅を狭くするか、表自体に横にスクロールできる機能を搭載することで、表が画面外に出ないようにします。どちらも閲覧者にとっては読み難いです。
表に大量の情報を入れようとしている場合、他の方法でそれを記述できないか検討してみてください。例えば、テキストなら見出しやリストを使う、画像ならサムネイルやギャラリーを使う、といった方法で。見栄えのために表を使うなら、それはきっとモバイルでは逆効果になります。
表に大量の情報を入れようとしている場合、他の方法でそれを記述できないか検討してみてください。例えば、テキストなら見出しやリストを使う、画像ならサムネイルやギャラリーを使う、といった方法で。見栄えのために表を使うなら、それはきっとモバイルでは逆効果になります。