今は初心者もホームページ作成にはスマホ対応が必須の時代になりました。Table式レイアウトのホームページを公開している人は、新しくスマホ対応にしたいと思う人は多いはずです。ただ、スマホ対応といえばその基本は「レスポンシブデザイン」になりますが、素人にはこれが難しく気軽にWebページを作るのが難儀な時代になりました。
　そこで、簡易形でもレスポンシブ対応ができないかを考えてみました。私が数年前からyytomyの「IT情報」で使用している「文字だけスマホ対応」の手法が参考になるかと、当時の資料を探しましたがほとんど残っていません。古い記憶を頼りにテストで確認したり、ネットで調べたりして文書化したのがこのページです。
　ここで「レスポンシブなHTMLメールを作る」業界があり、そこでは「レスポンシブデザイン」の他に、簡易形レスポンシブとも呼ぶべき「スケーラブルデザイン」があることを知りました。このページでは簡易形のスマホ対応として、文字のみをレスポンシブにする「スケーラブルデザイン」を提案します。

＜レスポンシブデザインの基本的な設定＞
　PCやスマホはそのディスプレイの大きさが多種多様ですが、特にスマホではどんな画面サイズでもわかりやすい表示になることが必要になります。こんな多様な画面サイズに自動的に対応して表示する考え方や手法を「レスポンシブWebデザイン」といいます。
　レスポンシブWebデザインの基本を、その手法をネットを探りながら述べることにします。ネットではどのページも判で押したように、2つ基本要素の記載があります。それはviewport（ビューポート）と、media query（メディアクエリ）の2つです。

◇「viewport」の一般的な指定
　「viewport」は HTMLファイルのヘッダ部分に指定します。このviewportは meta要素のname属性の1つでスマホの表示領域を意味し、content属性にその値を指定します。この指定方法のポイントは viewportの値を変数「device-width」にすると、「media query」の記述でviewportの値が決まることです。
　<meta name="viewport" content="width=device-width">
（古くは上記の右端にInternet Explorer用の指定「,initial-scale=1.0」の指定がありました）

◇「media query」の一般的な記述
　レスポンシブデザインではviewportの指定に加えて、HTMLファイルのヘッダ部分にstyle要素として、CSSで次のように「media query」（メディアクエリ）を記述します。具体的には下記の例に示すような指定をします。右端の｛ ｝内にCSSを記述します。
　①768px以上（PC）： @media print,screen and ( min-width: 768px){ }
　②767px以下（スマホ）：@media only screen and ( max-width: 767px){ ｝
　上記の例で768pxを「break point」（ブレークポイント）といい、PCとスマホを切り換えるpixel値を指します。先に述べたように media queryが働くのは、viewportのwidthが変数「device-width」のときのみです。言い換えれば、viewportが固定値あるいは無指定の場合には、media queryを指定しても意味を持ちません。

　さて、枚方南支部のホームページは2000年以降 WordPress で作っていますが、それ以前の数年間は本格的な「レスポンシブデザイン」のページを作ってきました。そのときはviewportの働きの理屈は考えずに、言われるままに設定すればページがうまく動いてくれました。
　ただ、このmedia queryの記述は、（特に初心者には）ややこしすぎて大変です。このページはmedia queryの記述なしで「レスポンシブデザイン」らしきページが作れないかを検討した記録です。

＜viewportを固定値にしてみる＞
　前項のviewportの物理的な意味を、改めてネットで調べても今以ってよく分かりません。「この指定はGoogleの推奨です」とだけ書いたページがほとんどです。ただ一つ、viewportの本質をついたページを見つけました。
　『metaタグのviewport指定はスマホのブラウザへの「アドバイス」として参照されます。一方、このviewportの記述はPC側には何も関係しません。PC版のレイアウトの縮小版をスマホでも意図的に見せたいときは、media queryを記述せずviewportのみを固定する』という記述です。これはyytomyの「IT情報」でたまたまやってきた手法に同じで、今となってようやく理論的に認証された気がします。

　ここでmedia queryの設定をせずに、viewportを固定値にしてその値を変えたときのスマホの表示状態を調べるテストをしてみました。具体的にはyytomyの「IT情報」サイトを基準にテストします。このサイトのページ幅は「720px」に指定し、media queryの設定はしていません。テストに使ったスマホは、Fujitsu arrows We F-51Bです。
　下図は次式のviewportの指定で「width」を5段階の固定値に変えたときのスマホの表示です。
　<meta name="viewport" content="width=****">

＜テスト結果を検証する＞
　このテストは「media query」の設定なしの結果で、すべてこれを前提にしています。

• width値が「720」より小さいときは表示領域一杯で文字は小さくなり、「720」より大きいときは表示領域が狭くなり文字も小さくなります。
• viewportがPCのページの横幅と同じとき、スマホの表示領域に対して文字がほどよい大きさになり、その文字は表示領域一杯に拡がります。レスポンシブになるということです。
• viewportをPCのページの横幅と同じにしたとき、文字はレスポンシブになりますが、画像・Table・横並びメニューなどは小さい表示になってしまいます。
• 先に述べたように「IT情報」サイトのPCでの横幅は「700px」に設定していますが、viewportはこれより少し大きく「width=720」と指定しています。細かいことですが、viewportは PCの表示領域より数％大きくするのがよさそうです。これでスマホの文字は見やすい大きさで画面一杯に（両端に少し空白部分を残して）表示されます。文字も読みやすい大きさになります。
• 多くのネットで「viewport が未設定のときその値は980pxになる」と記載されています。
  <meta name="viewport" content="=device-width">と指定したときも、「width=980」と同じ結果になりました。

＜簡易形レスポンシブデザインを検証する＞
　yytomyの「IT情報」サイトのページの一例を下図に示します。そのすべてのページでレイアウトは、基本的に次のように単純なデザインになっています。
　①ワンカラムの文章主体のページであり、
　②画像は文中の所々にフロートして配置し、
　③サイト内のすべてのページは同じ横幅にしています。 　　

　さて、よく見るブログの構造は文章の合間に画像が転がっているという単純なデザインになっていますが、「IT情報」はこのブログを技術文らしい文章と図表にしたデザインと考えていいでしょう。このような単純なデザインのページは、media queryを省いてviewportを固定値にしただけの単純な設定で、「簡易形レスポンシブデザイン」として広く使えそうに思います。

　上図PCの表示をもう少し詳しく覗いてみます。全体デザインは文章主体のワンカラムのページとなっており、画像は画面全体の半分ぐらいの横幅を占めて右にフロートしています。
　一方、上図をスマホで見たのものが右画面です。文字はほどよい大きさで、読みやすいレスポンシブになっています。ただ、画像も横幅の半分ぐらいになって、スマホで見るにはちょっと小さすぎます。このように文字以外はレスポンシブになりません。横幅がpx値で固定される 画像・table などです。これらはPCとスマホの表示領域の大きさに比例して小さく表示され、ちょっと見づらくなってしまいます。

　このようにPC版のページレイアウトが文章主体の単純な構成であれば、これをスマホで本格的な「レスポンシブ」にするのは、作成側からは非効率、ユーザ側には原ページのイメージが伝わりにくいとも言えます。こんなページではPC版のレイアウトを、意図的にそのまま縮小版にしてスマホに見せる方が親しみやすい気もします。

＜簡易形レスポンシブデザインに適したページ＞
　簡易形レスポンシブデザインを適用するには、次のようなページであることが必要です。
・レイアウトはワンカラムである
・文章主体のページである
・画像の数が少ない
・ページレイアウトにtableは使わない
・ページ全体を画像やpdf にしない

　参考までに、下図に松愛会枚方南支部の現在のトップページの一部分を示します。このページはWordPress を使って3カラムにしています。こんなページを作るには本格的なレスポンシブデザインにするか、WordPress にするしかありません。ただ、いずれの方法も初心者が一から挑戦するにはハードルが高すぎます。