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