「その２」 テーブル等のレスポンシブWebデザイン対応

前回「RapidWeaver 7のレスポンシブWebデザイン対応」のブログを投稿しましたが、その時点では、テーブルなどのレスポンシブ対応は未着手でした。　今回は、前回のブログに引き続いて、「その２」としてレスポンシブ対応を行った過程で、手間取った点などをマトメてみました。

preタグ問題とその対応

RapidWeaver 7・”VOYAGER”テーマのpreタグのスタイルは、気に入っています。
しかし、preタグを使うと、ブラウザによって、右端での折り返しをしないという問題が生じました。

通常のプラウザの表示
右端で折返ししています！

Chromeプラウザの表示
折返しされていません！

preタグを使用する際、white-spaceを設置しないと、主要プラウザで折り返しの挙動がどうなるかを調べて見ますと、以下の様になりました。

 
この対策として、preタグは、white-spaceを設置しプロパティを以下の様に指定することで上記ブラウザの全てで、右端の折り返しができる様になりました。

Google code prettifyのスマホ表示

Google code prettifyは、Webページ上にHTMLコードをエディターライクで表示させるものですが、Google code prettifyを使用する場合、preタグを使用しなければなりません。
 

Google code prettifyのスマホ表示HTLM　コードが画面の右端で折り返されてしまう

これを避けるために、「prettyprint_scroll」というclass指定を行うことで、スマホ画面での右端の折り返しを避けて、横スクロールすることができます。

横幅をスマホサイズに縮小してみました。
PC画面で横スクロールできるこを確認してみてください。

 

テーブルのレスポンシブ対応

テーブルのレスポンシブ対応として、テーブルをスクロールさせる様にしたいと思いました。

Webで物色したところ、「スクロールできる表」が在りました。　これは、非常に大きなテーブルを扱い、メディアクエリ（ex @media)も使用するもので、少々大げさすぎる様に思われました。

そこで、white-spaceとoverflowをCSSに配置することで、画面サイズが小さいスマホ画面の場合テーブルをスクロールさせる様にしました。

  スクールさせたいテーブルに対して、divタグやpreタグで囲み、クラス名（scroll_3）を指定すれば、スマホ画面でテーブルが横スクロールできます。　

参考・”VOYAGER”テーマのpreタグのスタイル

参考までに、”VOYAGER”テーマのpreタグのスタイル（テーマフォルダのCSSフォルダにあるbootstrap.cssの1566行目）を示します。