1. クラウドソーシングTOP
  2. みんなのお仕事相談所
  3. 横にスクロールできるレスポンシブテーブルについて
みんなのお仕事相談所

「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。

発注者からの相談
HTML・CSSコーディングの見積もり・相場に関する相談

横にスクロールできるレスポンシブテーブルについて

解決済
回答数
5
閲覧回数
13223
すぐ知りたい!  : すぐ知りたい!

HTML・CSSコーディングの依頼を検討中なのですが、どれくらいの相場感・費用になるかがわかりません。

簡単に要件をまとめさせていただきますので、お見積もりをお願いできませんでしょうか。

====================
作りたいページのイメージ
====================
  ・現サイトはwordprssで作成、テーブルはプラグインの「tablepress」を使用しています。
   カスタマイズは、指定のページのみに反映されて他ページ(tablepressで作成したテーブル)には干渉しないような設定にしてほしい。
  ・テーブルをスマホで見たときに、左一列が固定されて2列目からが横スクロールできるようにしたい。
  ・「スクロールできる」というメッセージを表示させたい。
 
  ※参考サイト:http://karikaeloan.jp/(スマホで確認してください)

====================
納期
====================
作業開始から約3日間程度でできますでしょうか?

====================
コメント
====================
 CSSとHTMLを作成するにあたって、こちらのサイトを参考にタグを入れてみたのですが
※参考サイト:http://weback.net/mobile/2195/
PCで上部横並びの見出しが、スマホになると左縦並びになるように設定されているようです。
結果、うまく設定できない状態になっています。
PC表示と縦横の見出し位置は変更せずに、横スクロールできるテーブルにしていただきたいです。
もし、現在試しているテーブルのコードが使えないものでしたら、1から書き直していただけたらと思います。

----------------------------------------------
CSSコーディングの知識がないので、ご説明していただく際にはわかりやすい形でお願い致します。
お見積もりを出していただく際に、ご質問等ありましたらご連絡ください。


以上よろしくお願い致します。

2015年11月30日 09:56

ベストアンサーに選ばれた回答

RapidWebDevさんからの回答

WB002様はじめまして。RapidWebDevと言います。
面白い質問だったので回答致します。

jQueryプラグインのDataTablesがご指定の要件に合致しています。
https://www.datatables.net/

左カラムの固定
https://www.datatables.net/extensions/fixedcolumns/

レスポンシブへの対応
https://www.datatables.net/extensions/responsive/

スマホで横スクロールの挙動を確認できるURL
https://www.datatables.net/examples/basic_init/scroll_x.html

縦スクロールでずれなくするための対応(xScrollX/xScrollXInnerの指定)
http://datatables.net/forums/discussion/11304/issues-with-sscrollx-and-sscrollxinner

スマートフォンやタブレッドでは横長のテーブルが見づらくなるため
横スクロールに対応するケースは多くあり一般的に使われています。

対応日数ですが、上記情報があればご自身でも出来るかも知れませんし
他の方にお願いする場合でも2~4時間程で完了するのではないでしょうか。

以上になります、
WB002様が良いデベロッパーに出会えますよう願っております。

2015年11月30日 11:26
相談者からのお礼コメント

ありがとうございました。
詳しく書いていただきましたので、ベストアンサーとさせていただきます。

2015年11月30日 16:20

すべての回答

myhiro.cometureさんからの回答

デザイナーではないので正確なことは言いませんが

スマフォで横スクロールは使いませんよ。

table tag や div タグを二つ書いて PCでは左右になるように書いておくと、幅の狭いスマフォでは自然に下がります。
当然スマフォを横にすると二つになります。

しかし抜本的解決は、ブラウザ判定してスマフォの場合は tabコントロールで 表示、非表示でスクロールなしに切り替えたほうが
得策な気もしますし、スマフォ特有な誤クリックを稼げるのでし、SEOにも有利なキーワー埋め込めると思います。

回答になっていなくてすみません

2015年11月30日 10:51
新日本事業開発桜井一樹さんからの回答

スマートフォンでの横スクロールはmyhiro.cometure様の言うとおり一般的ではないですが、開発できないこともないと思います。

2015年11月30日 11:08
RapidWebDevさんからの回答

WB002様はじめまして。RapidWebDevと言います。
面白い質問だったので回答致します。

jQueryプラグインのDataTablesがご指定の要件に合致しています。
https://www.datatables.net/

左カラムの固定
https://www.datatables.net/extensions/fixedcolumns/

レスポンシブへの対応
https://www.datatables.net/extensions/responsive/

スマホで横スクロールの挙動を確認できるURL
https://www.datatables.net/examples/basic_init/scroll_x.html

縦スクロールでずれなくするための対応(xScrollX/xScrollXInnerの指定)
http://datatables.net/forums/discussion/11304/issues-with-sscrollx-and-sscrollxinner

スマートフォンやタブレッドでは横長のテーブルが見づらくなるため
横スクロールに対応するケースは多くあり一般的に使われています。

対応日数ですが、上記情報があればご自身でも出来るかも知れませんし
他の方にお願いする場合でも2~4時間程で完了するのではないでしょうか。

以上になります、
WB002様が良いデベロッパーに出会えますよう願っております。

2015年11月30日 11:26
(退会済み)
(退会済み)さんからの回答

お世話になります、株式会社ナインスターズと申します。
RapidWebDevさんが仰っているように、参考サイトはJQueryのjquery.table.jsで横スクロールしています。

http://karikaeloan.jp/sp/common/js/jquery.table.js を 「tap」で検索した場所を参考

また、PCサイトとスマホサイトは明確にURLを分けているのでレスポンシブで対応しているわけではないです。
wordprssに組み込む場合は少し面倒になると思います。

以上ご参考まで。

2015年11月30日 12:15
相談者コメント

myhiro.cometure様 株式会社新日本事業開発様
ご意見ありがとうございました。


2015年11月30日 12:22
相談者コメント

■RapidWebDev様 
■株式会社ナインスターズ様

ご回答ありがとうございます。
とても参考になりました。
連名で失礼いたしますが、もしこちらの作業をお仕事として依頼する場合
報酬金額はいくら程度になりますか?

概算でも結構ですので、お見積頂けないでしょうか?

2015年11月30日 12:30
RapidWebDevさんからの回答

WB002様、返信ありがとうございます。
RapidWebDevです。

現在クラウドワークスで仕事請ける、また作業をしないようにしているため
私が行うお見積もりではありませんが

テーブルを横スクロールさせるのみの対応であれば
0.5万~1.5万円程かと思います。

実装方法は前メッセージの通りで可能です。
自分でも良く使っているプラグインですので
プラグイン自体に問題があり実装できないという事にはなりません。

以上になります。
参考にしてもらえればと思います。

2015年11月30日 14:52
相談者コメント

RapidWebDev様
お返事ありがとうございました。
お仕事を現在行われていないのですね、残念です。
お伝えいただきました内容、参考にさせていただきます。

ありがとうございました。

2015年11月30日 15:25
不安や疑問に真摯に向き合い改善につとめます クラウドワークス安心安全宣言