【Vuetify】フォントサイズのクラスの種類と指定方法2021.07.23VuetifyBこんにちは、ryohei(@ityryohei)です!本記事では、Vuetifyでデフォルトで用意されているフォントサイズのクラスと指定方法をご紹介しています。Vuetifyのフォントサイズのクラスは何種類あって、どうやって指定すればいいの?上記の疑問にお答えします。用意されているフォントサイズのクラスVuetify(ver2.4.5時点)には全部で13種類のフォントサイズのクラスが用意されています。HTMLのclass属性に用意されているフォントサイズのクラス名を指定することでスタイルを適用することができます。フォントサイズの指定方法はととても簡単で、ブレイクポイントとフォントサイズのクラス名を下記のように指定するだけです。//ブレイクポイント指定なしtext-{value}//ブレイクポイント指定ありtext-{breakpoint}-{value}breakpointにはBootstrap等でおなじみのsm~xlのブレイクポイントを指定します。breakpointを指定すると、ブレイクポイント以上の画面サイズの場合にスタイルが適用されます。デフォルトのブレイクポイントはxsとなっているので、xsは省略可能です。ちなみにxsは全画面サイズで適用される値です。valueには下記表のクラス名を指定します。各クラスには予めマテリアルデザインの仕様に基づいたスタイルが定義されています。全部で13種類用意されているので、デザインカンプに近いフォントを選ぶことができますね。.1666666667emマテリアルデザインテキストの仕様につきましては下記のサイトで確認することができます。見やすくまとめられているので、一度目を通しておくと良いかもしれません。https://material.io/design/typography/the-type-system.htmlでは、実際にVuetifyでフォントサイズのクラスを使ってみましょう。フォントサイズのクラスを使ってみるブレイクポイントの挙動も確認したいので、ブレイクポイントなし・ありのパターンでクラスを指定してみます。h1はサイズが大きすぎるので、h4より小さいサイズを指定してみます。Program(xl)</p></v-app>表示は下記のようになります。指定したクラス名のフォントサイズが反映されているかと思います。CODEPEN」からCodePenに移動し、ブラウザのウィンドウサイズを変更してみてくださいね!最後にそういえば!私が携わっていたVuetifyを使用したウェブアプリ開発の案件は無事に構築が完了し、納品となりました。関係者の皆さん、誰も見ていないと思いますがお疲れ様でした!それ以降はVuetifyを触っていなかったのですが、最近個人的にウェブアプリを開発していて、そちらでVuetifyを採用しようかなと考えています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。