「電卓喫茶」をレスポンシブWebデザインにできるかどうか検討してみた。

表題のように「電卓喫茶」をレスポンシブWebデザイン（CSSを利用して、画面サイズによって自動的にレイアウトを切り替えるWebサイト。スマホのために考案された。）にできるかどうか検討してみました。

結論としてやめておくことにしました。

表紙と読物コーナーに関してはviewportを設定して長ったらしいCSSを書けばできなくはないのですが、肝心の電卓紹介ページと電卓画像集はCSSだけでレスポンシブWebデザインにできません。HTMLのマークアップを大幅に変更する必要があるでしょう。

しかし、レスポンシブWebデザインにするとレイアウトやデザインの自由度が低くなります。特にtableタグの扱いに完全な答えはないようです。無理にレスポンシブWebデザインにすると不自然なデザインになりかねません。

そもそも長文をスマホで見るようにするという発想がおかしいのかもしれません。どうしても異常に縦長になってしまうのです。

例えば、Wikipediaをスマホで見るとモバイル版が表示されますが、スマホで長文を表示したときに異常に縦長になることを回避するために大項目が折り畳まれた状態で表示されます。その副作用でスマホ上でページ内検索をするときは大項目を展開しておく必要があり不便です。それに大項目を展開したら結局は異常に縦長になることもあります。（ちなみにWikipediaはレスポンシブWebデザインではないようです。PHP言語を使ってPC版とモバイル版を完全に別のページとして切替えているようです）

以下の関数電卓／グラフ電卓のサイトはレスポンシブWebデザインになっていません。

• The Museum of HP Calculators
• 関数電卓マニアの部屋（東海大学遠藤研究室）

高度な内容のページにレスポンシブWebデザインは不要なのではないでしょうか。PCで見るべきものでしょう。

「電卓喫茶」が高度かどうかは分かりませんが、スマホで読むような軽い内容でないのは間違いないでしょう。

（追記）

内容を誤解された方がいらしたので、補足しておきます。
上述の文章は「レスポンシブWebデザインが可能かどうか」という結論ではなくて、「電卓喫茶」には、レスポンシブWebデザインは無理に必要ないということです。
時間を使って不自然なレイアウトを許容すればもちろん可能です。