Q&A
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
###教えて頂きたいこと
以下のGoogleのテーブルのような、
スクロール後に、影を入れたいのですが、
どういった記述を加えれば良いか教えていただけないでしょうか。
途中まで作ったHTML（ページ下部に修正したソースがあります）
私が作ったテーブルのコードは以下の通りです。
Responsive TablesというJqueryライブラリを使用しています。
ソースには絶対パスを入れています。
※ローカルでは、このHTMLのみで普通に動きます。
※codepenを試したのですが、スクロールバーがおかしくなったので、やめました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>テーブル</title> <link type="text/css" media="screen" rel="stylesheet" href="https://zurb.com/playground/projects/responsive-tables/responsive-tables.css" /> <style> div.table-wrapper{ border: 1px solid #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://zurb.com/playground/projects/responsive-tables/responsive-tables.js"></script> </head> <body> <table class="responsive"> <thead> <tr> <th class="blank"> </th> <th>5/12</th> <th>5/13</th> <th>5/14</th> <th>5/15</th> <th>5/16</th> <th>5/17</th> <th>5/17</th> </tr> </thead> <tbody> <tr> <th>賃貸</th> <td>12</td> <td>13</td> <td>14</td> <td>23</td> <td>24</td> <td>25</td> <td>25</td> </tr> <tr> <th>一戸建て</th> <td>12</td> <td>13</td> <td>14</td> <td>23</td> <td>24</td> <td>25</td> <td>25</td> </tr> </tbody> </table> </body> </html>
上記のソースで表示される画面は、以下の通りです。
#頂いた回答を元に、修正！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>テーブル</title> <style> /* Foundation v2.1.4 http://foundation.zurb.com */ /* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Shared Styles :: Page Name 1 :: Page Name 2 */ /* ----------------------------------------- Shared Styles ----------------------------------------- */ table th { font-weight: bold; } table td, table th { padding: 9px 10px; text-align: left; } /* Mobile */ @media only screen and (max-width: 767px) { table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .pinned table { border-right: none; border-left: none; width: 100%; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } div.table-wrapper div.scrollable { margin-left: 35%; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } } /* responsive-tables.css 以外で追加した CSS */ div.table-wrapper{ border: 1px solid #ccc; } @media print, screen and (max-width: 750px) { .table-wrapper .scrollable{ background: linear-gradient(to left, rgba(255, 255, 255, 0), white 15px) 0 0/50px 100%, linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), white 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%; background-repeat: no-repeat; background-attachment: local, scroll, local, scroll; } } </style> </head> <body> <table class="responsive"> <tr> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> <th>項目１２４３</th> </tr> <tr> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> </tr> <tr> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> </tr> <tr> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> </tr> <tr> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> <td>項目</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://zurb.com/playground/projects/responsive-tables/responsive-tables.js"></script> </body> </html>
修正後の画面
上記のcss記述で実現できました。
アドバイスいただきありがとうございました。
回答1件
0
ベストアンサー
以下のGoogleのテーブルのような、スクロール後に、影を入れたいのですが、
とのことですが，文法的に正しい文章に直すと，おそらく「スクロール後に，以下のGoogleのテーブルのような，影を入れたい」だと思います．
しかし，そうだとすると
①「スクロールした後に表示される影」かつ，
②「以下のGoogleのテーブルのような影」を，
③「実際の画面」から探して助言することになるのですが
サイトを訪れても，該当する動作が確認できませんでした
質問者様が意図する動作がどんなものか，
質問文と模倣元との間にズレがあるため，正確な回答はできませんが，
単に影を付けたい場合，CSSでbox-shadowを設定するだけでよいですし，スクロールの程度に合わせて発火させたいなら，Responsive Tablesとは別の，その用途専用のライブラリを使う方が分かりやすいと思います．
投稿2018/08/06 08:45
総合スコア1284
ご回答いただき有難うございます！
> スクロールの程度に合わせて発火させたいなら，Responsive Tablesとは別の，その用途専用のライブラリを使う方が分かりやすいと思います．
こちら、もし、良いライブラリがあれば教えて頂けると幸いです。
> ③「実際の画面」から探して助言することになるのですが
サイトを訪れても，該当する動作が確認できませんでした
画像を追記しました。
動的なページな為、適切なURLを貼れませんでした、、失礼しました。
「スクロール後に影を入れる」が何を指すかを正確に言葉にしてもらえれば，自ずと検索キーワードも見当がつくはずです．
特に，どこに，どんな形状の影を，どんな効果と共に，表示させたいのか，ということを意識してください
レスポンスの速さも大事ですが，自分でググることも大事です
もし，キーワードが思いつかないのなら，[coliss](https://coliss.com/)さんの[Javascript関連記事](https://coliss.com/articles/category/build-websites/operation/javascript/)を漁ってみてください．何かヒントが見つかるかもしれません^^
アドバイスを頂き有難うございます。もう少し、調べてみます。
修正後の質問欄を見ました．もしかして，左右の見切れる部分をフェードアウトするようにしたいということでしょうか？
でしたら，ちょっとトリッキーですがCSSだけでできますね
このやり方は，なかなか見つけづらいので，ヒントを置いときます
・「::before」擬似要素
・「::after」擬似要素
・linear-gradient()
・rgba()
もし違ったとしても，覚えておくと
あとで色々と使えるものなので，調べて損はないはずです^^
頂いたアドバイスで、無事、やりたい事が実現できました。
参考にした記事は以下です。
https://mkasumi.com/scrolling-hints-by-css.html
修正したソースを貼り付けました。
色々とご教授いただきありがとうございました。
解決したようで良かったです^^
私自身もまだまだ勉強中の身なので，
一緒に頑張っていきましょう
はい、これからもよろしくお願いいたします！
あなたの回答
tips
プレビュー
