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

スポンサーリンク

 

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

スポンサーリンク

 

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を設置しプロパティを以下の様に指定することで上記ブラウザの全てで、右端の折り返しができる様になりました。

 

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)を指定すれば、スマホ画面でテーブルが横スクロールできます。 実際に対応したページをスマホサイズの画面で、ご参照ください。

サンプル音源DLコーナー   マイ・コレクション

 

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

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

 

スポンサーリンク


〜〜〜〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

Copyright© ハイレコのブログ , 2020 All Rights Reserved Powered by AFFINGER5.