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

2022年11月10日

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

preタグ問題とその対応

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

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

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

この原因は、white-spaceの設置が無いままpreタグを使用すると、プラウザの挙動に差異が生じるものの様です。

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

ブラウザ	右端の折り返しの有無
OSX safari	◯　折り返す
OSX google chrome	☓　折り返さない
fireFox	☓　折り返さない
windows10 Edge	◯　折り返す
windows10 IE10	◯　折り返す

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

pre {
white-space: pre-wrap; /*　chrome等の右端の折り返し設定 */
}

pre {

white-space: pre-wrap; /*　chrome等の右端の折り返し設定 */

}

Google code prettifyのスマホ表示

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

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

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

<style>
.prettyprint_scroll {
word-wrap:normal;/*prettyprintに対する右端折り返し禁止 */
white-space:pre;/*preタグに対する右端折り返し禁止 */
-webkit-overflow-scrolling: touch;/*iphoneのスクロール潤滑コード */
}
</style>
<pre class='prettyprint linenums prettyprint_scroll' >
　　〜HTMLコード〜
</pre>

<style>

.prettyprint_scroll {

word-wrap:normal;/*prettyprintに対する右端折り返し禁止 */

white-space:pre;/*preタグに対する右端折り返し禁止 */

-webkit-overflow-scrolling: touch;/*iphoneのスクロール潤滑コード */

}

</style>

　　〜HTMLコード〜

</pre>

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

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

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

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

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

.scroll_3 { 
white-space:normal; /*　テーブル内の自動折り返し */
overflow:auto; /* はみ出たらスクロール */
-webkit-overflow-scrolling: touch; /*iphoneのスクロール潤滑コード */
}

.scroll_3 {

white-space:normal; /*　テーブル内の自動折り返し */

overflow:auto; /* はみ出たらスクロール */

-webkit-overflow-scrolling: touch; /*iphoneのスクロール潤滑コード */

}

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

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

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

pre {
display: block;
padding: 10.5px;
margin: 0 0 11px;
font-size: 15px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333333;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
}