スタイルの検討

パソコンとスマホでの共用化をはかるためには、既存のパソコン用のCSSJavaScriptの検討・修正が必要になる。もちろんパソコンがメインで、スマホはサブである。

body

設定例
body {
  color:black;
  font-family:"MS ゴシック",sans-serif;
  font-size:15px;
  background-color:white;
  line-height:1.5;
  margin:3px 10px;
}

/* スマホ用の修正 */
body {
  margin:3px 5px;
}

以前は「margin:3px 15px」だった。スマホの横幅の制限は厳しいから、わずかな「すき間」でもムダには使えない。
そこで左右のスペースを「10px」にし、スマホ用には「5px」にした。ここを0pxにして左右に「すき間」を空けないと、これまた見苦しい。

pre

設定例
pre {
  color:#3300cc;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1.5;
  margin:0;
  white-space:pre-wrap;
}

/* スマホ用の修正 */
pre {
  color:navy;
  background-color:#ffffe0;
  font-size:14px;
}

これもスマホの横幅制限を考えると、従来のpreではパソコンほどには多用できないだろう。
しかし、「white-space:pre-wrap;」にすると次の2点が可能になるため、大いに使用価値がでてくる。むしろ全部preタグで囲んでもよいほどである(笑)。
  1. 原文で改行していればブラウザでの表示も改行する。
  2. 表示領域の右端で自動的に折り返す。

table

設定例
table {
  color:black;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1;
}

共用化に際して、パソコンのような横幅すべてを使う長いヘッダー・フッターのレイアウトのためのtableタグは使わない。これが必要になるのはスマホのような短いヘッダー・フッターと純粋の表(ひょう)を描く場合だけになる。

その表もスマホでは大きなものは使えない。となるとtableを使うのは限られた場合だけになる。スマホ用の修正をしていないのはそのためである。


英字フォントのスタイルでは文字サイズの指定をしないことにする。スマホのようにフォント指定が無視される場合は、文字サイズを指定していると、そこだけ周りの文字と比べて、大きくなったり小さくなったりするからである。