- 投稿日：2021-10-16T17:18:34+09:00
【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする
【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする はじめに Vue.jsのUIフレームワークとしてVuetityを使用します。 マテリアルデザインを踏襲したボタンやダイアログなどを手早く実装できます。 データテーブルについても、v-data-tableというコンポーネントを用いて実装可能です。 HTMLのtableタグで実装するよりも効率的に、しかも見栄えよく実装可能です。 様々なプロパティを付与し、テーブルの加工ができます。 行いたいこと テーブルのヘッダー部分と1列目の部分をスクロール時に追従させるようなデザイン。 プロパティの中に、fixed-headerという、ヘッダーを画面上部に追従できるものがあるのですが、今回の要件を満たせないため、データテーブル用のCSSを独自で作成する方針をとります。 オレンジ部分をスクロール追従させます。 ソース compornent.vue <template> <div id="list-table"> <v-data-table :headers="dataTableHeaders" :items="dataTableItems" hide-default-header hide-default-footer dense > <template v-slot:header"> <thead> <tr>ヘッダーの各行の内容を記載する</tr> <tr>ヘッダーの各行の内容を記載する</tr> </thead> </template> <template v-slot:body="{ items }"> <tbody> <tr>表の各行の内容を記載する</tr> <tr>表の各行の内容を記載する</tr> </tbody> </template> </v-data-table> </div> </template> <style scoped> /* データテーブルのコンテンツが大きいため、scrollを設定 */ #list-table { overflow: scroll; } /* データテーブルのヘッダー及び、bodyの1行目にスクロール追従を設定 */ #list-table table thead tr th, #list-table table tbody tr th:first-child { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; left: 0; } </style> 上記ソースでは、スクロールの追従ができませんでした。 ちなみに、HTMLのtableタグで作成した表に関しては、上記CSSで上手くいったので、v-data-tableが原因だと予想できます。 原因 v-data-tableの仕様のようで、overflowが設定されているようでした。 こちらの記事にあるように、v-data-tableで作成されるHTMLのクラスに対して、overflowの設定をunsetすることで解決できました。 .v-data-table /deep/ .v-data-table__wrapper { overflow: unset; } /deep/に関して /deep/は、deep selectorと呼ばれるものです。 Vue.jsでは、今回のようにstyleタグにscopeをつけることで、styleをそのコンポーネントのみに適用させることができます。（反対にscopeを付けなかった場合、グローバルなstyleとなり、該当コンポーネント以外にも同名のクラスが存在する場合には、styleが適用されてしまいます） 該当コンポーネントの子コンポーネント（HTMLタグ上では子クラスと同義）にもstyleを適応させたい場合に、deep selectorを用いることで、子コンポーネントにも適用させることができます。 今回に関しては、.v-data-tableが親コンポーネント、.v-data-table__wrapperがその子コンポーネントというように見なされているのだと考えられます。 ちなみに、/deep/については .v-data-table >>> .v-data-table__wrapper { overflow: unset; } のようにも記述できます。 最後に VuetifyはマテリアルUIを踏襲した便利なライブラリですが、 参考資料が少ない部分があるため、 躓いた内容は積極的にアウトプットしていきたいです。
- 投稿日：2021-10-16T16:50:31+09:00
HTML&CSS_02 【RESTART】
HTML＆CSS_02 今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて ※前回の記事 お役立ちメモ メモ Google Drive からの画像参照方法 https://drive.google.com/file/d/画像ID/view?usp=sharing ⇒ https://drive.google.com/uc?export=view&id=画像ID フェーズ１_学習 「progate」「HTML＆CSS中級編」を学習 フェーズ２_記録 テキストファイル化し以下のコードに手記入でメモ書き HTML <!DOICTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプルページ２</title> /*アイコンを参照出来る外部サイトのリンクを読み込む*/ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa"> <span class="page-title">サンプルページ２</span> </div> <div class="header-right"> <a href="#" class="login">ログイン</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>サンプルトップ</h1> <h1>サンプル内容</h1> <p>サンプルトップページです</p> <p>がんばって作成してゆきます</p> <div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <p>SNSでも登録できます</p> /*fa fa-~ でアイコンを表示出来る*/ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> </div> </div> </div> <div class="middle-wrapper"> <div class="container"> <div class="heading"> <h2>サンプルキャラクター集</h2> </div> <div class="characters"> <div class="character"> <div class="cha-icon"> <img src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa"> <p>モコ</p> </div> <p class="txt-contents">定期的にトリミングされる猫</p> </div> <div class="character"> <div class="cha-icon"> <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ"> <p>ちび</p> </div> <p class="txt-contents">枝豆が好物らしい</p> </div> <div class="character"> <div class="cha-icon"> <img src=https://drive.google.com/uc?export=view&id=1VPQ7F6JnlLt2Q76G55IopA-IpJ43lCar> <p>ヨシ猫</p> </div> <p class="txt-contents">好きなもの：ストロングゼロ Alc.9%</p> </div> </div> </div> </div> <div class="lower-wrapper"> <div class="container"> <div class="heading"> <h2>このページに関するお問い合わせはこちらから</h2> </div> <span class="btn message">お問い合わせ</span> </div> </div> <footer> <div class="container"> <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ"> <p>サンプルページ２</p> </footer> </body> </html> CSS body { margin: 0; font-family: "Meiryo UI"; } a { text-decoration: none; /*テキストの装飾を消す*/ } .container { width: 1170px; padding: 0 15px; margin: 0 auto; } header { height: 70px; width: 100%; background-color: rgba(34,49,52,0.9); /*色のRGB指定と透過度*/ position: fixed; /*表示の固定*/ top: 0; /*ポジションの位置指定*/ z-index: 10; /*要素の重なりの設定*/ } .logo { width: 68px; } .header-left { float: left; } .header-right { float: right; background-color: rgba(255,255,255,0.3); transtion: all 0.5s; /*変化後の状態から指定秒数で変化させる*/ } .header-right:hover { /*カーソルを合わせた際に適用*/ background-color: rgba(255,255,255,0.5); } .header-right a { line-height: 70px; /*インラインブロックの高さ*/ padding: 0 25px; color: white; display: block; } .page-title { color: white; font-weight: bold; font-size: 40px; display: inline-block; height: 65px; padding: 20px; } .top-wrapper { padding: 180px 0 100px 0; /*背景画像の設定*/ background-image: url(https://drive.google.com/uc?export=view&id=1rHHnCRJBd5AzWO68m710F3eg05jZkQ_0); background-size: cover; text-align: center; color: rgb(255,204,0); } .top-wrapper h1 { font-size: 45px; letter-spacing: 5px; text-shadow: 2px 2px 2px black; /*テキストに影を付けて強調*/ } .top-wrapper p { text-shadow: 2px 2px 2px black; } .btn-wrapper { margin: 20px 0; } .btn-wrapper p { margin: 10px 0; } .signup { background-color: #239b76; } .facebook { background-color: #3b5998; margin-right: 10px; } .twitter { background-color: #55acee; } .btn { padding: 8px 24px; color: white; display: inline-block; opacity: 0.8; /*透過度*/ border-radius: 4px; /*過度の丸み*/ } .btn:hover { opacity: 1; } .fa { margin-right: 5px; } .middle-wrapper { height: 500px; padding-bottom: 80px; background-color: #e6ffe9; text-align: center; } .heading { padding-top: 60px; padding-bottom: 30px; color: #5f5d60; } .heading h2 { font-weight: normal; } .character { float: left; width: 25%; } .cha-icon { position: relative; /*重ね表示する際の起点とする設定*/ } .cha-icon p { position: absolute; /*起点から以下のプロパティ分をオフセット*/ top: 190px; width: 160%; font-weight: bold; } .txt-contents { display: inline-block; margin-top: 20px; font-size: 15px; } .lower-wrapper { border-bottom: 1px solid #eee; padding-bottom: 80px; text-align: center; } .message { padding: 15px 40px; background-color: #5dca88; cursor: pointer; /*カーソルが乗った際にポインターに変わる*/ box-shadow: 0 7px #1a7940; /*ボックスに影を付けて立体的に表示*/ } .message:active { /*クリックされた際に適用*/ position: relative; top: 7px; box-shadow: none; } footer img { width: 50px; } footer p { color: white; font-size: 12px; float: right; } footer { background-color: rgba(34,49,52,0.9); } フェーズ３_実践 「codepen」を使って実際にページ作成 メモ書きを行ったテキストファイルを使用する ※「0.25x」推奨 See the Pen サンプルページ２ by yuta-proto-biz (@yuta-proto-biz) on CodePen. フェーズ４_発信 縮尺が変更された場合に、背景が見切れたり まだまだ必要な技術は多い とは言えそれっぽいページが出来てきたと思う （コードのコメントアウト内の注釈は間違っている可能性あり） 過去記事へのリンク