k3の駄文録

ドーでもいいことを書いています。

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

別記事にブコメの返信来たので・・・

初めまして。 記事の内容と無関係ではありますが、ブックマークでコメントを頂いたので、ここに書かせてください。

>k3akinori この表ならth, td {display:block;}でレスポ対応になりますよ。

 私の記事の趣旨を全く理解されていないようで残念です。 私はレスポ対応が可能かどうかということではなくてレスポ対応自体が私のページに向いていないと書いたのですが。

それとviewportを設定しておっしゃる通りにしたら私の想像通り本文がスマホの幅になって、表が画面からはみ出すという嫌なレイアウトになっただけです。 しかもiPhone6で参照すると表の左側しか見ることができません。何故かスクロールができません。 他の機種でどうなるのかは分かりませんが、仮に表のスクロールができたとしても良い外観デザインとは言えないでしょう。

>/あ、表紙にインラインスタイル使い過ぎですね。これは無理だわ。

これの意味が分かりません。 私は今の表紙を改造して実際にレスポ対応した表紙を試作しています。もちろんちゃんと動作しています。 インラインスタイルを使っているからと言ってレスポ対応が無理とはどういう意味でしょうか? 仮にインラインスタイルが問題だとしても修正は容易です。表紙はたった一枚しかないのですから。

クソリプだったようで失礼しました。

viewportとか知ってるし、ある程度CSSできる方とお見受けしたので雑に書きましたが雑すぎたようで。

インラインスタイルについては、JavaScriptCSS書き換えるような面倒な方法しか思いつかなかったんですよね。CSSファイルを読み込ませると!imbortant使いすぎの醜いコードになるし。

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

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

 Webマーケティングの世界では、「スマホで見る人は意外と長いスクロールを苦には思っていない」という話があって、ものっそい長いページを作ることも多々あるのでそこは問題ではないと私は考えております。

サイトの作りはシンプルでレスポンシブデザイン対応は簡単な部類に入るのでもったいないなーと。

表がはみ出す、iPhoneでスクロール不能になるのはbodyのmargin-leftとかが悪さしてるのだろうし、画像をレスポンシブデザイン対応にするのはmax-width:100%;とheight:auto;で縦横比を維持しつつ横幅いっぱいで表示するようになるし。

コンテンツとしてレスポンシブデザイン対応は不要と言うことなので、必要ないとは思いますが、CSSファイルの最後に下のコードを入れれば表の問題とかは解決するんじゃないかと。

@media screen and (max-width:570px) {

body {

 width: 98%;

margin: auto;

}

table {

width:100%;

}

th, td {

display: block;

width: 98%;

}

img {

max-width: 98%;

height: auto;

}

button {

width: auto;

}

#title-container {

widht: 100%;

}

}