HOMEVuetify【Vuetify】max-heightを指定してスクロールバーを表示する【Vuetify】max-heightを指定してスクロールバーを表示する2021.07.23VuetifyBこんにちは、ryohei(@ityryohei)です!本記事では、Vuetifyでmax-heightを指定してスクロールバーを表示する方法をご紹介しています。Vuetifyで要素のmax-heightを指定してスクロールバーでコンテンツを表示できるようにしたいんだけど、良い方法ないかな?上記の疑問にお答えします。※検証環境ではVuetify.2.4.9を使用しています。本記事でやりたいことせっかくVuetifyを使っているので、新しくスタイルを定義するのではなく、あるものを使ってやりたいことを実現したいなーと思い、タイトルにもあるようにmax-heightを指定してoverflowの縦方向(Y軸)をautoにしてみます。下記は完成版のデモです。リストが指定した高さに設定され、スクロールバーが表示されています。CodePen.デザイン性は皆無ですが......一応実現したいことはクリアできていますね!Vuetifyにおけるmax-heightとoverflowの指定についてVuetifyでは、max-widthとmax-heightは属性に数値を指定することで最大幅や最大高を設定することできます。img要素に指定するwidth属性やheight属性と似たようなイメージです。overflowについてはヘルパークラスが用意されており、予め決められたクラスを指定することでスタイルを設定することができます。デモではそれぞれ下記のように指定しています。</v-list></v-app>max-heightとmax-width全体の中で本記事の内容に関連する部分だけを抜き出すと下記のようになります。</v-list></v-app>max-heightとmax-widthは属性名が直感的だし、overflowのヘルパークラスもCSSで書く場合とほとんど同じなのでわかりやすいです。overflowのヘルパークラスについてCSSファイル内で確認できた分を記載しています。!important;最後にVuetifyを知ったのが2月頃でそれから結構な頻度で触っていますが、いまだに全ては覚えてきれていないのが現状です。ドキュメントを見ながらであればある程度はデザインを実現できるようにはなってきているので、成長はしているようです。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。